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

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "5.0.0-snapshot.7396",
+  "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.7396",
+  "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/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
 });