Nested text can not be styled with reanimated - backgroundColor, color and etc

[Strate]

Description

Hello, I'm trying to stylize <Text> which is nested to other <Text>, but in this case styling is not applied.

Steps To Reproduce

See snack example

Expected behavior

Nested text's backgroundColor, color and other styles which can be applied to nested text support animation

Actual behavior

Nested text's backgroundColor, color and other styles which can be applied to nested text don't support animation

Snack or minimal code example

https://snack.expo.io/ZrEZ2NTsc

Package versions

• React:
• React Native: 0.63.3
• React Native Reanimated: 1.13.0

[hoangtrucit]

Why do you want to put the Animated.Text in Animated.Text

<Animated.Text style={{ marginTop: 20 }}>
        <Animated.Text
          style={{
            fontSize: 20,
            backgroundColor: Animated.interpolateColors(pressedState, {
              inputRange: [0, 1],
              outputColorRange: ['transparent', '#bbb'],
            }),
          }}>
          This text can not be animated
        </Animated.Text>
</Animated.Text>

I think we can resolve it with View

<View style={{ marginTop: 20 }}>
        <Animated.Text
          style={{
            fontSize: 20,
            backgroundColor: Animated.interpolateColors(pressedState, {
              inputRange: [0, 1],
              outputColorRange: ['transparent', '#bbb'],
            }),
          }}>
          This text can not be animated
        </Animated.Text>
</View>

[Strate]

@hoangtrucit I do it because I want to stylize only part of the text (in real life structure look like this: <Text><Text>this need to be stylized</Text><Text> and this is not</Text></Text>

[piaskowyk]

Hey @Strate
I investigated this issue. If you write somethings like this:

<Text>
  string1
  <Text>
    string2
  </Text>
</Text>

The React Native change the structure to:

<RCTTextView>
  string1
  <RCTVirtualText>
    string2
  </RCTVirtualText>
</RCTTextView>

The RCTTextView is an native component but the RCTVirtualText is not and that is the reason why you can’t animate inner <Text> because in Reanimated you can animate only native nodes on layout. This can be a feature to implement in future, but now you could use solution by @hoangtrucit - change parent Text component to View

// this
<Text>
  <Text>this need to be stylized</Text>
  <Text> and this is not</Text>
</Text>

// to
<View>
  <Text>this need to be stylized</Text>
  <Text> and this is not</Text>
</View>

[yuriyyakym]

@piaskowyk This issue should be re-opened, because using View wrapper does not work with diacritics that are treated as a separate symbol:

2024-01-09.09.57.47.mp4

[yuriyyakym]

I've got it working by wrapping Animated.Text into an additional Text:

<Text style={styles.word}>
  {value.slice(0, highlightSymbolAt)}
  <Text>
    <Animated.Text style={[animatedStyle]}>{value[highlightSymbolAt]}</Animated.Text>
  </Text>
  {value.slice(highlightSymbolAt + 1)}
</Text>

2024-01-09.12.26.04.mp4

[mlazari]

It would be nice if this could work. I don't think it is possible to show text inline like this without nesting a Text in another Text:

Changing the wrapper to a View (and thus not using nested Text) fixes the animations, but the animated text is not inline anymore with the rest of the text:

[audrius-savickas]

@mlazari have you anyone else figured out if this is possible? @yuriyyakym for me your solution doesn't work, nested text still isn't animatable

[mlazari]

@audrius-savickas I have not.

[biw]

It might be worth opening this issue back up since this is no longer a note about this in the 3.x / 4.x docs 😄