SafeAreaView for landscape game

wyne · Nov 14, 2023 · bca748e · bca748e
1 parent 2d49c24
commit bca748e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/src/components/PlayerTiles/AdditionTile/Helpers.ts b/src/components/PlayerTiles/AdditionTile/Helpers.ts
@@ -36,9 +36,13 @@ export const scoreMathOpacity = 0.75;
  * @returns The calculated font size.
  */
 export const calculateFontSize = (containerWidth: number) => {
+    return baseScoreFontSize * widthFactor(containerWidth);
+};
+
+export const widthFactor = (containerWidth: number) => {
     let widthFactor: number = containerWidth / 200;
     if (Number.isNaN(widthFactor)) { widthFactor = 1; }
-    return baseScoreFontSize * widthFactor;
+    return widthFactor;
 };
 
 /**

diff --git a/src/components/Rounds.tsx b/src/components/Rounds.tsx
@@ -55,24 +55,22 @@ const Rounds: React.FunctionComponent<Props> = ({ navigation, show }) => {
     const roundsIterator = [...Array(roundTotal + 1).keys()];
 
     return (
-        <SafeAreaView edges={['right', 'left']}
-            style={[styles.scoreTableContainer, { height: show ? 'auto' : 0, }]}>
+        <View style={[styles.scoreTableContainer]}>
             <PlayerNameColumn navigation={navigation} />
             <TotalScoreColumn />
             <ScrollView horizontal={true}
                 contentContainerStyle={{ flexDirection: 'row' }}
-                ref={roundsScrollViewEl} >
+                ref={roundsScrollViewEl}>
                 {roundsIterator.map((item, round) => (
-                    <View key={round}
-                        onLayout={e => onLayoutHandler(e, round)}>
+                    <View key={round} onLayout={e => onLayoutHandler(e, round)}>
                         <RoundScoreColumn
                             round={round}
                             key={round}
                             isCurrentRound={round == roundCurrent} />
                     </View>
                 ))}
             </ScrollView>
-        </SafeAreaView>
+        </View>
     );
 };
 

diff --git a/src/screens/GameScreen.tsx b/src/screens/GameScreen.tsx
@@ -98,7 +98,7 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     const bottomSheetRef = useRef<BottomSheet>(null);
 
     // variables
-    const snapPoints = useMemo(() => [75, '60%', '100%'], []);
+    const snapPoints = useMemo(() => [73, '60%', '100%'], []);
 
     // callbacks
     const handleSheetChanges = useCallback((index: number) => {
@@ -110,9 +110,9 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     }, []);
 
     return (
-        <SafeAreaView style={{ flex: 1 }}>
+        <View style={{ flex: 1 }}>
             <View style={[StyleSheet.absoluteFillObject]}>
-                <View style={styles.contentStyle} onLayout={layoutHandler} >
+                <SafeAreaView edges={['left', 'right']} style={styles.contentStyle} onLayout={layoutHandler} >
                     {playerIds.map((id, index) => (
                         width != null && height != null && rows != 0 && cols != 0 &&
                         <PlayerTile
@@ -127,7 +127,7 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                             index={index}
                         />
                     ))}
-                </View>
+                </SafeAreaView>
 
                 <BottomSheet
                     ref={bottomSheetRef}
@@ -138,7 +138,8 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                     handleIndicatorStyle={{ backgroundColor: 'white' }}
                 >
                     <BottomSheetScrollView>
-                        <View style={styles.contentContainer}>
+                        <SafeAreaView edges={['right', 'left']}>
+
                             <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                 <Text style={{ color: 'white', fontSize: 20, padding: 20, paddingTop: 0, fontWeight: 'bold' }} onPress={() => handleSnapPress(1)}>
                                     {currentGame.title}
@@ -148,14 +149,14 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                                 </Text>
                             </View>
                             <Rounds navigation={navigation} show={!fullscreen} />
-                            <Text style={{ color: 'white', paddingHorizontal: 10 }}>
+                            <Text style={{ color: 'white', padding: 10 }}>
                                 Tap on a column to set the current round.
                             </Text>
-                        </View>
+                        </SafeAreaView>
                     </BottomSheetScrollView>
                 </BottomSheet>
             </View>
-        </SafeAreaView >
+        </View>
     );
 };
 

diff --git a/src/screens/ShareScreen.tsx b/src/screens/ShareScreen.tsx
@@ -75,6 +75,7 @@ const ShareScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                     borderStyle: 'solid',
                 }}>
                     <ScrollView horizontal={true}
+                        showsHorizontalScrollIndicator={false}
                         contentContainerStyle={{
                             backgroundColor: 'black',
                             flexDirection: 'column',