@shoutem/ui 9.0.6 → 9.1.0

package/components/Screen.js

@@ -1,8 +1,17 @@
+import React from 'react';
 import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 
-const AnimatedScreen = connectAnimation(View);
+const SafeAreaAwareView = ({ style, ...rest }) => {
+  const insets = useSafeAreaInsets();
+  const safeAreaStyle = { paddingBottom: insets.bottom };
+
+  return <View {...rest} style={[style, safeAreaStyle]} />;
+};
+
+const AnimatedScreen = connectAnimation(SafeAreaAwareView);
 const Screen = connectStyle('shoutem.ui.Screen')(AnimatedScreen);
 
 export { Screen };

package/helpers/device-selector.js

@@ -26,10 +26,12 @@ export const NAVIGATION_BAR_HEIGHT = Platform.select({
   default: NAVIGATION_HEADER_HEIGHT,
 });
 
+// Bottom inset from the native safe-area module (home indicator on iOS,
+// system nav bar on Android with edge-to-edge). Falls back to 34pt on iOS
+// (race condition guard) or 0 on Android (no inset when edge-to-edge is off).
 export const HOME_INDICATOR_PADDING =
-  Platform.OS === 'ios'
-    ? initialWindowMetrics?.insets?.bottom ?? DEFAULT_IOS_BOTTOM_INSET
-    : 0;
+  initialWindowMetrics?.insets?.bottom ??
+  (Platform.OS === 'ios' ? DEFAULT_IOS_BOTTOM_INSET : 0);
 
 export const NOTCH_AREA_HEIGHT = Platform.select({
   ios: initialWindowMetrics?.insets?.top ?? DEFAULT_IOS_TOP_INSET,
@@ -65,7 +67,12 @@ const getBottomInset = () => {
     // eslint-disable-next-line global-require
     const metrics = require('react-native-safe-area-context')
       .initialWindowMetrics;
-    _bottomInset = metrics?.insets?.bottom ?? DEFAULT_IOS_BOTTOM_INSET;
+
+    // Use actual bottom inset if available. Fallback: 34pt on iOS (safe
+    // default for all notched iPhones), 0 on Android (no inset pre-RN 0.77).
+    _bottomInset =
+      metrics?.insets?.bottom ??
+      (Platform.OS === 'ios' ? DEFAULT_IOS_BOTTOM_INSET : 0);
   }
 
   return _bottomInset;
@@ -80,8 +87,10 @@ export const getNavigationBarHeight = () =>
     default: NAVIGATION_HEADER_HEIGHT,
   });
 
-export const getHomeIndicatorPadding = () =>
-  Platform.OS === 'ios' ? getBottomInset() : 0;
+// Returns bottom safe area inset on both platforms. On iOS this is the home
+// indicator area (34pt). On Android this is the system navigation bar height
+// when edge-to-edge is enabled (RN 0.76+), or 0 on older RN versions.
+export const getHomeIndicatorPadding = () => getBottomInset();
 
 export const getNotchAreaHeight = () =>
   Platform.select({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "9.0.6",
+  "version": "9.1.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",

package/theme.js

@@ -977,12 +977,6 @@ export default () => {
         paddingBottom: HOME_INDICATOR_PADDING,
       },
 
-      'shoutem.ui.ListView': {
-        listContent: {
-          paddingBottom: HOME_INDICATOR_PADDING,
-        },
-      },
-
       backgroundColor: resolveVariable('backgroundColor'),
       flex: 1,
     },