fix: animated-fab & animated-text ts issues (#4669)

Author: BogiKay

src/components/FAB/AnimatedFAB.tsx

@@ -17,6 +17,7 @@ import {
   StyleSheet,
   View,
   ViewStyle,
+  Text,
 } from 'react-native';
 
 import color from 'color';
@@ -231,7 +232,7 @@ const AnimatedFAB = ({
   const isAnimatedFromRight = animateFrom === 'right';
   const isIconStatic = iconMode === 'static';
   const { isRTL } = I18nManager;
-  const labelRef = React.useRef<HTMLElement | null>(null);
+  const labelRef = React.useRef<Text & HTMLElement>(null);
   const { current: visibility } = React.useRef<Animated.Value>(
     new Animated.Value(visible ? 1 : 0)
   );

src/components/Typography/AnimatedText.tsx

@@ -5,6 +5,7 @@ import {
   StyleProp,
   StyleSheet,
   TextStyle,
+  Text,
 } from 'react-native';
 
 import type { VariantProp } from './types';
@@ -40,57 +41,59 @@ type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
  *
  * @extends Text props https://reactnative.dev/docs/text#props
  */
-const AnimatedText = forwardRef(function AnimatedText(
-  { style, theme: themeOverrides, variant, ...rest }: Props<never>,
-  ref
-) {
-  const theme = useInternalTheme(themeOverrides);
-  const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
+const AnimatedText = forwardRef<Text & HTMLElement, Props<never>>(
+  function AnimatedText(
+    { style, theme: themeOverrides, variant, ...rest },
+    ref
+  ) {
+    const theme = useInternalTheme(themeOverrides);
+    const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
 
-  if (theme.isV3 && variant) {
-    const font = theme.fonts[variant];
-    if (typeof font !== 'object') {
-      throw new Error(
-        `Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
-          theme.fonts
-        ).join(', ')}.`
+    if (theme.isV3 && variant) {
+      const font = theme.fonts[variant];
+      if (typeof font !== 'object') {
+        throw new Error(
+          `Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
+            theme.fonts
+          ).join(', ')}.`
+        );
+      }
+
+      return (
+        <Animated.Text
+          ref={ref}
+          {...rest}
+          style={[
+            font,
+            styles.text,
+            { writingDirection, color: theme.colors.onSurface },
+            style,
+          ]}
+        />
+      );
+    } else {
+      const font = !theme.isV3 ? theme.fonts.regular : theme.fonts.bodyMedium;
+      const textStyle = {
+        ...font,
+        color: theme.isV3 ? theme.colors.onSurface : theme.colors.text,
+      };
+      return (
+        <Animated.Text
+          ref={ref}
+          {...rest}
+          style={[
+            styles.text,
+            textStyle,
+            {
+              writingDirection,
+            },
+            style,
+          ]}
+        />
       );
     }
-
-    return (
-      <Animated.Text
-        ref={ref}
-        {...rest}
-        style={[
-          font,
-          styles.text,
-          { writingDirection, color: theme.colors.onSurface },
-          style,
-        ]}
-      />
-    );
-  } else {
-    const font = !theme.isV3 ? theme.fonts.regular : theme.fonts.bodyMedium;
-    const textStyle = {
-      ...font,
-      color: theme.isV3 ? theme.colors.onSurface : theme.colors.text,
-    };
-    return (
-      <Animated.Text
-        ref={ref}
-        {...rest}
-        style={[
-          styles.text,
-          textStyle,
-          {
-            writingDirection,
-          },
-          style,
-        ]}
-      />
-    );
   }
-});
+);
 
 const styles = StyleSheet.create({
   text: {