fix(AnimatedText): improve animation handling & fix Android font weights (#1590)

Author: lourou

components/animated-text-carousel.tsx

@@ -1,7 +1,6 @@
 import { AnimatedCenter } from "@/design-system/Center";
 import { AnimatableText } from "@/design-system/Text/AnimatedText";
 import { ITextProps } from "@/design-system/Text/Text.props";
-import { debugBorder } from "@/utils/debug-style";
 import React, { memo, useEffect, useRef } from "react";
 import {
   cancelAnimation,

design-system/Text/AnimatedText.tsx

@@ -1,10 +1,16 @@
 import { useAppTheme } from "@/theme/useAppTheme";
-import { TextProps as RNTextProps } from "react-native";
+import {
+  TextProps as RNTextProps,
+  TextStyle,
+  Platform,
+  StyleProp,
+} from "react-native";
 import AnimateableText from "react-native-animateable-text";
 import Animated, {
   AnimatedProps,
   SharedValue,
   useAnimatedProps,
+  useAnimatedStyle,
 } from "react-native-reanimated";
 import { Text } from "./Text";
 import { ITextProps } from "./Text.props";
@@ -16,30 +22,52 @@ export type IAnimatedTextProps = AnimatedProps<ITextProps>;
 export const AnimatedText = Animated.createAnimatedComponent(Text);
 
 // A specialized text component that efficiently updates text content using SharedValue
-// Optimized for frequent text changes without causing re-renders
-// Uses react-native-animateable-text under the hood for better performance
-export type IAnimatableTextProps = RNTextProps & {
+
+// We omit 'style' from RNTextProps and explicitly redefine it to ensure proper type checking
+// with Reanimated's StyleProp<TextStyle>. This prevents type conflicts between React Native's
+// default style types and Reanimated's animated style types.
+export type IAnimatableTextProps = Omit<RNTextProps, "style"> & {
   text: SharedValue<string>;
+  // Required to specify text styling - will be merged with theme's default text color
+  style: StyleProp<TextStyle>;
 };
 
 export function AnimatableText({ style, text, ...rest }: IAnimatableTextProps) {
   const { theme } = useAppTheme();
 
-  const animatedProps = useAnimatedProps(() => {
-    return {
-      text: text.value,
+  const animatedStyle = useAnimatedStyle(() => {
+    const baseStyle: TextStyle = {
+      color: theme.colors.text.primary,
     };
+
+    // Special handling for Android font weight due to a known issue in react-native-animateable-text
+    // where Android requires fontWeight to be a string, while the style type expects a number
+    // This workaround ensures consistent font weight behavior across platforms
+    if (
+      Platform.OS === "android" &&
+      style &&
+      typeof style === "object" &&
+      !Array.isArray(style) &&
+      "fontWeight" in style
+    ) {
+      baseStyle.fontWeight = String(
+        style.fontWeight
+      ) as TextStyle["fontWeight"];
+    } else if (style && typeof style === "object" && !Array.isArray(style)) {
+      Object.assign(baseStyle, style);
+    }
+
+    return baseStyle;
   });
 
+  const animatedProps = useAnimatedProps(() => ({
+    text: text.value,
+  }));
+
   return (
     <AnimateableText
       animatedProps={animatedProps}
-      style={[
-        {
-          color: theme.colors.text.primary,
-        },
-        style,
-      ]}
+      style={animatedStyle}
       {...rest}
     />
   );