react-native-ui-lib 7.46.3-snapshot.7406 → 7.46.3-snapshot.7424

package/incubator.d.ts

@@ -1,2 +1,2 @@
-import {Dialog, ExpandableOverlay, Slider, Toast} from './src/incubator';
-export {Dialog, ExpandableOverlay, Slider, Toast};
+import {ExpandableOverlay, Slider, Toast} from './src/incubator';
+export {ExpandableOverlay, Slider, Toast};

package/lib/package.json

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

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

@@ -3,20 +3,12 @@ import { HintPositions, HintProps } from './types';
 declare const Hint: {
     (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
     displayName: string;
-    defaultProps: {
-        position: HintPositions;
-        useModal: boolean;
-    };
     positions: typeof HintPositions;
 };
 export { HintProps, Hint };
 declare const _default: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<any>> & {
     (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
     displayName: string;
-    defaultProps: {
-        position: HintPositions;
-        useModal: boolean;
-    };
     positions: typeof HintPositions;
 };
 export default _default;

package/src/components/hint/index.js

@@ -22,8 +22,8 @@ const HINT_MIN_WIDTH = 68;
 const Hint = props => {
   const {
     visible,
-    useModal,
-    position,
+    useModal = true,
+    position = HintPositions.BOTTOM,
     children,
     message,
     containerWidth = Constants.windowWidth,
@@ -69,6 +69,7 @@ const Hint = props => {
     if (targetRef.current && hintRef.current) {
       focusAccessibilityOnHint(targetRef.current, hintRef.current);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const targetLayout = useMemo(() => {
     return isUsingModal ? targetLayoutInWindowState : targetLayoutState;
@@ -78,6 +79,7 @@ const Hint = props => {
     if (hintRef.current) {
       focusAccessibilityOnHint(targetRef.current, hintRef.current);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const showHint = !!targetLayout;
   const {
@@ -240,10 +242,6 @@ const styles = StyleSheet.create({
   }
 });
 Hint.displayName = 'Hint';
-Hint.defaultProps = {
-  position: HintPositions.BOTTOM,
-  useModal: true
-};
 Hint.positions = HintPositions;
 export { HintProps, Hint };
 

package/src/components/slider/index.js

@@ -117,7 +117,7 @@ class Slider extends PureComponent {
       maximumValue,
       value
     } = props;
-    if (minimumValue >= maximumValue) {
+    if (minimumValue > maximumValue) {
       console.warn('Slider minimumValue must be lower than maximumValue');
     }
     if (!useRange && (value < minimumValue || value > maximumValue)) {

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) when fixed we should revert to the original logic (see this PR: https://github.com/wix/react-native-ui-lib/pull/3829)
+  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
 });

package/src/incubator/slider/SliderPresenter.js

@@ -45,7 +45,8 @@ export function validateValues(props) {
   } = props;
   if (minimumValue > maximumValue || useRange && initialMinimumValue && initialMaximumValue && initialMinimumValue > initialMaximumValue) {
     LogService.forwardError({
-      message: 'Your passed values are invalid. Please check if minimum values are not higher than maximum values'
+      // eslint-disable-next-line max-len
+      message: `Your passed values are invalid. Please check if minimum values are not higher than maximum values (minimumValue: ${minimumValue}, maximumValue: ${maximumValue}, initialMinimumValue: ${initialMinimumValue}, initialMaximumValue: ${initialMaximumValue})`
     });
   }
   if (value !== undefined && minimumValue && maximumValue && !inRange(value, minimumValue, maximumValue)) {