Merge pull request #606 from thornbill/fix-safe-area

Fix safe area insets in fullscreen mode
jellyfin · Jan 21, 2025 · c5786fa · c5786fa
2 parents 22c9ce4 + 63baec5
commit c5786fa
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 25 deletions.
diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
@@ -11,7 +11,7 @@ import React, { useCallback, useContext, useEffect, useRef, useState } from 'rea
 import { useTranslation } from 'react-i18next';
 import { BackHandler, Platform, StyleSheet, View } from 'react-native';
 import { ThemeContext } from 'react-native-elements';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import AudioPlayer from '../components/AudioPlayer';
 import ErrorView from '../components/ErrorView';
@@ -122,11 +122,18 @@ const HomeScreen = observer(() => {
 		}
 	}, [ httpErrorStatus ]);
 
-	// When not in fullscreen, the top adjustment is handled by the spacer View for iOS
-	const safeAreaEdges = [ 'right', 'left' ];
-	if (Platform.OS !== 'ios' || rootStore.isFullscreen) {
-		safeAreaEdges.push('top');
+	// NOTE: We use a standard View and insets to workaround https://github.com/AppAndFlow/react-native-safe-area-context/issues/204
+	const safeAreaPadding = {};
+	if (!rootStore.isFullscreen) {
+		safeAreaPadding.paddingLeft = insets.left;
+		safeAreaPadding.paddingRight = insets.right;
+
+		// When not in fullscreen, the top adjustment is handled by the spacer View for iOS
+		if (Platform.OS !== 'ios') {
+			safeAreaPadding.paddingTop = insets.top;
+		}
 	}
+
 	// Hide webview until loaded
 	const webviewStyle = (isLoading || httpErrorStatus) ? StyleSheet.compose(styles.container, styles.loading) : styles.container;
 
@@ -136,12 +143,12 @@ const HomeScreen = observer(() => {
 	const server = rootStore.serverStore.servers[rootStore.settingStore.activeServer];
 
 	return (
-		<SafeAreaView
+		<View
 			style={{
 				...styles.container,
-				backgroundColor: rootStore.isFullscreen ? Colors.black : theme.colors.background
+				...safeAreaPadding,
+				backgroundColor: rootStore.isFullscreen ? Colors.blue : theme.colors.background
 			}}
-			edges={safeAreaEdges}
 		>
 			{Platform.OS === 'ios' && !rootStore.isFullscreen && (
 				<View style={{
@@ -217,7 +224,7 @@ const HomeScreen = observer(() => {
 					message={t('home.errors.invalidServer.description')}
 				/>
 			)}
-		</SafeAreaView>
+		</View>
 	);
 });
 

diff --git a/screens/__tests__/__snapshots__/HomeScreen.test.js.snap b/screens/__tests__/__snapshots__/HomeScreen.test.js.snap
@@ -1,17 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HomeScreen should render ErrorView when invalid server exists 1`] = `
-<RNCSafeAreaView
-  edges={
-    Array [
-      "right",
-      "left",
-    ]
-  }
+<View
   style={
     Object {
       "backgroundColor": undefined,
       "flex": 1,
+      "paddingLeft": 0,
+      "paddingRight": 0,
     }
   }
 >
@@ -101,21 +97,17 @@ exports[`HomeScreen should render ErrorView when invalid server exists 1`] = `
       testID="error-view-details"
     />
   </View>
-</RNCSafeAreaView>
+</View>
 `;
 
 exports[`HomeScreen should render correctly 1`] = `
-<RNCSafeAreaView
-  edges={
-    Array [
-      "right",
-      "left",
-    ]
-  }
+<View
   style={
     Object {
       "backgroundColor": undefined,
       "flex": 1,
+      "paddingLeft": 0,
+      "paddingRight": 0,
     }
   }
 >
@@ -221,7 +213,7 @@ exports[`HomeScreen should render correctly 1`] = `
       }
     />
   </View>
-</RNCSafeAreaView>
+</View>
 `;
 
 exports[`HomeScreen should render null when no servers are present 1`] = `null`;