fix: emoji picker scroll does not reach the end

.github/scripts/run-maestro.sh

@@ -73,6 +73,7 @@ if [ "$PLATFORM" = "android" ]; then
   maestro test "${FLOW_FILES[@]}" \
     --exclude-tags=util \
     --include-tags="test-${SHARD}" \
+    --exclude-tags=ios-only \
     --format junit \
     --output "$MAIN_REPORT" || true
 
@@ -141,6 +142,7 @@ while [ ${#CURRENT_FAILS[@]} -gt 0 ] && [ "$ROUND" -le "$MAX_RERUN_ROUNDS" ]; do
     maestro test "${CURRENT_FAILS[@]}" \
       --exclude-tags=util \
       --include-tags="test-${SHARD}" \
+      --exclude-tags=ios-only \
       --format junit \
       --output "$RPT" || true
   else

.github/workflows/build-pr.yml

@@ -102,7 +102,7 @@ jobs:
     secrets: inherit
     strategy:
       matrix:
-        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
+        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
       fail-fast: false
     with:
       shard: ${{ matrix.shard }}

.github/workflows/maestro-ios.yml

@@ -61,7 +61,11 @@ jobs:
       - name: Boot Simulator
         timeout-minutes: 15
         run: |
-          SIM_NAME="iPhone 16 Pro"
+          if [ "${{ inputs.shard }}" = "14" ]; then
+            SIM_NAME="iPhone SE (3rd generation)"
+          else
+            SIM_NAME="iPhone 16 Pro"
+          fi
 
           echo "Booting simulator: $SIM_NAME"
 

.maestro/tests/room/reaction-picker-small-screen.yaml

@@ -0,0 +1,78 @@
+appId: chat.rocket.reactnative
+name: Reaction Picker Small Screen
+jsEngine: graaljs
+onFlowStart:
+  - runFlow: '../../helpers/setup.yaml'
+onFlowComplete:
+  - evalScript: ${output.utils.deleteCreatedUsers()}
+tags:
+  - test-14
+  - ios-only
+
+---
+- evalScript: ${output.user = output.utils.createUser()}
+- evalScript: ${output.room = output.utils.createRandomRoom(output.user.username, output.user.password)}
+- evalScript: ${output.randomMessage = 'random-message'}
+
+- runFlow:
+    file: '../../helpers/login-with-deeplink.yaml'
+    env:
+      USERNAME: ${output.user.username}
+      PASSWORD: ${output.user.password}
+- runFlow:
+    file: '../../helpers/navigate-to-room.yaml'
+    env:
+      ROOM: ${output.room.name}
+
+- runFlow:
+    file: '../../helpers/send-message.yaml'
+    env:
+      message: ${output.randomMessage}
+
+# should reach the last emoji of the people category by scrolling (regression for small-screen reaction picker)
+- extendedWaitUntil:
+    visible:
+      text: .*${output.randomMessage}.*
+    timeout: 60000
+- longPressOn:
+    id: 'message-content-${output.randomMessage}'
+- waitForAnimationToEnd
+- extendedWaitUntil:
+    visible:
+      id: action-sheet
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      id: add-reaction
+    timeout: 60000
+- tapOn:
+    id: add-reaction
+- extendedWaitUntil:
+    visible:
+      id: reaction-picker
+    timeout: 60000
+- extendedWaitUntil:
+    visible:
+      id: emoji-picker-tab-emoji
+    timeout: 60000
+- tapOn:
+    id: emoji-picker-tab-emoji
+- waitForAnimationToEnd:
+    timeout: 1000
+- repeat:
+    while:
+      notVisible:
+        id: emoji-pregnant_woman
+    commands:
+      - swipe:
+          from:
+            id: action-sheet
+          direction: UP
+      - waitForAnimationToEnd:
+          timeout: 500
+- tapOn:
+    id: emoji-pregnant_woman
+- extendedWaitUntil:
+    visible:
+      id: 'message-reaction-:pregnant_woman:'
+    timeout: 60000

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -10,10 +10,14 @@ import { emojisByCategory } from '../../lib/constants/emojis';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
 import { useFrequentlyUsedEmoji } from '../../lib/hooks/useFrequentlyUsedEmoji';
 import { type IEmojiCategoryProps, type TEmojiCategory } from './interfaces';
-import { isAndroid } from '../../lib/methods/helpers';
 
-const ANDROID_BOTTOM_SHEET_EXTRA_OFFSET = 24;
-const ANDROID_BOTTOM_SHEET_CONTENT_PADDING = EMOJI_BUTTON_SIZE + ANDROID_BOTTOM_SHEET_EXTRA_OFFSET;
+// Minimum visible space below the last emoji row when the picker is rendered
+// inside a bottom sheet: one emoji row + a small offset, so the last row
+// clears the sheet's bottom interaction area. The container's
+// `marginBottom: safeAreaBottom` already supplies part of this on devices with
+// a home indicator; the FlatList only tops up whatever is missing.
+const BOTTOM_SHEET_EXTRA_OFFSET = 24;
+const MIN_BOTTOM_SHEET_BREATHING_ROOM = EMOJI_BUTTON_SIZE + BOTTOM_SHEET_EXTRA_OFFSET;
 
 const useEmojis = (category?: TEmojiCategory) => {
 	const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji();
@@ -59,7 +63,7 @@ const EmojiCategory = ({
 
 	const numColumns = Math.trunc(parentWidth / EMOJI_BUTTON_SIZE);
 	const marginHorizontal = (parentWidth % EMOJI_BUTTON_SIZE) / 2;
-	const contentPaddingBottom = isAndroid && bottomSheet ? ANDROID_BOTTOM_SHEET_CONTENT_PADDING + bottom : undefined;
+	const contentPaddingBottom = bottomSheet ? Math.max(0, MIN_BOTTOM_SHEET_BREATHING_ROOM - bottom) : undefined;
 
 	const renderItem = ({ item }: { item: IEmoji }) => <PressableEmoji emoji={item} onPress={onEmojiSelected} />;