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

package/lib/components/SafeArea/SafeAreaSpacerView.js

@@ -1,68 +1,14 @@
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { View, Dimensions } from 'react-native';
-import SafeAreaInsetsManager from "./SafeAreaInsetsManager";
+import React from 'react';
+import { View, requireNativeComponent, Platform } from 'react-native';
+const NativeSafeAreaSpacerView = requireNativeComponent('SafeAreaSpacerView');
+const isIOS = Platform.OS === 'ios';
 const SafeAreaSpacerView = ({
   style
 }) => {
-  const [safeAreaInsets, setSafeAreaInsets] = useState({
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0
-  });
-  const [componentHeight, setComponentHeight] = useState(0);
-  const [spacerHeight, setSpacerHeight] = useState(0);
-  useEffect(() => {
-    const getSafeAreaInsets = async () => {
-      try {
-        const insets = await SafeAreaInsetsManager.getSafeAreaInsets();
-        if (insets) {
-          setSafeAreaInsets(insets);
-        }
-      } catch (error) {
-        console.warn('SafeAreaSpacerView: Failed to get initial safe area insets:', error);
-      }
-    };
-    getSafeAreaInsets();
-
-    // Add delegate to listen for safe area changes from native component
-    const delegate = {
-      onSafeAreaInsetsDidChangeEvent: insets => {
-        if (insets) {
-          setSafeAreaInsets(insets);
-        }
-      }
-    };
-    SafeAreaInsetsManager.addSafeAreaChangedDelegate(delegate);
-    return () => {
-      SafeAreaInsetsManager.removeSafeAreaChangedDelegate(delegate);
-    };
-  }, []);
-
-  // Position detection with useCallback
-  const handleLayout = useCallback(event => {
-    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 (componentHeight < safeAreaInsets.top) {
-      height = safeAreaInsets.top;
-    } else if (componentHeight > screenHeight - safeAreaInsets.bottom) {
-      height = safeAreaInsets.bottom;
-    }
-    if (height !== spacerHeight) {
-      setSpacerHeight(height);
-    }
-  }, [componentHeight, safeAreaInsets, spacerHeight]);
-  const spacerStyle = useMemo(() => [{
-    height: spacerHeight
-  }, style], [spacerHeight, style]);
-  return <View style={spacerStyle} onLayout={handleLayout} />;
+  return (
+    // @ts-ignore
+    isIOS ? <NativeSafeAreaSpacerView style={style} /> : <View style={style} />
+  );
 };
-SafeAreaSpacerView.displayName = 'SafeAreaSpacerView';
+SafeAreaSpacerView.displayName = 'IGNORE';
 export default SafeAreaSpacerView;

package/lib/components/index.d.ts

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

package/lib/components/index.js

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

package/lib/package.json

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

package/lib/react-native.config.js

@@ -10,9 +10,11 @@ module.exports = {
         sourceDir: './android/',
         packageImportPath: `import com.wix.reactnativeuilib.dynamicfont.DynamicFontPackage;
 import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage;
-import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;`,
+import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;
+import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage;`,
         packageInstance: `new DynamicFontPackage(),
       new HighlighterViewPackage(),
+      new TextInputDelKeyHandlerPackage(),
       new KeyboardInputPackage(getApplication())`
       }
     }

package/metro.config.js

@@ -5,9 +5,9 @@ const {assetExts, sourceExts} = defaultConfig.resolver;
 
 /**
  * Metro configuration
- * https://reactnative.dev/docs/metro
+ * https://facebook.github.io/metro/docs/configuration
  *
- * @type {import('@react-native/metro-config').MetroConfig}
+ * @type {import('metro-config').MetroConfig}
  */
 
 const config = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.44.0-snapshot.7228",
+  "version": "7.44.0",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -56,15 +56,15 @@
     "react-native-redash": "^12.0.3",
     "semver": "^5.5.0",
     "tinycolor2": "^1.4.2",
-    "uilib-native": "5.0.0-snapshot.7216",
+    "uilib-native": "4.5.1",
     "url-parse": "^1.2.0",
     "wix-react-native-text-size": "1.0.9"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.24.4",
     "@babel/plugin-transform-modules-commonjs": "^7.17.9",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "^7.10.1",
     "@babel/runtime": "^7.26.10",
     "@formatjs/intl-datetimeformat": "^6.0.3",
@@ -73,29 +73,28 @@
     "@formatjs/intl-numberformat": "^8.0.4",
     "@formatjs/intl-pluralrules": "^5.0.3",
     "@react-native-community/blur": "4.4.1",
-    "@react-native-community/cli": "15.0.1",
-    "@react-native-community/cli-platform-android": "15.0.1",
-    "@react-native-community/cli-platform-ios": "15.0.1",
     "@react-native-community/datetimepicker": "^3.4.6",
-    "@react-native-community/netinfo": "11.3.3",
-    "@react-native/babel-preset": "0.77.2",
-    "@react-native/eslint-config": "0.77.2",
-    "@react-native/metro-config": "0.77.2",
-    "@react-native/typescript-config": "0.77.2",
+    "@react-native-community/netinfo": "^5.6.2",
+    "@react-native/babel-preset": "0.73.21",
+    "@react-native/eslint-config": "0.73.2",
+    "@react-native/metro-config": "0.73.5",
+    "@react-native/typescript-config": "0.73.1",
     "@shopify/flash-list": "1.7.6",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^11.5.1",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.2.1",
     "@types/lodash": "^4.0.0",
     "@types/prop-types": "^15.5.3",
     "@types/react": "18.3.7",
+    "@types/react-native": "0.73.0",
     "@types/react-test-renderer": "^18.3.0",
     "@types/tinycolor2": "^1.4.2",
     "@types/url-parse": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.3.1",
     "@typescript-eslint/parser": "^5.3.1",
     "@welldone-software/why-did-you-render": "^3.2.1",
+    "babel-jest": "^29.6.3",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "8.19.0",
@@ -105,6 +104,7 @@
     "eslint-plugin-react-native": "^4.0.0",
     "jest": "^29.6.3",
     "light-date": "^1.2.0",
+    "metro-react-native-babel-preset": "0.73.10",
     "moment": "^2.24.0",
     "object-hash": "^3.0.0",
     "postcss": "^8.4.21",
@@ -114,28 +114,27 @@
     "react": "18.2.0",
     "react-autobind": "^1.0.6",
     "react-dom": "^18.2.0",
-    "react-native": "0.77.2",
+    "react-native": "0.73.9",
     "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "2.22.1",
+    "react-native-gesture-handler": "2.14.1",
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-linear-gradient": "2.6.2",
-    "react-native-mmkv": "3.2.0",
-    "react-native-navigation": "8.1.0-rc01-snapshot.1710",
+    "react-native-mmkv": "2.11.0",
+    "react-native-navigation": "7.40.1",
     "react-native-reanimated": "3.16.7",
     "react-native-shimmer-placeholder": "^2.0.6",
-    "react-native-svg": "15.11.2",
+    "react-native-svg": "15.2.0",
     "react-native-svg-transformer": "1.5.0",
-    "react-test-renderer": "18.3.1",
+    "react-test-renderer": "18.2.0",
     "reassure": "^0.4.1",
-    "setimmediate": "^1.0.5",
     "shell-utils": "^1.0.10",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "react": ">=17.0.1",
-    "react-native": ">=0.76.0",
-    "react-native-gesture-handler": ">=2.22.0",
-    "react-native-reanimated": ">=3.16.7",
+    "react-native": ">=0.64.1",
+    "react-native-gesture-handler": ">=2.5.0",
+    "react-native-reanimated": ">=2.0.0",
     "react-native-ui-lib": "*"
   },
   "jest": {
@@ -163,6 +162,7 @@
   "engines": {
     "node": ">=18"
   },
+  "packageManager": "yarn@3.4.1",
   "files": [
     "*.js",
     "*.d.ts",

package/panningViews.d.ts

@@ -0,0 +1,2 @@
+import {PanningViews} from './src';
+export default PanningViews;

package/panningViews.js

@@ -0,0 +1 @@
+module.exports = require('./src/components/panningViews').default;

package/react-native.config.js

@@ -10,9 +10,11 @@ module.exports = {
         sourceDir: '../uilib-native/android/',
         packageImportPath: `import com.wix.reactnativeuilib.dynamicfont.DynamicFontPackage;
 import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage;
-import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;`,
+import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;
+import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage;`,
         packageInstance: `new DynamicFontPackage(),
       new HighlighterViewPackage(),
+      new TextInputDelKeyHandlerPackage(),
       new KeyboardInputPackage(getApplication())`
       }
     }

package/sharedTransition.d.ts

@@ -0,0 +1,2 @@
+import {SharedTransition} from './src';
+export default SharedTransition;

package/sharedTransition.js

@@ -0,0 +1 @@
+module.exports = require('./src/components/sharedTransition').default;

package/src/commons/Constants.js

@@ -26,13 +26,8 @@ function setStatusBarHeight() {
   } = 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
+    StatusBarManager.getHeight(data => statusBarHeight = data.height);
   }
 }
 function getAspectRatio() {

package/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js

@@ -107,7 +107,7 @@ export default class KeyboardAwareBase extends Component {
           setTimeout(() => {
             this._keyboardAwareView
               .getScrollResponder()
-              .scrollResponderScrollNativeHandleToKeyboard(this.findNodeHandle(textInputRef),
+              .scrollResponderScrollNativeHandleToKeyboard(ReactNative.findNodeHandle(textInputRef),
                 this.props.scrollToInputAdditionalOffset,
                 true);
           }, 0);
@@ -117,10 +117,6 @@ export default class KeyboardAwareBase extends Component {
     }
   }
 
-  findNodeHandle(ref) {
-    return ref.current?.getNodeHandle?.() || ref?.getNodeHandle?.() || ReactNative.findNodeHandle(ref.current || ref);
-  }
-
   _onKeyboardWillShow(event) {
     this._scrollToFocusedTextInput();
 

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

@@ -1,9 +1,14 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
+import { DialogProps } from '../dialog';
 import { ButtonProps } from '../button';
-import { type DialogProps } from '../dialog';
+import { DialogProps as IncubatorDialogProps } from '../../incubator';
 type ActionSheetOnOptionPress = (index: number) => void;
 type ActionSheetProps = {
+    /**
+     * Migrate to the Incubator.Dialog component
+     */
+    migrateDialog?: boolean;
     /**
      * Whether to show the action sheet or not
      */
@@ -63,6 +68,11 @@ type ActionSheetProps = {
      * Note: you will need to call onOptionPress so the option's onPress will be called
      */
     renderAction?: (option: ButtonProps, index: number, onOptionPress: ActionSheetOnOptionPress) => JSX.Element;
+    /**
+     * @deprecated
+     * Called once the modal has been dismissed completely
+     */
+    onModalDismissed?: DialogProps['onDialogDismissed'];
     /**
      * Whether or not to handle SafeArea
      */
@@ -70,7 +80,7 @@ type ActionSheetProps = {
     /**
      * Additional props to send to the Dialog
      */
-    dialogProps?: Omit<DialogProps, 'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'> | DialogProps;
+    dialogProps?: Omit<DialogProps, 'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'> | IncubatorDialogProps;
     /**
      * testID for e2e tests
      */

package/src/components/actionSheet/index.js

@@ -6,12 +6,15 @@ import React, { Component } from 'react';
 import { ActionSheetIOS, StyleSheet } from 'react-native';
 import { Colors } from "../../style";
 import { asBaseComponent, Constants } from "../../commons/new";
+import Dialog from "../dialog";
 import View from "../view";
 import Text from "../text";
 import Image from "../image";
 //@ts-ignore
 import ListItem from "../listItem";
-import Dialog from "../dialog";
+import PanningProvider from "../panningViews/panningProvider";
+import { Dialog as IncubatorDialog } from "../../incubator";
+import { LogService } from "../../services";
 const VERTICAL_PADDING = 8;
 /**
  * @description: Cross platform Action Sheet, with a support for native iOS solution
@@ -127,19 +130,55 @@ class ActionSheet extends Component {
         {this.renderActions()}
       </View>;
   }
-  render() {
+  renderOldDialog() {
     const {
+      useNativeIOS,
       visible,
       onDismiss,
       dialogStyle,
+      onModalDismissed,
       testID,
       useSafeArea,
       dialogProps
     } = this.props;
-    return <Dialog bottom centerH width="100%" direction={Dialog.directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.incubatorDialog, dialogStyle]} visible={visible} onDismiss={onDismiss}>
+    if (Constants.isIOS && useNativeIOS) {
+      return null;
+    }
+    return <Dialog bottom centerH width="100%" panDirection={PanningProvider.Directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.dialog, dialogStyle]} visible={visible} onDismiss={onDismiss} onDialogDismissed={onModalDismissed}>
         {this.renderSheet()}
       </Dialog>;
   }
+  renderNewDialog() {
+    const {
+      visible,
+      onDismiss,
+      dialogStyle,
+      onModalDismissed,
+      testID,
+      useSafeArea,
+      dialogProps
+    } = this.props;
+    if (onModalDismissed) {
+      LogService.deprecationWarn({
+        component: 'ActionSheet',
+        oldProp: 'onModalDismissed',
+        newProp: 'onDismiss'
+      });
+    }
+    return <IncubatorDialog bottom centerH width="100%" direction={PanningProvider.Directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.incubatorDialog, dialogStyle]} visible={visible} onDismiss={onDismiss}>
+        {this.renderSheet()}
+      </IncubatorDialog>;
+  }
+  render() {
+    const {
+      migrateDialog
+    } = this.props;
+    if (migrateDialog) {
+      return this.renderNewDialog();
+    } else {
+      return this.renderOldDialog();
+    }
+  }
 }
 export default asBaseComponent(ActionSheet);
 const styles = StyleSheet.create({