react-native-ui-lib 8.2.2 → 8.3.0-snapshot.7730

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.2.2",
+  "version": "8.3.0-snapshot.7730",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -96,6 +96,7 @@
     "react-native-mmkv": "3.2.0",
     "react-native-navigation": "8.1.2",
     "react-native-reanimated": "3.18.0",
+    "react-native-safe-area-context": "5.6.2",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "15.11.2",
     "react-native-svg-transformer": "1.5.0",
@@ -111,6 +112,7 @@
     "react-native": ">=0.77.3",
     "react-native-gesture-handler": ">=2.24.0",
     "react-native-reanimated": ">=3.17.5",
+    "react-native-safe-area-context": ">=5.6.2",
     "uilib-native": "^5.0.1"
   },
   "jest": {

package/scripts/release/prReleaseNotesCommon.js

@@ -3,6 +3,16 @@ const _ = require('lodash');
 const chalk = require('chalk');
 const childProcess = require('child_process');
 const readline = require('readline');
+const BRANCH_CATEGORIES = [
+  {name: 'features', branch: 'feat/', title: ':gift: Features'},
+  {name: 'web', branch: 'web/', title: ':spider_web: Web support'},
+  {name: 'fixes', branch: 'fix/', title: ':wrench: Fixes'},
+  {name: 'infra', branch: 'infra/', title: ':gear: Maintenance & Infra'}
+];
+
+function getBranchPrefixes() {
+  return BRANCH_CATEGORIES.map(category => category.branch);
+}
 
 function fetchLatestReleaseDate(tagPrefix, version) {
   const release = childProcess.execSync(`gh release view ${tagPrefix}${version}`).toString();
@@ -171,10 +181,7 @@ function generateReleaseNotesFromPRs(PRs, categories, header) {
   }
 
   const prCategories = [
-    {name: 'features', branch: 'feat/', title: ':gift: Features'},
-    {name: 'web', branch: 'web/', title: ':spider_web: Web support'},
-    {name: 'fixes', branch: 'fix/', title: ':wrench: Fixes'},
-    {name: 'infra', branch: 'infra/', title: ':gear: Maintenance & Infra'},
+    ...BRANCH_CATEGORIES,
     ...categories,
     {name: 'others', branch: '', title: 'OTHERS'},
     {
@@ -253,4 +260,4 @@ async function generateReleaseNotes(latestVersion,
   });
 }
 
-module.exports = {generateReleaseNotes, generateReleaseNotesFromPRs, parsePR};
+module.exports = {generateReleaseNotes, generateReleaseNotesFromPRs, parsePR, getBranchPrefixes};

package/src/commons/withScrollEnabler.js

@@ -8,10 +8,8 @@ function withScrollEnabler(WrappedComponent) {
     const layoutSize = useRef(0);
     const checkScroll = useCallback(() => {
       const isScrollEnabled = Math.floor(contentSize.current) > layoutSize.current;
-      if (isScrollEnabled !== scrollEnabled) {
-        setScrollEnabled(isScrollEnabled);
-      }
-    }, [scrollEnabled]);
+      setScrollEnabled(isScrollEnabled);
+    }, []);
     const onContentSizeChange = useCallback((contentWidth, contentHeight) => {
       const size = props.horizontal ? contentWidth : contentHeight;
       if (size !== contentSize.current) {

package/src/components/gridListItem/index.js

@@ -113,7 +113,7 @@ class GridListItem extends Component {
       alignItems
     }, {
       width
-    }, containerStyle]} {...otherContainerProps} onPress={onPress && this.onItemPress} accessible={renderCustomItem ? true : undefined} {...Modifiers.extractAccessibilityProps(this.props)}>
+    }, containerStyle]} accessible={renderCustomItem ? true : undefined} {...otherContainerProps} onPress={onPress && this.onItemPress} {...Modifiers.extractAccessibilityProps(this.props)}>
         {imageProps && <Image {...imageProps} style={[itemSize, imageProps?.style]} customOverlayContent={children} />}
         {!_isNil(renderCustomItem) && <View style={{
         width

package/src/components/maskedInput/index.js

@@ -1,4 +1,5 @@
 import React, { forwardRef, useEffect } from 'react';
+import { useThemeProps } from "../../hooks";
 // @ts-expect-error
 import MaskedInputOld from "./old";
 import MaskedInputNew, { MaskedInputProps } from "./new";
@@ -7,7 +8,7 @@ function MaskedInputMigrator(props, refToForward) {
   const {
     migrate,
     ...others
-  } = props;
+  } = useThemeProps(props, 'MaskedInput');
   useEffect(() => {
     if (!migrate) {
       LogService.warn(`UILib MaskedInput implementation has been updated and now requires manual migration. To proceed, pass the "migrate" prop and check if the functionality works as expected.`);

package/src/components/modal/index.js

@@ -2,7 +2,7 @@ import _isFunction from "lodash/isFunction";
 import React, { Component } from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { StyleSheet, Modal as RNModal, TouchableWithoutFeedback, KeyboardAvoidingView } from 'react-native';
-import { BlurViewPackage } from "../../optionalDependencies";
+import { BlurViewPackage, SafeAreaContextPackage } from "../../optionalDependencies";
 import { Constants, asBaseComponent } from "../../commons/new";
 import TopBar, { ModalTopBarProps } from "./TopBar";
 import View from "../../components/view";
@@ -65,6 +65,7 @@ class Modal extends Component {
       ...others
     } = this.props;
     const defaultContainer = enableModalBlur && Constants.isIOS && BlurView ? BlurView : View;
+    const SafeAreaContainer = SafeAreaContextPackage?.SafeAreaProvider ?? React.Fragment;
     const GestureContainer = useGestureHandlerRootView ? GestureHandlerRootView : React.Fragment;
     const gestureContainerProps = useGestureHandlerRootView ? {
       style: styles.fill
@@ -80,14 +81,16 @@ class Modal extends Component {
     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>
+          <SafeAreaContainer>
+            <GestureContainer {...gestureContainerProps}>
+              <KeyboardAvoidingContainer {...keyboardAvoidingContainerProps}>
+                <Container style={styles.fill} blurType="light">
+                  {this.renderTouchableOverlay()}
+                  {this.props.children}
+                </Container>
+              </KeyboardAvoidingContainer>
+            </GestureContainer>
+          </SafeAreaContainer>
         </RNModal>
       </HackContainer>;
   }

package/src/optionalDependencies/SafeAreaContextPackage.d.ts

@@ -0,0 +1,2 @@
+declare let SafeAreaContextPackage: any;
+export default SafeAreaContextPackage;

package/src/optionalDependencies/SafeAreaContextPackage.js

@@ -0,0 +1,5 @@
+let SafeAreaContextPackage;
+try {
+  SafeAreaContextPackage = require('react-native-safe-area-context');
+} catch (error) {}
+export default SafeAreaContextPackage;

package/src/optionalDependencies/index.d.ts

@@ -7,3 +7,4 @@ export { default as HapticFeedbackPackage } from './HapticFeedbackPackage';
 export { default as SvgPackage, SvgCssUri } from './SvgPackage';
 export { createShimmerPlaceholder } from './ShimmerPackage';
 export { default as LinearGradientPackage } from './LinearGradientPackage';
+export { default as SafeAreaContextPackage } from './SafeAreaContextPackage';

package/src/optionalDependencies/index.js

@@ -6,4 +6,5 @@ export { default as NetInfoPackage } from "./NetInfoPackage";
 export { default as HapticFeedbackPackage } from "./HapticFeedbackPackage";
 export { default as SvgPackage, SvgCssUri } from "./SvgPackage";
 export { createShimmerPlaceholder } from "./ShimmerPackage";
-export { default as LinearGradientPackage } from "./LinearGradientPackage";
+export { default as LinearGradientPackage } from "./LinearGradientPackage";
+export { default as SafeAreaContextPackage } from "./SafeAreaContextPackage";