@ledgerhq/lumen-ui-rnative 0.1.25 → 0.1.27

package/src/lib/Components/TabBar/TabBar.tsx

@@ -1,12 +1,6 @@
 import { BlurView } from '@sbaiahmed1/react-native-blur';
 import type { ReactNode } from 'react';
-import {
-  Children,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import { Children, isValidElement, useEffect, useMemo, useRef } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import { Platform, StyleSheet, Text, View } from 'react-native';
 import Animated, {
@@ -19,6 +13,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useStyleSheet, useTheme } from '../../../styles';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
+import { triggerHapticFeedback } from '../../Haptics';
 import { Placeholder } from '../../Symbols';
 import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
@@ -51,14 +46,16 @@ const useTabBarItemAnimations = ({ isActive }: { isActive: boolean }) => {
       50,
       withTiming(isActive ? 1 : 0, activeTimingConfig),
     );
-    return () => cancelAnimation(activeProgress);
   }, [isActive, activeProgress, activeTimingConfig]);
 
+  useEffect(() => () => cancelAnimation(activeProgress), [activeProgress]);
+
   const onPressIn = () => {
     pressProgress.value = withTiming(0.9, pressInTimingConfig);
   };
 
   const onPressOut = () => {
+    triggerHapticFeedback('light');
     pressProgress.value = withSequence(
       withTiming(0.95, { duration: 0 }),
       withTiming(1, pressOutTimingConfig),
@@ -112,7 +109,7 @@ const useTabBarPillLayout = ({
     easing: 'easeInOut',
   });
 
-  const getActiveIndex = useCallback((): number => {
+  const activeIndex = useMemo(() => {
     return Children.toArray(children).findIndex((child) => {
       if (isValidElement<TabBarItemProps>(child)) {
         return child.props.value === active;
@@ -121,6 +118,9 @@ const useTabBarPillLayout = ({
     });
   }, [active, children]);
 
+  const activeIndexRef = useRef(activeIndex);
+  activeIndexRef.current = activeIndex;
+
   const onLayout = (e: LayoutChangeEvent): void => {
     const { width, height } = e.nativeEvent.layout;
     const count = Children.count(children);
@@ -131,7 +131,7 @@ const useTabBarPillLayout = ({
 
     if (!hasLayoutRef.current) {
       hasLayoutRef.current = true;
-      const index = getActiveIndex();
+      const index = activeIndexRef.current;
       if (index >= 0) {
         pillProgress.value = index * slotWidth;
       }
@@ -140,14 +140,15 @@ const useTabBarPillLayout = ({
 
   useEffect(() => {
     if (!hasLayoutRef.current) return;
-    const index = getActiveIndex();
-
-    if (index >= 0 && itemWidth.value > 0) {
-      pillProgress.value = withTiming(index * itemWidth.value, timingConfig);
+    if (activeIndex >= 0 && itemWidth.value > 0) {
+      pillProgress.value = withTiming(
+        activeIndex * itemWidth.value,
+        timingConfig,
+      );
     }
+  }, [activeIndex, itemWidth, pillProgress, timingConfig]);
 
-    return () => cancelAnimation(pillProgress);
-  }, [itemWidth, pillProgress, getActiveIndex, timingConfig]);
+  useEffect(() => () => cancelAnimation(pillProgress), [pillProgress]);
 
   const animatedPillStyle = useAnimatedStyle(
     () => ({

package/src/lib/Components/Utility/Gradient/utils/resolveGradientColor.ts

@@ -29,11 +29,11 @@ export const resolveGradientColor = (
 export const processGradientStops = (
   stops: GradientStop[],
   bgColors: BackgroundColors,
-): Array<{
+): {
   color: string;
   offset: number;
   opacity: number;
-}> => {
+}[] => {
   const stopCount = stops.length;
 
   return stops.map((stop, index) => {

package/src/lib/Components/index.ts

@@ -4,6 +4,8 @@ export * from './AmountInput';
 export * from './Avatar';
 export * from './Banner';
 export * from './BottomSheet';
+export * from './DotCount';
+export * from './DotIndicator';
 export * from './Button';
 export * from './Card';
 export * from './CardButton';