@ledgerhq/lumen-ui-rnative 0.0.55 → 0.0.57-0

package/dist/src/styles/lx/createStyledText.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { StyleSheet } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
 import { areLxPropsEqual } from './areLxPropsEqual';
@@ -13,7 +13,7 @@ import { useResolveTextStyle } from './resolveStyle';
  * ```
  */
 export const createStyledText = (Component) => {
-    const StyledComponent = memo(forwardRef(({ typography = 'body3', lx = {}, style, ...props }, ref) => {
+    const StyledComponent = memo(({ typography = 'body3', lx = {}, ref, style, ...props }) => {
         const { theme } = useTheme();
         const resolvedStyle = useResolveTextStyle(lx);
         const typographyStyle = theme.typographies[typography];
@@ -23,7 +23,7 @@ export const createStyledText = (Component) => {
             resolvedStyle,
         ]);
         return _jsx(Component, { ref: ref, ...props, style: finalStyle });
-    }), areLxPropsEqual);
+    }, areLxPropsEqual);
     // Set display name for debugging
     const componentName = Component.displayName ||
         Component.name ||

package/dist/src/styles/lx/createStyledView.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { View } from 'react-native';
+import type { StyledViewProps } from '../types';
 /**
  * Factory function to create a styled View component.
  *
@@ -8,7 +8,5 @@ import { View } from 'react-native';
  * const StyledView = createStyledView(View);
  * ```
  */
-export declare const createStyledView: (Component: typeof View) => React.MemoExoticComponent<React.ForwardRefExoticComponent<{
-    lx?: import("..").LumenViewStyle;
-} & import("react-native").ViewProps & React.RefAttributes<View>>>;
+export declare const createStyledView: (Component: typeof View) => import("react").MemoExoticComponent<({ lx, ref, style, ...props }: StyledViewProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=createStyledView.d.ts.map

package/dist/src/styles/lx/createStyledView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createStyledView.d.ts","sourceRoot":"","sources":["../../../../src/styles/lx/createStyledView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAOhD;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,WAAW,OAAO,IAAI;;kEAqBtD,CAAC"}
+{"version":3,"file":"createStyledView.d.ts","sourceRoot":"","sources":["../../../../src/styles/lx/createStyledView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,cAAe,OAAO,IAAI,wEAEf,eAAe,6CAiBtD,CAAC"}

package/dist/src/styles/lx/createStyledView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { StyleSheet } from 'react-native';
 import { areLxPropsEqual } from './areLxPropsEqual';
 import { useResolveViewStyle } from './resolveStyle';
@@ -12,11 +12,11 @@ import { useResolveViewStyle } from './resolveStyle';
  * ```
  */
 export const createStyledView = (Component) => {
-    const StyledComponent = memo(forwardRef(({ lx = {}, style, ...props }, ref) => {
+    const StyledComponent = memo(({ lx = {}, ref, style, ...props }) => {
         const resolvedStyle = useResolveViewStyle(lx);
         const finalStyle = StyleSheet.flatten([style, resolvedStyle]);
         return _jsx(Component, { ref: ref, ...props, style: finalStyle });
-    }), areLxPropsEqual);
+    }, areLxPropsEqual);
     // Set display name for debugging
     const componentName = Component.displayName ||
         Component.name ||

package/dist/src/styles/lx/resolveStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveStyle.d.ts","sourceRoot":"","sources":["../../../../src/styles/lx/resolveStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAc,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EAEV,cAAc,EACd,cAAc,EACf,MAAM,UAAU,CAAC;AAoClB;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,IAAI,cAAc,EAClB,YAAY,SAAS,KACpB,SAIF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,IAAI,cAAc,EAClB,YAAY,SAAS,KACpB,SAIF,CAAC"}
+{"version":3,"file":"resolveStyle.d.ts","sourceRoot":"","sources":["../../../../src/styles/lx/resolveStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAc,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EAEV,cAAc,EACd,cAAc,EACf,MAAM,UAAU,CAAC;AAoClB;;GAEG;AACH,eAAO,MAAM,mBAAmB,OAC1B,cAAc,cACN,SAAS,KACpB,SAIF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,OAC1B,cAAc,cACN,SAAS,KACpB,SAIF,CAAC"}

package/dist/src/styles/provider/LumenStyleSheetProvider.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { ColorSchemeName } from 'react-native';
 import { type LumenStyleSheetTheme } from '../types';
 import { type LumenStyleSheetProviderProps } from './types';
@@ -10,5 +9,5 @@ export declare const useLumenStyleSheetContext: <ContextRequired extends boolean
     consumerName: string;
     contextRequired: ContextRequired;
 }) => ContextRequired extends true ? LumenStyleSheetContextValue : Partial<LumenStyleSheetContextValue>;
-export declare const LumenStyleSheetProvider: FC<LumenStyleSheetProviderProps>;
+export declare const LumenStyleSheetProvider: ({ themes, colorScheme, children, }: LumenStyleSheetProviderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LumenStyleSheetProvider.d.ts.map

package/dist/src/styles/provider/LumenStyleSheetProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LumenStyleSheetProvider.d.ts","sourceRoot":"","sources":["../../../../src/styles/provider/LumenStyleSheetProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AACpC,OAAO,EACL,eAAe,EAEhB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAiB,KAAK,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAI3E,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,WAAW,EAAE,eAAe,CAAC;CAC9B,CAAC;AAKF,eAAO,MAAM,yBAAyB;;;uGAA6B,CAAC;AAEpE,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAuBpE,CAAC"}
+{"version":3,"file":"LumenStyleSheetProvider.d.ts","sourceRoot":"","sources":["../../../../src/styles/provider/LumenStyleSheetProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EAEhB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAiB,KAAK,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAI3E,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,WAAW,EAAE,eAAe,CAAC;CAC9B,CAAC;AAKF,eAAO,MAAM,yBAAyB;;;uGAA6B,CAAC;AAEpE,eAAO,MAAM,uBAAuB,uCAIjC,4BAA4B,4CAmB9B,CAAC"}

package/dist/src/styles/theme/createStylesheetTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createStylesheetTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme/createStylesheetTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,KAAK,SAAS,UAAU,CAAC,UAAU,CAAC,EACpC,MAAM,GAAG,kBAAkB,CAAC,KAAK,CAAC,EAElC,WAAU,KAAmB,KAC5B,MAIF,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,GAChC,OAAO,UAAU,KAChB,oBASF,CAAC"}
+{"version":3,"file":"createStylesheetTheme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme/createStylesheetTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,KAAK,SAAS,UAAU,CAAC,UAAU,CAAC,EACpC,MAAM,yCAEI,KAAK,KACd,MAIF,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,UACzB,UAAU,KAChB,oBASF,CAAC"}

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

@@ -1,4 +1,5 @@
-import { PressableProps, PressableStateCallbackType, TextProps as RNTextProps, ViewProps, ViewStyle } from 'react-native';
+import { ComponentPropsWithRef } from 'react';
+import { PressableProps, PressableStateCallbackType, TextProps as RNTextProps, ViewProps, ViewStyle, Text as RNText, View as RNView, Pressable as RNPressable } from 'react-native';
 import { LumenTextStyle, LumenViewStyle } from './lx.types';
 import { LumenStyleSheetTheme } from './theme.types';
 type StyleFn = (state: PressableStateCallbackType) => ViewStyle;
@@ -14,7 +15,7 @@ export type StyledViewProps = {
      * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
      */
     lx?: LumenViewStyle;
-} & ViewProps;
+} & ViewProps & ComponentPropsWithRef<typeof RNView>;
 /**
  * Text API that extends lx style property
  */
@@ -27,7 +28,7 @@ export type StyledTextProps = {
      * Typography preset
      */
     typography?: keyof LumenStyleSheetTheme['typographies'];
-} & RNTextProps;
+} & RNTextProps & ComponentPropsWithRef<typeof RNText>;
 /**
  * Pressable API that extends lx style property
  */
@@ -36,6 +37,6 @@ export type StyledPressableProps = {
      * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
      */
     lx?: LumenViewStyle;
-} & ExtendRNPressableProps;
+} & ExtendRNPressableProps & ComponentPropsWithRef<typeof RNPressable>;
 export {};
 //# sourceMappingURL=factories.types.d.ts.map

package/dist/src/styles/types/factories.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"factories.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/factories.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,0BAA0B,EAC1B,SAAS,IAAI,WAAW,EACxB,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,OAAO,GACP,kBAAkB,EAAE,GACpB,IAAI,GACJ,SAAS,CAAC;AAEd,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAC,cAAc,CAAC,CAAC;CACzD,GAAG,WAAW,CAAC;AAEhB;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,sBAAsB,CAAC"}
+{"version":3,"file":"factories.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/types/factories.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACL,cAAc,EACd,0BAA0B,EAC1B,SAAS,IAAI,WAAW,EACxB,SAAS,EACT,SAAS,EACT,IAAI,IAAI,MAAM,EACd,IAAI,IAAI,MAAM,EACd,SAAS,IAAI,WAAW,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,OAAO,GACP,kBAAkB,EAAE,GACpB,IAAI,GACJ,SAAS,CAAC;AAEd,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,SAAS,GACX,qBAAqB,CAAC,OAAO,MAAM,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAC,cAAc,CAAC,CAAC;CACzD,GAAG,WAAW,GACb,qBAAqB,CAAC,OAAO,MAAM,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB,GAAG,sBAAsB,GACxB,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC"}

package/dist/tsconfig.lib.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.8.3"}
+{"version":"5.5.4"}

package/jest.setup.ts

@@ -1,4 +1,28 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
+// Fix for RN 0.79+ Animated API issues in test environment
+// The Animated module tries to connect to native views which don't exist in Jest
+import { Animated } from 'react-native';
+
+const originalTiming = Animated.timing;
+const originalSpring = Animated.spring;
+
+// Override Animated.timing to force useNativeDriver: false in tests
+(Animated as any).timing = (
+  value: Animated.Value | Animated.ValueXY,
+  config: Animated.TimingAnimationConfig,
+): Animated.CompositeAnimation => {
+  return originalTiming(value, { ...config, useNativeDriver: false });
+};
+
+// Override Animated.spring to force useNativeDriver: false in tests
+Animated.spring = (
+  value: Animated.Value | Animated.ValueXY,
+  config: Animated.SpringAnimationConfig,
+): Animated.CompositeAnimation => {
+  return originalSpring(value, { ...config, useNativeDriver: false });
+};
+
 // Mock @gorhom/bottom-sheet with more detailed prop tracking
 jest.mock('@gorhom/bottom-sheet', () => {
   const mockReact = jest.requireActual<typeof import('react')>('react');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.55",
+  "version": "0.0.57-0",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -27,15 +27,18 @@
     "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.16",
+    "@ledgerhq/lumen-utils-shared": "0.0.17-0",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
+  "devDependencies": {
+    "@types/react": "19.0.0"
+  },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.0.43",
-    "react": "~18.3.1",
-    "react-native": "~0.77.3",
+    "@ledgerhq/lumen-design-core": "0.0.44-0",
+    "react": "19.0.0",
+    "react-native": "~0.79.7",
     "react-native-reanimated": "^3.0.0",
     "react-native-safe-area-context": "^4.0.0 || ^5.0.0",
     "react-native-svg": "^15.0.0"

package/src/i18n/I18nProvider.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { i18n, switchLanguage } from './i18n';
 import { DEFAULT_LANGUAGE, type SupportedLocale } from './languages';
@@ -7,10 +7,10 @@ type I18nProviderProps = PropsWithChildren & {
   locale?: SupportedLocale;
 };
 
-export const I18nProvider: FC<I18nProviderProps> = ({
+export const I18nProvider = ({
   locale = DEFAULT_LANGUAGE,
   children,
-}) => {
+}: I18nProviderProps) => {
   useEffect(() => {
     switchLanguage(locale);
   }, [locale]);

package/src/lib/Components/AddressInput/AddressInput.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Text, TextInput } from 'react-native';
+import { Text } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
 import { QrCode } from '../../Symbols';
@@ -7,10 +6,13 @@ import { BaseInput } from '../BaseInput';
 import { InteractiveIcon } from '../InteractiveIcon';
 import { type AddressInputProps } from './types';
 
-export const AddressInput = React.forwardRef<
-  React.ElementRef<typeof TextInput>,
-  AddressInputProps
->(({ prefix = 'To:', suffix, onQrCodeClick, ...props }, ref) => {
+export const AddressInput = ({
+  prefix = 'To:',
+  suffix,
+  onQrCodeClick,
+  ref,
+  ...props
+}: AddressInputProps) => {
   const { t } = useCommonTranslation();
   const styles = useStyles();
 
@@ -40,7 +42,7 @@ export const AddressInput = React.forwardRef<
       {...props}
     />
   );
-});
+};
 
 const useStyles = () => {
   return useStyleSheet((t) => {

package/src/lib/Components/AmountInput/AmountInput.tsx

@@ -1,5 +1,5 @@
 import { getFontSize, textFormatter } from '@ledgerhq/lumen-utils-shared';
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Pressable, StyleSheet, TextInput } from 'react-native';
 import Animated, {
   Easing,
@@ -18,166 +18,160 @@ import { type AmountInputProps } from './types';
  * This is a controlled component - both `value` and `onChange` props are required.
  * The currency text can be positioned either on the left or right side of the input.
  */
-export const AmountInput = React.forwardRef<TextInput, AmountInputProps>(
-  (
-    {
-      lx = {},
-      style,
-      currencyText,
-      currencyPosition = 'left',
-      editable = true,
-      maxIntegerLength = 9,
-      maxDecimalLength = 9,
-      allowDecimals = true,
-      thousandsSeparator = true,
-      value,
-      onChangeText,
-      isInvalid = false,
-      ...props
-    },
-    ref,
-  ) => {
-    const inputRef = useRef<TextInput>(null);
-    const inputValue = String(value);
-    const [isFocused, setIsFocused] = useState(false);
-
-    const translateX = useSharedValue(0);
-    const animatedFontSize = useSharedValue(getFontSize(inputValue));
-    const caretOpacity = useSharedValue(0);
-
-    useImperativeHandle(ref, () => inputRef.current as TextInput, []);
-
-    const styles = useStyles({
-      hasValue: !!inputValue,
-      isEditable: editable,
-      isInvalid,
-    });
+export const AmountInput = ({
+  lx = {},
+  style,
+  currencyText,
+  currencyPosition = 'left',
+  editable = true,
+  maxIntegerLength = 9,
+  maxDecimalLength = 9,
+  allowDecimals = true,
+  thousandsSeparator = true,
+  value,
+  onChangeText,
+  isInvalid = false,
+  ref,
+  ...props
+}: AmountInputProps) => {
+  const inputRef = useRef<TextInput>(null);
+  const inputValue = String(value);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const translateX = useSharedValue(0);
+  const animatedFontSize = useSharedValue(getFontSize(inputValue));
+  const caretOpacity = useSharedValue(0);
+
+  useImperativeHandle(ref, () => inputRef.current as TextInput, []);
+
+  const styles = useStyles({
+    hasValue: !!inputValue,
+    isEditable: editable,
+    isInvalid,
+  });
+
+  const animatedInputStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: translateX.value }],
+      fontSize: animatedFontSize.value,
+      letterSpacing: 0,
+    }),
+    [translateX, animatedFontSize],
+  );
 
-    const animatedInputStyle = useAnimatedStyle(
-      () => ({
-        transform: [{ translateX: translateX.value }],
-        fontSize: animatedFontSize.value,
-        letterSpacing: 0,
-      }),
-      [translateX, animatedFontSize],
-    );
+  const animatedCurrencyStyle = useAnimatedStyle(
+    () => ({
+      fontSize: animatedFontSize.value,
+      letterSpacing: 0,
+    }),
+    [animatedFontSize],
+  );
 
-    const animatedCurrencyStyle = useAnimatedStyle(
-      () => ({
-        fontSize: animatedFontSize.value,
-        letterSpacing: 0,
-      }),
-      [animatedFontSize],
-    );
+  const animatedCaretStyle = useAnimatedStyle(
+    () => ({
+      opacity: caretOpacity.value,
+      height: animatedFontSize.value,
+    }),
+    [caretOpacity, animatedFontSize],
+  );
 
-    const animatedCaretStyle = useAnimatedStyle(
-      () => ({
-        opacity: caretOpacity.value,
-        height: animatedFontSize.value,
+  useEffect(() => {
+    const newSize = getFontSize(inputValue);
+
+    translateX.value = withSequence(
+      withTiming(4, { duration: 0 }),
+      withTiming(0, {
+        duration: 250,
+        easing: Easing.bezier(0.4, 0, 0.2, 1),
       }),
-      [caretOpacity, animatedFontSize],
     );
 
-    useEffect(() => {
-      const newSize = getFontSize(inputValue);
-
-      translateX.value = withSequence(
-        withTiming(4, { duration: 0 }),
-        withTiming(0, {
-          duration: 250,
-          easing: Easing.bezier(0.4, 0, 0.2, 1),
-        }),
+    animatedFontSize.value = withTiming(newSize, {
+      duration: 250,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+    });
+  }, [inputValue, animatedFontSize, translateX]);
+
+  useEffect(() => {
+    if (isFocused && editable) {
+      caretOpacity.value = withRepeat(
+        withSequence(
+          withTiming(1, { duration: 150, easing: Easing.ease }),
+          withTiming(1, { duration: 500 }),
+          withTiming(0, { duration: 150, easing: Easing.ease }),
+          withTiming(0, { duration: 500 }),
+        ),
+        -1,
+        false,
       );
+    } else {
+      caretOpacity.value = 0;
+    }
+  }, [isFocused, editable, caretOpacity]);
+
+  const handleChangeText = (text: string) => {
+    const formatted = textFormatter(text, {
+      allowDecimals,
+      thousandsSeparator,
+      maxIntegerLength,
+      maxDecimalLength,
+    });
 
-      animatedFontSize.value = withTiming(newSize, {
-        duration: 250,
-        easing: Easing.bezier(0.4, 0, 0.2, 1),
-      });
-    }, [inputValue, animatedFontSize, translateX]);
-
-    useEffect(() => {
-      if (isFocused && editable) {
-        caretOpacity.value = withRepeat(
-          withSequence(
-            withTiming(1, { duration: 150, easing: Easing.ease }),
-            withTiming(1, { duration: 500 }),
-            withTiming(0, { duration: 150, easing: Easing.ease }),
-            withTiming(0, { duration: 500 }),
-          ),
-          -1,
-          false,
-        );
-      } else {
-        caretOpacity.value = 0;
-      }
-    }, [isFocused, editable, caretOpacity]);
-
-    const handleChangeText = (text: string) => {
-      const formatted = textFormatter(text, {
-        allowDecimals,
-        thousandsSeparator,
-        maxIntegerLength,
-        maxDecimalLength,
-      });
-
-      onChangeText(formatted);
-    };
-
-    const CurrencyText = currencyText ? (
-      <Animated.Text style={[styles.currency, animatedCurrencyStyle]}>
-        {currencyText}
-      </Animated.Text>
-    ) : null;
-
-    const handlePress = () => {
-      if (editable) {
-        inputRef.current?.focus();
-      }
-    };
-
-    return (
-      <Box lx={lx} style={styles.container}>
-        {/** hidden text input because of flickering issue */}
-        <TextInput
-          ref={inputRef}
-          keyboardType='decimal-pad'
-          editable={editable}
-          value={inputValue}
-          onChangeText={handleChangeText}
-          onFocus={(e) => {
-            setIsFocused(true);
-            props.onFocus?.(e);
-          }}
-          onBlur={(e) => {
-            setIsFocused(false);
-            props.onBlur?.(e);
-          }}
-          style={styles.hiddenInput}
-          {...props}
-        />
-        <Pressable
-          onPress={handlePress}
-          style={styles.pressable}
-          accessibilityLabel={props.accessibilityLabel || 'Amount input'}
-        >
-          {currencyPosition === 'left' && CurrencyText}
-
-          {/** display text that mirrors the hidden input's value */}
-          <Animated.Text
-            style={[styles.displayText, animatedInputStyle, style]}
-          >
-            {inputValue || '0'}
-          </Animated.Text>
-
-          {/** custom caret */}
-          <Animated.View style={[styles.caret, animatedCaretStyle]} />
-
-          {currencyPosition === 'right' && CurrencyText}
-        </Pressable>
-      </Box>
-    );
-  },
-);
+    onChangeText(formatted);
+  };
+
+  const CurrencyText = currencyText ? (
+    <Animated.Text style={[styles.currency, animatedCurrencyStyle]}>
+      {currencyText}
+    </Animated.Text>
+  ) : null;
+
+  const handlePress = () => {
+    if (editable) {
+      inputRef.current?.focus();
+    }
+  };
+
+  return (
+    <Box lx={lx} style={styles.container}>
+      {/** hidden text input because of flickering issue */}
+      <TextInput
+        ref={inputRef}
+        keyboardType='decimal-pad'
+        editable={editable}
+        value={inputValue}
+        onChangeText={handleChangeText}
+        onFocus={(e) => {
+          setIsFocused(true);
+          props.onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocused(false);
+          props.onBlur?.(e);
+        }}
+        style={styles.hiddenInput}
+        {...props}
+      />
+      <Pressable
+        onPress={handlePress}
+        style={styles.pressable}
+        accessibilityLabel={props.accessibilityLabel || 'Amount input'}
+      >
+        {currencyPosition === 'left' && CurrencyText}
+
+        {/** display text that mirrors the hidden input's value */}
+        <Animated.Text style={[styles.displayText, animatedInputStyle, style]}>
+          {inputValue || '0'}
+        </Animated.Text>
+
+        {/** custom caret */}
+        <Animated.View style={[styles.caret, animatedCaretStyle]} />
+
+        {currencyPosition === 'right' && CurrencyText}
+      </Pressable>
+    </Box>
+  );
+};
 
 const useStyles = ({
   hasValue,

package/src/lib/Components/Banner/Banner.test.tsx

@@ -8,7 +8,7 @@ import { Banner } from './Banner';
 
 const { colors } = ledgerLiveThemes.dark;
 
-const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
     {children}
   </ThemeProvider>