react-native-ui-lib 7.46.3-snapshot.7392 → 7.46.3-snapshot.7403

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "5.0.0-snapshot.7392",
+  "version": "5.0.0-snapshot.7403",
   "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.46.3-snapshot.7392",
+  "version": "7.46.3-snapshot.7403",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/dialog/dialog.api.json

@@ -36,6 +36,11 @@
     },
     {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press."},
     {"name": "modalProps", "type": "ModalProps", "description": "Pass props to the dialog modal"},
+    {
+      "name": "disableAnimation",
+      "type": "boolean",
+      "description": "Disable animation (default is false)  \nIn some cases you might want to disable the animation (probably for Android only), this is when the dialog is scrollable and has touchable items in the scrollable area.  \nThis is a temporary solution for a reanimated + RN77\\8 bug.  \nSee https://github.com/software-mansion/react-native-reanimated/issues/6659 and https://github.com/facebook/react-native/issues/49694"
+    },
     {
       "name": "testID",
       "type": "string",

package/src/components/dialog/index.js

@@ -30,6 +30,7 @@ const Dialog = (props, ref) => {
     ignoreBackgroundPress,
     modalProps = {},
     useSafeArea,
+    disableAnimation = false,
     testID,
     children
   } = props;
@@ -138,7 +139,7 @@ const Dialog = (props, ref) => {
   const style = useMemo(() => {
     return [styles.defaultDialogStyle, {
       backgroundColor: Colors.$backgroundDefault
-    }, containerStyle, animatedStyle, width ? {
+    }, containerStyle, disableAnimation ? undefined : animatedStyle, width ? {
       width
     } : undefined, height ? {
       height

package/src/components/dialog/types.d.ts

@@ -118,6 +118,13 @@ export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSa
      * Additional props for the modal.
      */
     modalProps?: ModalProps;
+    /**
+     * Disable animation (default is false)
+     * In some cases you might want to disable the animation (probably for Android only), this is when the dialog is scrollable and has touchable items in the scrollable area.
+     * This is a temporary solution for a reanimated + RN77\8 bug.
+     * See https://github.com/software-mansion/react-native-reanimated/issues/6659 and https://github.com/facebook/react-native/issues/49694
+     */
+    disableAnimation?: boolean;
     /**
      * Used to locate this view in end-to-end tests
      * The container has the unchanged id.

package/src/components/tabController/TabPage.js

@@ -23,6 +23,9 @@ export default function TabPage({
     containerWidth
   } = useContext(TabBarContext);
   const [shouldLoad, setLoaded] = useState(!lazy);
+
+  // TODO: RN 77 hack - remove the state in future RN\reanimated release (ticket 4838 \ https://github.com/software-mansion/react-native-reanimated/issues/8517)
+  const [isActive, setIsActive] = useState(currentPage.value === index);
   // const [focused, setFocused] = useState(false);
 
   const lazyLoad = useCallback(() => {
@@ -36,6 +39,7 @@ export default function TabPage({
     return currentPage.value;
   }, (currentPage /* , previousPage */) => {
     const isActive = currentPage === index;
+    runOnJS(setIsActive)(isActive);
     // const wasActive = previousPage === index;
     // const nearActive = asCarousel && (currentPage - 1 === index || currentPage + 1 === index);
     // const wasNearActive =
@@ -52,23 +56,25 @@ export default function TabPage({
     // }
   }, [currentPage, lazyLoad]);
   const animatedPageStyle = useAnimatedStyle(() => {
+    if (!nestedInScrollView) {
+      return {};
+    }
     const isActive = Math.round(currentPage.value) === index;
-
-    // TODO: Fix to proper animated style once Reanimated export AnimatedStyleProp
-    const style = {
-      opacity: isActive || asCarousel ? 1 : 0,
-      zIndex: isActive || asCarousel ? 1 : 0
+    return {
+      position: isActive ? 'relative' : 'absolute'
     };
-    if (nestedInScrollView) {
-      style.position = isActive ? 'relative' : 'absolute';
-    }
-    return style;
   });
   const _style = useMemo(() => {
     return [!asCarousel && styles.page, animatedPageStyle, {
       width: asCarousel ? containerWidth : undefined
-    }, style];
-  }, [asCarousel, animatedPageStyle, containerWidth, style]);
+    }, style, !isActive && !asCarousel ? {
+      opacity: 0,
+      zIndex: 0
+    } : {
+      opacity: 1,
+      zIndex: 1
+    }];
+  }, [asCarousel, animatedPageStyle, containerWidth, style, isActive]);
   return <Reanimated.View style={_style} testID={testID}>
       {!shouldLoad && renderLoading?.()}
       {shouldLoad && props.children}
@@ -76,7 +82,5 @@ export default function TabPage({
     </Reanimated.View>;
 }
 const styles = StyleSheet.create({
-  page: {
-    ...StyleSheet.absoluteFillObject
-  }
+  page: StyleSheet.absoluteFillObject
 });