@ledgerhq/lumen-ui-rnative 0.0.70 → 0.0.71

package/src/lib/Components/Spinner/Spinner.tsx

@@ -1,42 +1,10 @@
-import { memo, useEffect, useRef, ReactNode } from 'react';
-import { Animated, Easing } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
 import { LumenTextStyle, useResolveTextStyle, useTheme } from '../../../styles';
-import { RuntimeConstants } from '../../utils';
+import { Spin } from '../../Animations/Spin';
 import { Box } from '../Utility';
 import { SpinnerProps } from './types';
 
-const SpinAnimation = memo(({ children }: { children: ReactNode }) => {
-  const spinValue = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    const animation = Animated.loop(
-      Animated.timing(spinValue, {
-        toValue: 1,
-        duration: 1000,
-        easing: Easing.linear,
-        useNativeDriver: RuntimeConstants.isNative,
-      }),
-    );
-    animation.start();
-
-    return () => animation.stop();
-  }, [spinValue]);
-
-  const spin = spinValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <Animated.View style={{ transform: [{ rotate: spin }] }}>
-      {children}
-    </Animated.View>
-  );
-});
-SpinAnimation.displayName = 'SpinAnimation';
-
 /**
  * A basic spinner component for loading states.
  *
@@ -66,7 +34,7 @@ export const Spinner = ({
 
   return (
     <Box ref={ref} lx={{ flexShrink: 0, ...lx }} {...props}>
-      <SpinAnimation>
+      <Spin>
         <Svg
           width={size}
           height={size}
@@ -81,7 +49,7 @@ export const Spinner = ({
             strokeLinecap='round'
           />
         </Svg>
-      </SpinAnimation>
+      </Spin>
     </Box>
   );
 };

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

@@ -15,6 +15,7 @@ import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
 import { TabBarItemProps, TabBarProps } from './types';
 
+export const TAB_BAR_HEIGHT = 56;
 const PILL_INSET = 4;
 
 /**
@@ -239,7 +240,7 @@ const useStyles = () =>
   useStyleSheet(
     (t) => ({
       container: {
-        height: t.sizes.s56,
+        height: TAB_BAR_HEIGHT,
         flexDirection: 'row',
         justifyContent: 'center',
         padding: t.spacings.s4,

package/src/lib/Components/TabBar/index.ts

@@ -1,2 +1,2 @@
-export { TabBar, TabBarItem } from './TabBar';
+export { TabBar, TabBarItem, TAB_BAR_HEIGHT } from './TabBar';
 export type { TabBarProps, TabBarItemProps } from './types';

package/src/lib/Components/TileButton/TileButton.tsx

@@ -1,5 +1,5 @@
 import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
-import React, { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { IconSize } from '../Icon';
@@ -74,50 +74,41 @@ const useStyles = ({
  *   Settings
  * </TileButton>
  */
-export const TileButton = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  TileButtonProps
->(
-  (
-    {
-      lx,
-      style,
-      icon: IconProp,
-      children,
-      disabled = false,
-      isFull = false,
-      numberOfLines = 2,
-      ...props
-    },
-    ref,
-  ) => {
-    const rootStyles = useRootStyles({ isFull });
+export const TileButton = ({
+  lx,
+  style,
+  icon: IconProp,
+  children,
+  disabled = false,
+  isFull = false,
+  numberOfLines = 2,
+  ...props
+}: TileButtonProps) => {
+  const rootStyles = useRootStyles({ isFull });
 
-    return (
-      <Pressable
-        ref={ref}
-        lx={lx}
-        style={StyleSheet.flatten([style, rootStyles.root])}
-        disabled={disabled}
-        accessibilityRole='button'
-        accessibilityState={{ disabled }}
-        {...props}
-      >
-        {({ pressed }) => (
-          <TileButtonContent
-            disabled={disabled}
-            pressed={pressed}
-            isFull={isFull}
-            IconProp={IconProp}
-            numberOfLines={numberOfLines}
-          >
-            {children}
-          </TileButtonContent>
-        )}
-      </Pressable>
-    );
-  },
-);
+  return (
+    <Pressable
+      lx={lx}
+      style={StyleSheet.flatten([style, rootStyles.root])}
+      disabled={disabled}
+      accessibilityRole='button'
+      accessibilityState={{ disabled }}
+      {...props}
+    >
+      {({ pressed }) => (
+        <TileButtonContent
+          disabled={disabled}
+          pressed={pressed}
+          isFull={isFull}
+          IconProp={IconProp}
+          numberOfLines={numberOfLines}
+        >
+          {children}
+        </TileButtonContent>
+      )}
+    </Pressable>
+  );
+};
 
 type TileButtonContentProps = PropsWithChildren<{
   disabled: boolean;

package/src/styles/types/factories.types.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 import {
   PressableProps,
   PressableStateCallbackType,