Animating width of <Animated.View> inside <Text> works on iOS but not Android

[ishaangandhi]

Hi there, I'm trying to animate an Animated.View inside a <Text> container. This works on iOS, but not on Android.

What can I do to fix this?

The idea is the component has text before a blank, a blank that changes size, and texta after the blank.

Basic version:

export const C = forwardRef((props: Props, ref: React.Ref<Animated.View>) => {
    const { beforeBlank, afterBlank, blankLength } = props;

    const blankStyle = useAnimatedStyle(() => {
      const width = interpolate(
        props.animationProgress.value,
        [0, 1],
        [20 * blankLength, props.selectedChipWidth.value]
      );

      return {
        width,
        opacity: 1 - props.animationProgress.value,
        borderBottomWidth: 2,
        overflow: "hidden",
      };
    });
    const textStyle: StyleProp<TextStyle> = styles.promptText;
    return (
      <Text style={[textStyle, styles.promptContainer]}>
        {beforeBlank}
        <Animated.View style={blankStyle} ref={ref} />
        {afterBlank}
      </Text>
    );
  });

[MatiPl01]

Hey @ishaangandhi!

I think this is not an issue with react-native-reanimated. Also the plain View component behaves differently on Android than on iOS when rendered inside the Text component.

In general, Android doesn't support rendering View components nested inside Text components. This is not a good pattern, so you shouldn't nest View inside Text (but you can do the other way round and nest Text inside View). You can also nest Text inside Text and it should work fine on Android as well.

---

Proposed solution

If you want to render Text components separated by the blank space, you can just wrap your Text parts inside a View with flexDirection: 'row', like in this example:

return (
  <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
    <Text>{beforeBlank}</Text>
    <Animated.View style={blankStyle} ref={ref} />
    <Text>{afterBlank}</Text>
  </View>
);

But it is probably not what you want as it won't work properly with multiline text that has to be wrapped. Adding flexWrap: 'wrap' doesn't help:

without flexWrap: 'wrap'	with flexWrap: 'wrap'
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-09-17.at.17.04.57.mp4	Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-09-17.at.17.05.15.mp4