From 7eba7930c0305b9e5b844a8e6665315a212432c5 Mon Sep 17 00:00:00 2001
From: Justin Wyne <1986068+wyne@users.noreply.github.com>
Date: Wed, 9 Sep 2026 20:50:12 -0400
Subject: [PATCH 1/3] fix: polish android interactions

---
 src/components/Buttons/GameOptionsButton.tsx | 63 +++++++++++++-------
 src/components/Buttons/HeaderButton.tsx      | 26 +++++++-
 src/components/GameListItem.tsx              | 23 +++++--
 src/components/ScoreLogTable.tsx             |  1 +
 src/components/Sheets/ChooseWinnersSheet.tsx |  2 +-
 src/components/Sheets/GameSheet.tsx          |  2 +-
 src/components/Sheets/GestureInfoSheet.tsx   |  2 +-
 src/components/Sheets/PointValuesSheet.tsx   |  6 +-
 src/screens/AppSettingsScreen.tsx            |  6 +-
 src/screens/ListScreen.tsx                   |  1 +
 10 files changed, 95 insertions(+), 37 deletions(-)

diff --git a/src/components/Buttons/GameOptionsButton.tsx b/src/components/Buttons/GameOptionsButton.tsx
index 45fcfd41..3746db39 100644
--- a/src/components/Buttons/GameOptionsButton.tsx
+++ b/src/components/Buttons/GameOptionsButton.tsx
@@ -168,30 +168,14 @@ const GameOptionsButton: React.FunctionComponent = () => {
             testID="game-options-menu"
         >
             <View style={styles.button}>
-                <View style={styles.content}>
-                    <View style={styles.addendColumn}>
-                        <Text style={[styles.addendText, { color: theme.text }]}>{addendOne}</Text>
-                        <Text style={[styles.addendText, { color: theme.text }]}>{addendTwo}</Text>
-                    </View>
-                    <View>
-                        {Platform.OS === 'ios' ? (
-                            <SymbolView
-                                name={isDial ? 'dial.min' : isSwipe ? 'hand.draw' : 'hand.point.up'}
-                                size={30}
-                                tintColor={theme.text}
-                            />
-                        ) : (
-                            <MaterialCommunityIcons
-                                name={isDial ? 'knob' : isSwipe ? 'gesture-swipe-up' : 'gesture-tap'}
-                                size={30}
-                                color={theme.text}
-                            />
-                        )}
+                {Platform.OS === 'android' ? (
+                    <View style={styles.androidOverflowButton}>
+                        <MaterialCommunityIcons name="dots-vertical" size={28} color={theme.text} />
                         {showDialDot && (
                             <View testID="dial-notification-dot" style={{
                                 position: 'absolute',
-                                top: -2,
-                                right: -4,
+                                top: 6,
+                                right: 8,
                                 width: 8,
                                 height: 8,
                                 borderRadius: 4,
@@ -201,7 +185,34 @@ const GameOptionsButton: React.FunctionComponent = () => {
                             }} />
                         )}
                     </View>
-                </View>
+                ) : (
+                    <View style={styles.content}>
+                        <View style={styles.addendColumn}>
+                            <Text style={[styles.addendText, { color: theme.text }]}>{addendOne}</Text>
+                            <Text style={[styles.addendText, { color: theme.text }]}>{addendTwo}</Text>
+                        </View>
+                        <View>
+                            <SymbolView
+                                name={isDial ? 'dial.min' : isSwipe ? 'hand.draw' : 'hand.point.up'}
+                                size={30}
+                                tintColor={theme.text}
+                            />
+                            {showDialDot && (
+                                <View testID="dial-notification-dot" style={{
+                                    position: 'absolute',
+                                    top: -2,
+                                    right: -4,
+                                    width: 8,
+                                    height: 8,
+                                    borderRadius: 4,
+                                    backgroundColor: theme.warning,
+                                    borderWidth: 1,
+                                    borderColor: theme.backgroundSecondary,
+                                }} />
+                            )}
+                        </View>
+                    </View>
+                )}
             </View>
         </MenuView>
     );
@@ -209,7 +220,13 @@ const GameOptionsButton: React.FunctionComponent = () => {
 
 const styles = StyleSheet.create({
     button: {
-        padding: 8,
+        padding: Platform.OS === 'android' ? 0 : 8,
+    },
+    androidOverflowButton: {
+        width: 48,
+        height: 48,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
     content: {
         flexDirection: 'row',
diff --git a/src/components/Buttons/HeaderButton.tsx b/src/components/Buttons/HeaderButton.tsx
index 339747c6..b6852d60 100644
--- a/src/components/Buttons/HeaderButton.tsx
+++ b/src/components/Buttons/HeaderButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TouchableOpacity, StyleSheet } from 'react-native';
+import { Platform, Pressable, StyleSheet } from 'react-native';
 
 interface Props {
     children: React.ReactNode;
@@ -10,9 +10,18 @@ interface Props {
 
 const HeaderButton: React.FunctionComponent<Props> = (props) => {
     return (
-        <TouchableOpacity accessibilityRole='button'  {...props} style={[styles.headerButton]}>
+        <Pressable
+            accessibilityRole='button'
+            {...props}
+            android_ripple={{ borderless: true }}
+            style={({ pressed }) => [
+                styles.headerButton,
+                Platform.OS === 'android' && styles.androidHeaderButton,
+                Platform.OS === 'ios' && pressed && styles.iosPressed,
+            ]}
+        >
             {props.children}
-        </TouchableOpacity>
+        </Pressable>
     );
 };
 
@@ -22,6 +31,17 @@ const styles = StyleSheet.create({
         padding: 10,
         paddingHorizontal: 15,
     },
+    androidHeaderButton: {
+        width: 48,
+        height: 48,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 0,
+        paddingHorizontal: 0,
+    },
+    iosPressed: {
+        opacity: 0.45,
+    },
 });
 
 export default HeaderButton;
diff --git a/src/components/GameListItem.tsx b/src/components/GameListItem.tsx
index 75fee6a3..2348d698 100644
--- a/src/components/GameListItem.tsx
+++ b/src/components/GameListItem.tsx
@@ -179,12 +179,18 @@ const GameListItem: React.FunctionComponent<Props> = ({ navigation, gameId, inde
                                 {formatCreated(dateCreated)}
                             </Text>
                         </ListItem.Content>
-                        <Text style={[styles.badge, { color: theme.badgeBlue }]}>
-                            {playerIds.length} <Icon color={theme.badgeBlue} name='users' type='font-awesome-5' size={13} />
-                        </Text>
-                        <Text style={[styles.badge, { color: theme.badgeRed }]}>
-                            {roundCount} <Icon color={theme.badgeRed} name='circle-notch' type='font-awesome-5' size={13} />
-                        </Text>
+                        <View style={styles.badgeGroup}>
+                            <Text style={[styles.badge, { color: theme.badgeBlue }]}>
+                                {playerIds.length}
+                            </Text>
+                            <Icon color={theme.badgeBlue} name='users' type='font-awesome-5' size={13} />
+                        </View>
+                        <View style={styles.badgeGroup}>
+                            <Text style={[styles.badge, { color: theme.badgeRed }]}>
+                                {roundCount}
+                            </Text>
+                            <Icon color={theme.badgeRed} name='circle-notch' type='font-awesome-5' size={13} />
+                        </View>
                         <ListItem.Chevron iconStyle={{ color: theme.textTertiary }} />
                     </View>
                 </ListItem>
@@ -221,6 +227,11 @@ const styles = StyleSheet.create({
     badge: {
         fontSize: 15,
     },
+    badgeGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
 });
 
 export default memo(GameListItem);
diff --git a/src/components/ScoreLogTable.tsx b/src/components/ScoreLogTable.tsx
index 4f8c3d0a..68b90476 100644
--- a/src/components/ScoreLogTable.tsx
+++ b/src/components/ScoreLogTable.tsx
@@ -90,6 +90,7 @@ const ScoreLogTable: React.FunctionComponent<Props> = ({ showScores = true }) =>
                 <ScrollView horizontal={true}
                     nestedScrollEnabled={true}
                     contentContainerStyle={{ flexDirection: 'row' }}
+                    overScrollMode="always"
                     ref={scoreLogScrollViewEl}>
                     {roundsIterator.map((item, round) => (
                         <View key={round} onLayout={e => onLayoutHandler(e, round)}>
diff --git a/src/components/Sheets/ChooseWinnersSheet.tsx b/src/components/Sheets/ChooseWinnersSheet.tsx
index bed93a30..e8dec31b 100644
--- a/src/components/Sheets/ChooseWinnersSheet.tsx
+++ b/src/components/Sheets/ChooseWinnersSheet.tsx
@@ -171,7 +171,7 @@ const ChooseWinnersSheet: React.FunctionComponent = () => {
                 />
             </View>
 
-            <BottomSheetScrollView contentContainerStyle={styles.scrollContent}>
+            <BottomSheetScrollView contentContainerStyle={styles.scrollContent} overScrollMode="always">
                 <SafeAreaView edges={['right', 'left']}>
                     <Text style={[styles.subtitle, { color: theme.textTertiary }]}>
                         Select winners (optional) to end the game.
diff --git a/src/components/Sheets/GameSheet.tsx b/src/components/Sheets/GameSheet.tsx
index 216bd431..1a646434 100644
--- a/src/components/Sheets/GameSheet.tsx
+++ b/src/components/Sheets/GameSheet.tsx
@@ -247,7 +247,7 @@ const GameSheet: React.FunctionComponent = () => {
             accessible={false}
             accessibilityViewIsModal={false}
         >
-            <BottomSheetScrollView>
+            <BottomSheetScrollView overScrollMode="always">
                 <SafeAreaView edges={['right', 'left']}>
                     <View style={styles.sheetHeaderContainer}>
                         <TouchableWithoutFeedback onPress={() => sheetTitlePress()}>
diff --git a/src/components/Sheets/GestureInfoSheet.tsx b/src/components/Sheets/GestureInfoSheet.tsx
index 5e9c53f6..2618beca 100644
--- a/src/components/Sheets/GestureInfoSheet.tsx
+++ b/src/components/Sheets/GestureInfoSheet.tsx
@@ -35,7 +35,7 @@ const GestureInfoSheet: React.FunctionComponent = () => {
             backgroundStyle={{ backgroundColor: theme.sheetBackground }}
             handleIndicatorStyle={{ backgroundColor: theme.sheetHandle }}
         >
-            <BottomSheetScrollView style={styles.container} contentContainerStyle={styles.content}>
+            <BottomSheetScrollView contentContainerStyle={styles.content} overScrollMode="always" style={styles.container}>
                 <Text style={[styles.title, { color: theme.text }]}>Tap Gesture</Text>
                 <Text style={[styles.paragraph, { color: theme.textSecondary }]}>
                     Tap the top half of a player&apos;s tile to increase their score, or the bottom half
diff --git a/src/components/Sheets/PointValuesSheet.tsx b/src/components/Sheets/PointValuesSheet.tsx
index 88439cbb..1b05a6b7 100644
--- a/src/components/Sheets/PointValuesSheet.tsx
+++ b/src/components/Sheets/PointValuesSheet.tsx
@@ -124,7 +124,11 @@ const PointValuesSheet: React.FunctionComponent = () => {
             backdropComponent={renderBackdrop}
             backgroundStyle={{ backgroundColor: theme.sheetBackground }}
             handleIndicatorStyle={{ backgroundColor: theme.sheetHandle }}>
-            <BottomSheetScrollView style={styles.sheetContainer} contentContainerStyle={{ alignItems: 'center' }}>
+            <BottomSheetScrollView
+                contentContainerStyle={{ alignItems: 'center' }}
+                overScrollMode="always"
+                style={styles.sheetContainer}
+            >
                 <View style={{ flex: 1, width: '100%', alignItems: 'center' }}>
                     <Text style={{ color: theme.text, fontSize: 20 }}>Point Values</Text>
                     <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-around', padding: 10 }}>
diff --git a/src/screens/AppSettingsScreen.tsx b/src/screens/AppSettingsScreen.tsx
index 1e6e1264..604f39be 100644
--- a/src/screens/AppSettingsScreen.tsx
+++ b/src/screens/AppSettingsScreen.tsx
@@ -163,7 +163,11 @@ const AppSettingsScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     };
 
     return (
-        <ScrollView style={{ backgroundColor: theme.background, flex: 1 }} contentContainerStyle={{ paddingBottom: 50 }}>
+        <ScrollView
+            contentContainerStyle={{ paddingBottom: 50 }}
+            overScrollMode="always"
+            style={{ backgroundColor: theme.background, flex: 1 }}
+        >
             <View style={[styles.iconWrapper, { alignItems: 'center' }]}>
                 <RotatingIcon />
                 <Text testID="scorepad-title" style={{ color: theme.textTertiary }} onPress={alertWithVersion}>
diff --git a/src/screens/ListScreen.tsx b/src/screens/ListScreen.tsx
index 45e65a48..66fe602a 100644
--- a/src/screens/ListScreen.tsx
+++ b/src/screens/ListScreen.tsx
@@ -101,6 +101,7 @@ const ListScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                         <Text style={{ textAlign: 'center', padding: 10, color: theme.textSecondary }}>Tap the + button to create a new game.</Text>
                     </>
                 }
+                overScrollMode="always"
                 style={[styles.list, { backgroundColor: theme.backgroundSecondary }]}
                 data={gameIds}
                 renderItem={({ item, index }) =>

From 835cb67ce5e7d6a3cfcf0042a24b9369037e4836 Mon Sep 17 00:00:00 2001
From: Justin Wyne <1986068+wyne@users.noreply.github.com>
Date: Wed, 9 Sep 2026 21:30:13 -0400
Subject: [PATCH 2/3] fix: enable edit player list overscroll

---
 src/screens/EditGameScreen.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/screens/EditGameScreen.tsx b/src/screens/EditGameScreen.tsx
index 605ed850..ea49023e 100644
--- a/src/screens/EditGameScreen.tsx
+++ b/src/screens/EditGameScreen.tsx
@@ -119,6 +119,7 @@ const EditGameScreen: React.FunctionComponent<Props> = ({ navigation, route }) =
                 containerStyle={{ flex: 1 }}
                 ListFooterComponent={ListFooter}
                 data={playerIds}
+                overScrollMode="always"
                 renderItem={({ item: playerId, getIndex, drag, isActive }) => (
                     <ScaleDecorator activeScale={1.05}>
                         <PlayerListItem

From 31d61a17a2b2b37a161ebbac9647f26ce2d86957 Mon Sep 17 00:00:00 2001
From: Justin Wyne <1986068+wyne@users.noreply.github.com>
Date: Wed, 9 Sep 2026 21:37:21 -0400
Subject: [PATCH 3/3] fix: cycle game sheet from handle tap

---
 src/components/Sheets/GameSheet.test.tsx | 29 ++++++++++++++++++++++++
 src/components/Sheets/GameSheet.tsx      | 20 ++++++++++++----
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/Sheets/GameSheet.test.tsx b/src/components/Sheets/GameSheet.test.tsx
index 12a4a674..a3829fff 100644
--- a/src/components/Sheets/GameSheet.test.tsx
+++ b/src/components/Sheets/GameSheet.test.tsx
@@ -29,6 +29,7 @@ jest.mock('@gorhom/bottom-sheet', () => {
         index: number;
         backdropComponent?: React.ComponentType;
         backgroundStyle?: object;
+        handleComponent?: React.ComponentType;
         handleIndicatorStyle?: object;
         animatedPosition?: object;
         enablePanDownToClose?: boolean;
@@ -42,6 +43,7 @@ jest.mock('@gorhom/bottom-sheet', () => {
         
         return (
             <View testID="bottom-sheet" style={{ backgroundColor: 'rgb(30,40,50)' }} topInset={props.topInset}>
+                {props.handleComponent ? <props.handleComponent /> : null}
                 {props.children}
             </View>
         );
@@ -63,6 +65,7 @@ jest.mock('@gorhom/bottom-sheet', () => {
     return {
         __esModule: true,
         default: MockBottomSheet,
+        BottomSheetHandle: () => <View testID="bottom-sheet-default-handle" />,
         BottomSheetScrollView: MockBottomSheetScrollView,
         BottomSheetBackdrop: MockBottomSheetBackdrop,
     };
@@ -292,6 +295,32 @@ describe('GameSheet', () => {
         expect(getByTestId('score-log-table')).toBeTruthy();
     });
 
+    it('renders a tappable sheet handle', () => {
+        const store = createMockStore({
+            settings: {
+                currentGameId: 'game-1',
+            },
+            games: {
+                entities: {
+                    'game-1': mockGame,
+                },
+                ids: ['game-1'],
+            },
+            players: {
+                entities: mockPlayers,
+                ids: ['player-1', 'player-2'],
+            },
+        });
+
+        const { getByTestId } = render(
+            <Provider store={store}>
+                <GameSheet {...defaultProps} />
+            </Provider>
+        );
+
+        expect(getByTestId('game-sheet-handle')).toBeTruthy();
+    });
+
     it('should allow full expansion up to the top safe area', () => {
         const store = createMockStore({
             settings: {
diff --git a/src/components/Sheets/GameSheet.tsx b/src/components/Sheets/GameSheet.tsx
index 1a646434..71cc1690 100644
--- a/src/components/Sheets/GameSheet.tsx
+++ b/src/components/Sheets/GameSheet.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import BottomSheet, { BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetHandle, BottomSheetHandleProps, BottomSheetScrollView } from '@gorhom/bottom-sheet';
 import { ParamListBase, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { Alert, StyleSheet, Text, TouchableWithoutFeedback, View, useWindowDimensions } from 'react-native';
+import { Alert, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View, useWindowDimensions } from 'react-native';
 import { Button } from 'react-native-elements';
 import Animated, { Extrapolate, FadeIn, interpolate, Layout, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -180,13 +180,13 @@ const GameSheet: React.FunctionComponent = () => {
     /**
      * Function to snap to the next point when the handle is pressed
      */
-    const sheetTitlePress = () => {
+    const sheetTitlePress = useCallback(() => {
         setSnapPointIndex((prevIndex) => {
             const nextIndex = (prevIndex + 1) % snapPoints.length;
             gameSheetRef?.current?.snapToIndex(nextIndex);
             return nextIndex;
         });
-    };
+    }, [gameSheetRef, snapPoints.length]);
 
     /**
      * Animated position of the bottom sheet
@@ -228,6 +228,17 @@ const GameSheet: React.FunctionComponent = () => {
         []
     );
 
+    const renderHandle = useCallback(
+        (props: BottomSheetHandleProps) => (
+            <TouchableOpacity activeOpacity={0.7} onPress={sheetTitlePress} testID="game-sheet-handle">
+                <View>
+                    <BottomSheetHandle {...props} indicatorStyle={{ backgroundColor: theme.sheetHandle }} />
+                </View>
+            </TouchableOpacity>
+        ),
+        [sheetTitlePress, theme.sheetHandle]
+    );
+
     if (currentGameId == undefined) return null;
 
     return (
@@ -239,6 +250,7 @@ const GameSheet: React.FunctionComponent = () => {
             snapPoints={snapPoints}
             backdropComponent={renderBackdrop}
             backgroundStyle={{ backgroundColor: theme.sheetBackground }}
+            handleComponent={renderHandle}
             handleIndicatorStyle={{ backgroundColor: theme.sheetHandle }}
             animatedPosition={animatedPosition}
             enablePanDownToClose={false}