[PoC] feat: support for animating text inside Animated.Text

apps/common-app/src/apps/reanimated/examples/AmountExample.tsx

@@ -1,27 +1,20 @@
 import React, { useCallback } from 'react';
-import { Button, StyleSheet, TextInput, View } from 'react-native';
+import { Button, StyleSheet, View } from 'react-native';
 import Animated, {
   useAnimatedProps,
-  useDerivedValue,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
 
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
-
 const DELTAS = [-100, -10, -1, 1, 10, 100];
 
 export default function AmountExample() {
   const ref = React.useRef(10);
 
   const sv = useSharedValue(ref.current);
 
-  const text = useDerivedValue(() => {
-    return `$${sv.value.toFixed(2)}`;
-  });
-
   const animatedProps = useAnimatedProps(() => {
-    return { text: text.value, defaultValue: text.value };
+    return { text: `$${sv.value.toFixed(2)}` };
   });
 
   const setValue = useCallback(
@@ -36,12 +29,7 @@ export default function AmountExample() {
 
   return (
     <View style={styles.container}>
-      <AnimatedTextInput
-        animatedProps={animatedProps}
-        style={styles.text}
-        editable={false}
-        underlineColorAndroid="transparent"
-      />
+      <Animated.Text animatedProps={animatedProps} style={styles.text} />
       <View style={styles.row}>
         {DELTAS.map((delta) => (
           <Button
@@ -65,7 +53,6 @@ const styles = StyleSheet.create({
     fontSize: 80,
     fontWeight: 'bold',
     fontVariant: ['tabular-nums'],
-    textAlign: 'center',
   },
   row: {
     flexDirection: 'row',

apps/common-app/src/apps/reanimated/examples/AnimatedKeyboardExample.tsx

@@ -15,8 +15,6 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated';
 
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
-
 const KeyboardStateNames = {
   [KeyboardState.UNKNOWN]: 'UNKNOWN',
   [KeyboardState.OPENING]: 'OPENING',
@@ -57,13 +55,15 @@ export default function AnimatedKeyboardExample() {
   });
 
   const animatedHeightProps = useAnimatedProps(() => {
-    const text = `Keyboard height: ${keyboard.height.value}`;
-    return { text, defaultValue: text };
+    return {
+      text: `Keyboard height: ${keyboard.height.value}`,
+    };
   });
 
   const animatedStateProps = useAnimatedProps(() => {
-    const text = `Keyboard state: ${KeyboardStateNames[keyboard.state.value]} - ${keyboard.state.value}`;
-    return { text, defaultValue: text };
+    return {
+      text: `Keyboard state: ${KeyboardStateNames[keyboard.state.value]} - ${keyboard.state.value}`,
+    };
   });
 
   return (
@@ -98,14 +98,12 @@ export default function AnimatedKeyboardExample() {
         </TouchableOpacity>
       </Animated.View>
       <View style={styles.infoContainer}>
-        <AnimatedTextInput
+        <Animated.Text
           style={styles.infoText}
-          editable={false}
           animatedProps={animatedHeightProps}
         />
-        <AnimatedTextInput
+        <Animated.Text
           style={styles.infoText}
-          editable={false}
           animatedProps={animatedStateProps}
         />
       </View>
@@ -127,7 +125,6 @@ const styles = StyleSheet.create({
   },
   infoText: {
     fontWeight: '700',
-    width: '100%',
   },
   accessoryBar: {
     position: 'absolute',

apps/common-app/src/apps/reanimated/examples/AnimatedTextExample.tsx

@@ -0,0 +1,216 @@
+import React, { useEffect, useState } from 'react';
+import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+// TODO: add support for the following syntax: <Animated.Text>{sharedValue}</Animated.Text>
+// TODO: add support for the following syntax: <Animated.Text>Before {sharedValue} After</Animated.Text>
+// TODO: add TypeScript validation that allows <Animated.Text> to either have children or have `text` animated prop
+// TODO: add gauges example
+// TODO: sync `text` prop updates back to React as `children` prop
+// TODO: add docs about Animated.Text
+// TODO: convert docs examples from AnimatedTextInput to Animated.Text
+
+export default function AnimatedTextExample() {
+  const sv = useSharedValue(0);
+
+  useEffect(() => {
+    sv.value = 0;
+    sv.value = withRepeat(withTiming(1, { duration: 1000 }), -1, true);
+  }, [sv]);
+
+  const textSv = useDerivedValue(() => {
+    return String(Math.round(sv.value * 100));
+  });
+
+  const stringAnimatedProps = useAnimatedProps(() => {
+    return {
+      text: `${Math.round(sv.value * 100)}%`, // string
+    };
+  });
+
+  const numberAnimatedProps = useAnimatedProps(() => {
+    return {
+      text: Math.round(sv.value * 100), // number
+    };
+  });
+
+  const emptyAnimatedProps = useAnimatedProps(() => {
+    return {
+      text: sv.value > 0.5 ? 'Blink' : '', // empty string sometimes
+    };
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      fontSize: interpolate(sv.value, [0, 1], [10, 20]),
+    };
+  });
+
+  const [show, setShow] = useState(false);
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      {/* Animated text is an inline prop */}
+      {/* TODO: fix this example not working after fast refresh */}
+      <View style={styles.row}>
+        <Text>Before</Text>
+        <Animated.Text
+          text={textSv}
+          style={[styles.tabularNums, styles.color0]}
+        />
+        <Text>After</Text>
+      </View>
+
+      {/* Animated text is a string */}
+      <View style={styles.row}>
+        <Text>Before</Text>
+        <Animated.Text
+          animatedProps={stringAnimatedProps}
+          style={[styles.tabularNums, styles.color1]}
+        />
+        <Text>After</Text>
+      </View>
+
+      {/* Animated text is a number */}
+      <View style={styles.row}>
+        <Text>Before</Text>
+        <Animated.Text
+          animatedProps={numberAnimatedProps}
+          style={[styles.tabularNums, styles.color2]}
+        />
+        <Text>After</Text>
+      </View>
+
+      {/* Animated text is an empty string during first render */}
+      <View style={styles.row}>
+        <Text>Before</Text>
+        <Animated.Text
+          animatedProps={emptyAnimatedProps}
+          style={[styles.tabularNums, styles.color3]}
+        />
+        <Text>After</Text>
+      </View>
+
+      {/* With animated style */}
+      <View style={styles.row}>
+        <Text>Before</Text>
+        <Animated.Text
+          animatedProps={numberAnimatedProps}
+          style={[styles.tabularNums, styles.color4, animatedStyle]}
+        />
+        <Text>After</Text>
+      </View>
+
+      {/* Inside another Text component */}
+      <View style={styles.row}>
+        <Text style={styles.italic}>
+          Before
+          <Animated.Text
+            animatedProps={numberAnimatedProps}
+            style={[styles.tabularNums, styles.color5]}
+          />
+          After
+        </Text>
+      </View>
+
+      {/* Inside another Animated.Text */}
+      <View style={styles.row}>
+        <Animated.Text style={styles.italic}>
+          Before
+          <Animated.Text
+            animatedProps={numberAnimatedProps}
+            style={[styles.tabularNums, styles.color6]}
+          />
+          After
+        </Animated.Text>
+      </View>
+
+      {/* Inside another Animated.Text with animatedStyle */}
+      <View style={styles.row}>
+        <Animated.Text style={[styles.italic, animatedStyle]}>
+          Before
+          <Animated.Text
+            animatedProps={numberAnimatedProps}
+            style={[styles.tabularNums, styles.color7]}
+          />
+          After
+        </Animated.Text>
+      </View>
+
+      {/* Non-empty Animated.Text */}
+      <View style={styles.row}>
+        <Animated.Text>Lorem ipsum</Animated.Text>
+      </View>
+
+      {/* Non-empty Animated.Text with animated style */}
+      <View style={styles.row}>
+        <Animated.Text style={animatedStyle}>Lorem ipsum</Animated.Text>
+      </View>
+
+      {/* Non-empty Animated.Text with animated text (throws an error) */}
+      <View style={styles.row}>
+        {show && (
+          // @ts-expect-error We don't want to accept text in animatedProps when children are present
+          <Animated.Text animatedProps={stringAnimatedProps}>
+            Lorem ipsum
+          </Animated.Text>
+        )}
+        <Button
+          title="Render non-empty Animated.Text with animated text (throws an error)"
+          onPress={() => setShow(true)}
+        />
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    marginBottom: 30,
+  },
+  tabularNums: {
+    fontVariant: ['tabular-nums'],
+  },
+  italic: {
+    fontStyle: 'italic',
+  },
+  color0: {
+    backgroundColor: 'burlywood',
+  },
+  color1: {
+    backgroundColor: 'pink',
+  },
+  color2: {
+    backgroundColor: 'peachpuff',
+  },
+  color3: {
+    backgroundColor: 'khaki',
+  },
+  color4: {
+    backgroundColor: 'palegreen',
+  },
+  color5: {
+    backgroundColor: 'lightskyblue',
+  },
+  color6: {
+    backgroundColor: 'lightsteelblue',
+  },
+  color7: {
+    backgroundColor: 'thistle',
+  },
+});

apps/common-app/src/apps/reanimated/examples/AnimatedTextInputExample.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, TextInput, View } from 'react-native';
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+// NOTE: It is recommended to use <Animated.Text> component instead of AnimatedTextInput for text animations.
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+export default function AnimatedTextInputExample() {
+  const sv = useSharedValue(0);
+
+  useEffect(() => {
+    sv.value = 0;
+    sv.value = withRepeat(withTiming(100, { duration: 1500 }), -1, true);
+  }, [sv]);
+
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      text: `${Math.round(sv.value)}`,
+      defaultValue: `${Math.round(sv.value)}`,
+    };
+  });
+
+  return (
+    <View style={styles.container}>
+      <AnimatedTextInput
+        animatedProps={animatedProps}
+        style={styles.input}
+        editable={false}
+        underlineColorAndroid="transparent"
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  input: {
+    fontSize: 100,
+    textAlign: 'center',
+    fontVariant: ['tabular-nums'],
+  },
+});