uilib-native 5.0.0-snapshot.7212 → 5.0.0-snapshot.7216

package/components/SafeArea/SafeAreaInsetsManager.js

@@ -2,7 +2,7 @@ import _isEqual from "lodash/isEqual";
 import _remove from "lodash/remove";
 import _forEach from "lodash/forEach";
 /* eslint no-underscore-dangle: 0 */
-import { NativeModules, DeviceEventEmitter, Platform } from 'react-native';
+import { NativeModules, DeviceEventEmitter } from 'react-native';
 let SafeAreaInsetsCache = null;
 class SafeAreaInsetsManager {
   _defaultInsets = {
@@ -45,9 +45,6 @@ class SafeAreaInsetsManager {
     }
   }
   setupEventListener() {
-    if (Platform.OS !== 'ios') {
-      return;
-    }
     try {
       // Use DeviceEventEmitter instead of NativeEventEmitter to avoid getConstants      
       DeviceEventEmitter.addListener('SafeAreaInsetsDidChangeEvent', data => {

package/components/SafeArea/SafeAreaSpacerView.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 export type SafeAreaSpacerViewProps = {
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 };
 declare const SafeAreaSpacerView: {
     ({ style }: SafeAreaSpacerViewProps): React.JSX.Element;

package/components/SafeArea/SafeAreaSpacerView.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { View, Dimensions } from 'react-native';
 import SafeAreaInsetsManager from "./SafeAreaInsetsManager";
 const SafeAreaSpacerView = ({
@@ -10,6 +10,7 @@ const SafeAreaSpacerView = ({
     bottom: 0,
     right: 0
   });
+  const [componentHeight, setComponentHeight] = useState(0);
   const [spacerHeight, setSpacerHeight] = useState(0);
   useEffect(() => {
     const getSafeAreaInsets = async () => {
@@ -43,22 +44,24 @@ const SafeAreaSpacerView = ({
     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]);
-  const spacerStyle = {
-    height: spacerHeight,
-    ...style
-  };
+  }, [componentHeight, safeAreaInsets, spacerHeight]);
+  const spacerStyle = useMemo(() => [{
+    height: spacerHeight
+  }, style], [spacerHeight, style]);
   return <View style={spacerStyle} onLayout={handleLayout} />;
 };
 SafeAreaSpacerView.displayName = 'SafeAreaSpacerView';

package/components/SafeArea/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+export type SafeAreaSpacerViewProps = {
+    style?: StyleProp<ViewStyle>;
+};
+declare const SafeAreaSpacerView: {
+    ({ style }: SafeAreaSpacerViewProps): React.JSX.Element;
+    displayName: string;
+};
+export default SafeAreaSpacerView;

package/components/SafeArea/index.js

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

package/components/index.d.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';
 export { DynamicFonts, FontExtension, HighlighterOverlayView, SafeAreaSpacerView, SafeAreaInsetsManager, Keyboard, KeyboardTrackingViewProps, KeyboardAccessoryViewProps };

package/components/index.js

@@ -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";
 export { DynamicFonts, FontExtension, HighlighterOverlayView, SafeAreaSpacerView, SafeAreaInsetsManager, Keyboard, KeyboardTrackingViewProps, KeyboardAccessoryViewProps };

package/package.json

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