react-native-ui-lib 7.44.0-snapshot.7228 → 7.44.0-snapshot.7233

package/lib/components/SafeArea/SafeAreaInsetsManager.d.ts

@@ -1,13 +1,16 @@
-type SafeAreaInsetsType = {
+export type SafeAreaInsetsType = {
     top: number;
     left: number;
     bottom: number;
     right: number;
 } | null;
+export type SafeAreaChangedDelegateType = {
+    onSafeAreaInsetsDidChangeEvent?: (insets: SafeAreaInsetsType) => void;
+};
 declare class SafeAreaInsetsManager {
     _defaultInsets: SafeAreaInsetsType;
     _safeAreaInsets: SafeAreaInsetsType;
-    _safeAreaChangedDelegates: Array<any>;
+    _safeAreaChangedDelegates: Array<SafeAreaChangedDelegateType>;
     _nativeModule: any;
     constructor();
     setupNativeConnection(): void;
@@ -16,8 +19,8 @@ declare class SafeAreaInsetsManager {
     notifyDelegates(insets: SafeAreaInsetsType): void;
     _updateInsets(): Promise<void>;
     getSafeAreaInsets(): Promise<SafeAreaInsetsType>;
-    addSafeAreaChangedDelegate(delegate: any): void;
-    removeSafeAreaChangedDelegate(delegateToRemove: any): void;
+    addSafeAreaChangedDelegate(delegate: SafeAreaChangedDelegateType): void;
+    removeSafeAreaChangedDelegate(delegateToRemove: SafeAreaChangedDelegateType): void;
     get defaultInsets(): SafeAreaInsetsType;
     refreshSafeAreaInsets(): Promise<void>;
 }

package/lib/components/SafeArea/SafeAreaInsetsManager.js

@@ -11,12 +11,7 @@ class SafeAreaInsetsManager {
     bottom: 34,
     right: 0
   }; // Common iPhone safe area values
-  _safeAreaInsets = {
-    top: 47,
-    left: 0,
-    bottom: 34,
-    right: 0
-  };
+
   _safeAreaChangedDelegates = [];
   _nativeModule = null;
   constructor() {
@@ -46,7 +41,7 @@ class SafeAreaInsetsManager {
   }
   setupEventListener() {
     try {
-      // Use DeviceEventEmitter instead of NativeEventEmitter to avoid getConstants      
+      // Use DeviceEventEmitter instead of NativeEventEmitter to avoid getConstants
       DeviceEventEmitter.addListener('SafeAreaInsetsDidChangeEvent', data => {
         if (data) {
           SafeAreaInsetsCache = data;
@@ -83,8 +78,13 @@ class SafeAreaInsetsManager {
   async _updateInsets() {
     if (this._nativeModule && SafeAreaInsetsCache === null) {
       try {
-        SafeAreaInsetsCache = await this._nativeModule.getSafeAreaInsets();
-        this._safeAreaInsets = SafeAreaInsetsCache;
+        const insets = await this._nativeModule.getSafeAreaInsets();
+        if (insets) {
+          SafeAreaInsetsCache = insets;
+          this._safeAreaInsets = SafeAreaInsetsCache;
+        } else {
+          this._safeAreaInsets = this._defaultInsets;
+        }
       } catch (error) {
         console.warn('SafeAreaInsetsManager: Failed to get native insets:', error);
         this._safeAreaInsets = this._defaultInsets;

package/lib/components/SafeArea/__tests__/SafeAreaInsetsManager.spec.js

@@ -0,0 +1,271 @@
+import {NativeModules, DeviceEventEmitter} from 'react-native';
+
+describe('SafeAreaInsetsManager', () => {
+  beforeEach(() => {
+    // Reset mocks
+    jest.clearAllMocks();
+
+    // Reset the SafeAreaInsetsCache by creating a fresh instance
+    jest.resetModules();
+
+    // Spy on console methods to verify logging
+    jest.spyOn(console, 'log').mockImplementation(() => {});
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    // Restore console methods
+    jest.restoreAllMocks();
+  });
+
+  describe('getSafeAreaInsets', () => {
+    it('should return default insets when native module is not available', async () => {
+      // Arrange
+      NativeModules.SafeAreaManager = null;
+      const SafeAreaInsetsManager = require('../SafeAreaInsetsManager').default;
+
+      // Act
+      const result = await SafeAreaInsetsManager.getSafeAreaInsets();
+
+      // Assert
+      expect(result).toEqual({top: 47, left: 0, bottom: 34, right: 0});
+      expect(console.log).toHaveBeenCalledWith('SafeAreaInsetsManager: Native SafeAreaManager not available, using defaults');
+    });
+
+    it('should return insets from native module when available', async () => {
+      // Arrange
+      const mockInsets = {top: 50, left: 10, bottom: 30, right: 10};
+      NativeModules.SafeAreaManager = {
+        getSafeAreaInsets: jest.fn().mockResolvedValue(mockInsets)
+      };
+
+      const SafeAreaInsetsManager = require('../SafeAreaInsetsManager').default;
+
+      // Act
+      const result = await SafeAreaInsetsManager.getSafeAreaInsets();
+
+      // Assert
+      expect(result).toEqual(mockInsets);
+      expect(NativeModules.SafeAreaManager.getSafeAreaInsets).toHaveBeenCalled();
+    });
+
+    it.skip('should return cached insets on subsequent calls', async () => {
+      // Arrange
+      const mockInsets = {top: 44, left: 0, bottom: 34, right: 0};
+      NativeModules.SafeAreaManager = {
+        getSafeAreaInsets: jest.fn().mockResolvedValue(mockInsets)
+      };
+
+      const SafeAreaInsetsManager = require('../SafeAreaInsetsManager').default;
+
+      // Act
+      const result1 = await SafeAreaInsetsManager.getSafeAreaInsets();
+      const result2 = await SafeAreaInsetsManager.getSafeAreaInsets();
+
+      // Assert
+      expect(result1).toEqual(mockInsets);
+      expect(result2).toEqual(mockInsets);
+      expect(NativeModules.SafeAreaManager.getSafeAreaInsets).toHaveBeenCalledTimes(1); // Should only call native once due to caching
+    });
+
+    it('should handle native module errors gracefully', async () => {
+      // Arrange
+      const mockError = new Error('Native module error');
+      NativeModules.SafeAreaManager = {
+        getSafeAreaInsets: jest.fn().mockRejectedValue(mockError)
+      };
+
+      const SafeAreaInsetsManager = require('../SafeAreaInsetsManager').default;
+
+      // Act
+      const result = await SafeAreaInsetsManager.getSafeAreaInsets();
+
+      // Assert
+      expect(result).toEqual({top: 47, left: 0, bottom: 34, right: 0}); // Should fallback to defaults
+      expect(console.warn).toHaveBeenCalledWith('SafeAreaInsetsManager: Failed to get initial insets:', mockError);
+      expect(console.warn).toHaveBeenCalledWith('SafeAreaInsetsManager: Failed to get native insets:', mockError);
+    });
+
+    it('should handle native module setup errors gracefully', async () => {
+      // Arrange
+      Object.defineProperty(NativeModules, 'SafeAreaManager', {
+        get: () => {
+          throw new Error('Setup error');
+        }
+      });
+
+      const SafeAreaInsetsManager = require('../SafeAreaInsetsManager').default;
+
+      // Act
+      const result = await SafeAreaInsetsManager.getSafeAreaInsets();
+
+      // Assert
+      expect(result).toEqual({top: 47, left: 0, bottom: 34, right: 0}); // Should fallback to defaults
+      expect(console.warn).toHaveBeenCalledWith('SafeAreaInsetsManager: Failed to connect to native module:', expect.any(Error));
+    });
+
+    it('should update insets when they change during the test', async () => {
+      // Arrange
+      const initialInsets = {top: 44, left: 0, bottom: 34, right: 0};
+      const updatedInsets = {top: 50, left: 0, bottom: 40, right: 0};
+
+      NativeModules.SafeAreaManager = {
+        // TODO: this will need to be changed when the we get caching to work in tests ("should return cached insets on subsequent calls")
+        // getSafeAreaInsets: jest.fn().mockResolvedValueOnce(initialInsets).mockResolvedValueOnce(updatedInsets)
+        getSafeAreaInsets: jest
+          .fn()
+          .mockResolvedValueOnce(initialInsets)
+          .mockResolvedValueOnce(initialInsets)
+          .mockResolvedValueOnce(updatedInsets)
+      };
+
+      const SafeAreaInsetsManager = require('../SafeAreaInsetsManager').default;
+
+      // Act & Assert - Initial insets
+      const result1 = await SafeAreaInsetsManager.getSafeAreaInsets();
+      expect(result1).toEqual(initialInsets);
+
+      // Force refresh of insets
+      await SafeAreaInsetsManager.refreshSafeAreaInsets();
+
+      // Simulate insets change event from native side
+      DeviceEventEmitter.emit('SafeAreaInsetsDidChangeEvent', updatedInsets);
+
+      // Get insets again - should reflect the change
+      const result2 = await SafeAreaInsetsManager.getSafeAreaInsets();
+      expect(result2).toEqual(updatedInsets);
+    });
+
+    it('should notify delegates when insets change during the test', async () => {
+      // Arrange
+      const initialInsets = {top: 44, left: 0, bottom: 34, right: 0};
+      const updatedInsets = {top: 50, left: 0, bottom: 40, right: 0};
+
+      NativeModules.SafeAreaManager = {
+        getSafeAreaInsets: jest.fn().mockResolvedValue(initialInsets)
+      };
+
+      const SafeAreaInsetsManager = require('../SafeAreaInsetsManager').default;
+
+      // Add a mock delegate
+      const mockDelegate = {
+        onSafeAreaInsetsDidChangeEvent: jest.fn()
+      };
+      SafeAreaInsetsManager.addSafeAreaChangedDelegate(mockDelegate);
+
+      // Act - Get initial insets
+      await SafeAreaInsetsManager.getSafeAreaInsets();
+
+      // Simulate insets change event from native side
+      DeviceEventEmitter.emit('SafeAreaInsetsDidChangeEvent', updatedInsets);
+
+      // Assert - Delegate should be notified
+      expect(mockDelegate.onSafeAreaInsetsDidChangeEvent).toHaveBeenCalledWith(updatedInsets);
+    });
+
+    it('should handle refreshSafeAreaInsets correctly', async () => {
+      // Arrange
+      const initialInsets = {top: 44, left: 0, bottom: 34, right: 0};
+      const refreshedInsets = {top: 48, left: 0, bottom: 36, right: 0};
+
+      NativeModules.SafeAreaManager = {
+        // TODO: this will need to be changed when the we get caching to work in tests ("should return cached insets on subsequent calls")
+        // getSafeAreaInsets: jest.fn().mockResolvedValueOnce(initialInsets).mockResolvedValueOnce(updatedInsets)
+        getSafeAreaInsets: jest
+          .fn()
+          .mockResolvedValueOnce(initialInsets)
+          .mockResolvedValueOnce(initialInsets)
+          .mockResolvedValueOnce(refreshedInsets)
+      };
+
+      const SafeAreaInsetsManager = require('../SafeAreaInsetsManager').default;
+
+      // Act
+      const result1 = await SafeAreaInsetsManager.getSafeAreaInsets();
+      expect(result1).toEqual(initialInsets);
+
+      // Refresh insets
+      await SafeAreaInsetsManager.refreshSafeAreaInsets();
+
+      const result2 = await SafeAreaInsetsManager.getSafeAreaInsets();
+
+      // Assert
+      expect(result2).toEqual(refreshedInsets);
+      // TODO: this will need to be changed when the we get caching to work in tests ("should return cached insets on subsequent calls")
+      expect(NativeModules.SafeAreaManager.getSafeAreaInsets).toHaveBeenCalledTimes(3);
+    });
+
+    it('should not notify delegates when insets remain the same after refresh', async () => {
+      // Arrange
+      const sameInsets = {top: 44, left: 0, bottom: 34, right: 0};
+
+      NativeModules.SafeAreaManager = {
+        getSafeAreaInsets: jest.fn().mockResolvedValue(sameInsets)
+      };
+
+      const SafeAreaInsetsManager = require('../SafeAreaInsetsManager').default;
+
+      // Add a mock delegate
+      const mockDelegate = {
+        onSafeAreaInsetsDidChangeEvent: jest.fn()
+      };
+      SafeAreaInsetsManager.addSafeAreaChangedDelegate(mockDelegate);
+
+      // Act
+      await SafeAreaInsetsManager.getSafeAreaInsets();
+      await SafeAreaInsetsManager.refreshSafeAreaInsets();
+
+      // TODO: this will need to be changed when the we get caching to work in tests ("should return cached insets on subsequent calls")
+      expect(NativeModules.SafeAreaManager.getSafeAreaInsets).toHaveBeenCalledTimes(3);
+
+      // Assert - Delegate should not be notified since insets didn't change
+      expect(mockDelegate.onSafeAreaInsetsDidChangeEvent).not.toHaveBeenCalled();
+    });
+
+    it('should return default insets when native getSafeAreaInsets returns null', async () => {
+      // Arrange
+      NativeModules.SafeAreaManager = {
+        getSafeAreaInsets: jest.fn().mockResolvedValue(null)
+      };
+
+      const SafeAreaInsetsManager = require('../SafeAreaInsetsManager').default;
+
+      // Act
+      const result = await SafeAreaInsetsManager.getSafeAreaInsets();
+
+      // Assert
+      expect(result).toEqual({top: 47, left: 0, bottom: 34, right: 0});
+    });
+
+    it('should properly manage delegate lifecycle', async () => {
+      // Arrange
+      NativeModules.SafeAreaManager = {
+        getSafeAreaInsets: jest.fn().mockResolvedValue({top: 44, left: 0, bottom: 34, right: 0})
+      };
+
+      const SafeAreaInsetsManager = require('../SafeAreaInsetsManager').default;
+
+      const mockDelegate1 = {
+        onSafeAreaInsetsDidChangeEvent: jest.fn()
+      };
+      const mockDelegate2 = {
+        onSafeAreaInsetsDidChangeEvent: jest.fn()
+      };
+
+      // Act
+      SafeAreaInsetsManager.addSafeAreaChangedDelegate(mockDelegate1);
+      SafeAreaInsetsManager.addSafeAreaChangedDelegate(mockDelegate2);
+
+      // Remove one delegate
+      SafeAreaInsetsManager.removeSafeAreaChangedDelegate(mockDelegate1);
+
+      // Trigger notification
+      const newInsets = {top: 50, left: 0, bottom: 40, right: 0};
+      SafeAreaInsetsManager.notifyDelegates(newInsets);
+
+      // Assert
+      expect(mockDelegate1.onSafeAreaInsetsDidChangeEvent).not.toHaveBeenCalled();
+      expect(mockDelegate2.onSafeAreaInsetsDidChangeEvent).toHaveBeenCalledWith(newInsets);
+    });
+  });
+});

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "5.0.0-snapshot.7228",
+  "version": "5.0.0-snapshot.7233",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.44.0-snapshot.7228",
+  "version": "7.44.0-snapshot.7233",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/commons/Constants.js

@@ -24,16 +24,8 @@ function setStatusBarHeight() {
   const {
     StatusBarManager
   } = NativeModules;
-  statusBarHeight = (StatusBar.currentHeight ?? StatusBarManager?.HEIGHT) || 0;
-  if (isIOS && StatusBarManager) {
-    try {
-      // override guesstimate height with the actual height from StatusBarManager
-      StatusBarManager.getHeight(data => statusBarHeight = data.height);
-    } catch (error) {
-      console.warn('Constants: StatusBarManager.getHeight not available in new architecture, using fallback');
-      // Keep the fallback height we already set above
-    }
-  }
+  // override guesstimate height with the actual height from StatusBarManager
+  statusBarHeight = (StatusBar.currentHeight ?? StatusBarManager?.getConstants?.()?.HEIGHT) || 0;
 }
 function getAspectRatio() {
   return screenWidth < screenHeight ? screenHeight / screenWidth : screenWidth / screenHeight;

package/src/components/modal/index.d.ts

@@ -40,6 +40,11 @@ export interface ModalProps extends RNModalProps {
      * Send additional props to the KeyboardAvoidingView (iOS only)
      */
     keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
+    /**
+     * Fix RNModal's interaction with react-native-reanimated (Android only, default: true)
+     * See this https://github.com/software-mansion/react-native-reanimated/issues/6659#issuecomment-2704931585
+     */
+    fixReanimatedInteraction?: boolean;
 }
 /**
  * @description: Component that present content on top of the invoking screen

package/src/components/modal/index.js

@@ -55,6 +55,7 @@ class Modal extends Component {
   }
   render() {
     const {
+      fixReanimatedInteraction = true,
       blurView,
       enableModalBlur,
       visible,
@@ -76,16 +77,19 @@ class Modal extends Component {
       style: [styles.fill, keyboardAvoidingViewProps?.style]
     } : {};
     const Container = blurView ? blurView : defaultContainer;
-    return <RNModal visible={Boolean(visible)} {...others}>
-        <GestureContainer {...gestureContainerProps}>
-          <KeyboardAvoidingContainer {...keyboardAvoidingContainerProps}>
-            <Container style={styles.fill} blurType="light">
-              {this.renderTouchableOverlay()}
-              {this.props.children}
-            </Container>
-          </KeyboardAvoidingContainer>
-        </GestureContainer>
-      </RNModal>;
+    const HackContainer = fixReanimatedInteraction && Constants.isAndroid ? View : React.Fragment;
+    return <HackContainer>
+        <RNModal visible={Boolean(visible)} {...others}>
+          <GestureContainer {...gestureContainerProps}>
+            <KeyboardAvoidingContainer {...keyboardAvoidingContainerProps}>
+              <Container style={styles.fill} blurType="light">
+                {this.renderTouchableOverlay()}
+                {this.props.children}
+              </Container>
+            </KeyboardAvoidingContainer>
+          </GestureContainer>
+        </RNModal>
+      </HackContainer>;
   }
 }
 const styles = StyleSheet.create({

package/src/components/modal/modal.api.json

@@ -38,6 +38,11 @@
       "name": "keyboardAvoidingViewProps",
       "type": "object",
       "description": "Send additional props to the KeyboardAvoidingView (iOS only)"
+    },
+    {
+      "name": "fixReanimatedInteraction",
+      "type": "boolean",
+      "description": "Fix RNModal's interaction with react-native-reanimated (Android only, default: true)"
     }
   ],
   "snippet": [

package/src/components/segmentedControl/index.js

@@ -20,7 +20,7 @@ export let SegmentedControlPreset = /*#__PURE__*/function (SegmentedControlPrese
   return SegmentedControlPreset;
 }({});
 export { SegmentedControlItemProps };
-const nonAreUndefined = array => {
+const noneAreUndefined = array => {
   'worklet';
 
   for (const item of array) {
@@ -99,7 +99,7 @@ const SegmentedControl = props => {
       x,
       width
     };
-    if (segmentsDimensions.current.length === segments.length && nonAreUndefined(segmentsDimensions.current)) {
+    if (segmentsDimensions.current.length === segments.length && noneAreUndefined(segmentsDimensions.current)) {
       segmentsStyle.value = [...segmentsDimensions.current];
       // shouldResetOnDimensionsOnNextLayout.current = true;// in case onLayout will be called again (orientation change etc.)
     }
@@ -122,7 +122,7 @@ const SegmentedControl = props => {
     const {
       value: height
     } = containerHeight;
-    if (height !== 0 && value.length === segments.length && nonAreUndefined(value)) {
+    if (height !== 0 && value.length === segments.length && noneAreUndefined(value)) {
       const isFirstElementSelected = animatedSelectedIndex.value === 0;
       const isLastElementSelected = animatedSelectedIndex.value === value.length - 1;
       const isMiddleSelected = !isFirstElementSelected && !isLastElementSelected;