SafeAreaSpacerView - fix race condition and a small refactor

lib/components/SafeArea/SafeAreaInsetsManager.ts

@@ -1,7 +1,7 @@
 /* eslint no-underscore-dangle: 0 */
 
 import _ from 'lodash';
-import {NativeModules, DeviceEventEmitter, Platform} from 'react-native';
+import {NativeModules, DeviceEventEmitter} from 'react-native';
 
 type SafeAreaInsetsType = { top: number; left: number; bottom: number; right: number; } | null;
 
@@ -42,10 +42,6 @@ class SafeAreaInsetsManager {
   }
 
   setupEventListener() {
-    if (Platform.OS !== 'ios') {
-      return;
-    }
-
     try {
       // Use DeviceEventEmitter instead of NativeEventEmitter to avoid getConstants      
       DeviceEventEmitter.addListener('SafeAreaInsetsDidChangeEvent', (data) => {

lib/components/SafeArea/SafeAreaSpacerView.tsx

@@ -1,13 +1,14 @@
-import React, {useState, useCallback, useEffect} from 'react';
-import {View, ViewStyle, Dimensions} from 'react-native';
+import React, {useState, useCallback, useEffect, useMemo} from 'react';
+import {View, ViewStyle, Dimensions, StyleProp} from 'react-native';
 import SafeAreaInsetsManager from './SafeAreaInsetsManager';
 
 export type SafeAreaSpacerViewProps = {
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
 };
 
 const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => {  
   const [safeAreaInsets, setSafeAreaInsets] = useState({top: 0, left: 0, bottom: 0, right: 0});
+  const [componentHeight, setComponentHeight] = useState(0);
   const [spacerHeight, setSpacerHeight] = useState(0);
 
   useEffect(() => {    
@@ -43,25 +44,26 @@ const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => {
   // Position detection with useCallback
   const handleLayout = useCallback((event: any) => {    
     const {y} = event.nativeEvent.layout;
+    setComponentHeight(y);
+  }, []);
+
+  useEffect(() => {
     const screenHeight = Dimensions.get('window').height;
 
     let height = 0;
     // Check if positioned within safe area bounds
-    if (y < safeAreaInsets.top) {
+    if (componentHeight < safeAreaInsets.top) {
       height = safeAreaInsets.top;
-    } else if (y > screenHeight - safeAreaInsets.bottom) {
+    } else if (componentHeight > screenHeight - safeAreaInsets.bottom) {
       height = safeAreaInsets.bottom;
     }
 
     if (height !== spacerHeight) {
       setSpacerHeight(height);
     }
-  }, [safeAreaInsets, spacerHeight]);
+  }, [componentHeight, safeAreaInsets, spacerHeight]);
 
-  const spacerStyle = {
-    height: spacerHeight,
-    ...style
-  };
+  const spacerStyle = useMemo(() => [{height: spacerHeight}, style], [spacerHeight, style]);
 
   return <View style={spacerStyle} onLayout={handleLayout}/>;
 };

lib/components/SafeArea/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {View, ViewStyle, StyleProp, Platform} from 'react-native';
+import SafeAreaSpacerViewIos from './SafeAreaSpacerView';
+
+const isIOS = Platform.OS === 'ios';
+
+export type SafeAreaSpacerViewProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+const SafeAreaSpacerView = ({style}: SafeAreaSpacerViewProps) => {
+  return isIOS ? <SafeAreaSpacerViewIos style={style}/> : <View style={style}/>;
+};
+
+SafeAreaSpacerView.displayName = 'SafeAreaSpacerView';
+export default SafeAreaSpacerView;

lib/components/index.ts

@@ -1,6 +1,6 @@
 import DynamicFonts, {FontExtension} from './DynamicFonts';
 import HighlighterOverlayView from './HighlighterOverlayView';
-import SafeAreaSpacerView from './SafeArea/SafeAreaSpacerView';
+import SafeAreaSpacerView from './SafeArea';
 import SafeAreaInsetsManager from './SafeArea/SafeAreaInsetsManager';
 import Keyboard, {KeyboardTrackingViewProps, KeyboardAccessoryViewProps} from './Keyboard';
 

package.json

@@ -56,7 +56,7 @@
     "react-native-redash": "^12.0.3",
     "semver": "^5.5.0",
     "tinycolor2": "^1.4.2",
-    "uilib-native": "5.0.0-snapshot.7212",
+    "uilib-native": "5.0.0-snapshot.7216",
     "url-parse": "^1.2.0",
     "wix-react-native-text-size": "1.0.9"
   },

yarn.lock

@@ -10928,7 +10928,7 @@ __metadata:
     shell-utils: ^1.0.10
     tinycolor2: ^1.4.2
     typescript: 5.0.4
-    uilib-native: 5.0.0-snapshot.7212
+    uilib-native: 5.0.0-snapshot.7216
     url-parse: ^1.2.0
     wix-react-native-text-size: 1.0.9
   peerDependencies:
@@ -12560,16 +12560,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uilib-native@npm:5.0.0-snapshot.7212":
-  version: 5.0.0-snapshot.7212
-  resolution: "uilib-native@npm:5.0.0-snapshot.7212"
+"uilib-native@npm:5.0.0-snapshot.7216":
+  version: 5.0.0-snapshot.7216
+  resolution: "uilib-native@npm:5.0.0-snapshot.7216"
   dependencies:
     lodash: ^4.17.21
     prop-types: ^15.5.10
   peerDependencies:
     react: ">=17.0.1"
     react-native: ">=0.64.1"
-  checksum: f293839cebb6b8dca255de9b02dcf27f36892aa8d2c97ae1445c4e8506d43db03cd95758ae7685f642fce051bff016667a91632083d48ac6581dc101691f3365
+  checksum: 3ca207bae3865fc4275393135f5cd4a46c52678100d4308fe1008d0167d8d5ae8bd1cab558b364d7ad60e5c96cb38497cd10b0109e15376c623ef9849cfb3a32
   languageName: node
   linkType: hard