Animated.Text Background Color does not Interpolate :<

[oiver555]

When I try to do a interpolate on the backgroundColor of a Text component, it doesn't work. My code looks something like this...

const TextSelectWord = () => {
   const rSelectedWordStyle = useAnimatedStyle(() => {
       return {
           backgroundColor: interpolateColor(
               selectSwitch.value,
               [0, 1],
               ["transparent", "rgba(246,128,252,1)"]
           ),
       };
   }, []);

 useEffect(() => {
       if (props.isSelected) {
           selectSwitch.value = withTiming(1)
       }
   }, [props.isSelected])

   return (
       <Animated.Text
           style={rSelectedWordStyle}
           onTouchStart={props.onPress}
       >
           {' '}{props.word}{' '}
       </Animated.Text>
   );
};

const TextSelect = () => {
   return (
    <Text style={{textAlign:"justify"}}>
           {props.paragraph.split(' ').map((word) => (
               <TextSelectWord              
                   onPress={HandleSelections}
                   word={word}
                   isSelected={selectedWordIndex.includes(wordIndex)}                
               />
           ))}
     </Text>
   );
};

A lot of things have been abstracted away, but basically, When a user selects two words in my <TextSelect /> it will select all the words in between those 2 selected words. I thought it would be nice to have the highlight effect be gradual versus abrupt, and here is where the issue lies.

My setup may look complicated, but if you go ahead and just try to interpolateColor the backgroundColor of a <Text/> I'm sure you will see a problem.

Now, You may say, just wrap the <TextSelectWord/> component in a <View/> and animate the background color on the <View/> instead. That does work, however, wrapping each of my <TextSelectWord/> components in a <View/> alters the flow of text in other words my paragraph which has the textAlign set to justify, Will no longer be justified because the <View/>s are negating that from happening. This is why I want to animate the background color on the <Text/> components directly so that I can maintain the textAlign justified setting.

[MatiPl01]

Hey @oiver555!

I am very sorry for the late response. Indeed, I was able to reproduce the problem and it looks like you described. We will have to look for a valid solution on our side and fix the issue in the library itself but I can provide you a workaround.

Workaround

Better solution (New Architecture only)

You can add just one layout prop to the animated style passed to the Animated.Text component, e.g. top property. What's important, this prop must be updated every time the backgroundColor is changed, so you can simply assign selectSwitch.value to the top property. The top property will not affect the text layout at all but it will trigger another path of updates in reanimated, thanks to which the change of the background color will be smooth.

This is the modified animated style:

const rSelectedWordStyle = useAnimatedStyle(() => {
  return {
    backgroundColor: interpolateColor(
      selectSwitch.value,
      [0, 1],
      ['transparent', 'rgba(246,128,252,1)'],
    ),
    // Add this prop (can be also other layout prop that has no effect on the 
    // text layout like `left` / `right` / `bottom`/ etc.)
    top: selectSwitch.value, 
  };
}, []);

Worse solution (Old & New Architectures)

Instead of wrapping your word Text components in another Text component, you can use the View component as the parent of word components with flexDirection: 'row' and flexWrap: 'wrap' properties, but you won't be able to achieve the same result as with textAlign: 'justify'. The text will be left-aligned and you won't be able to align it in the same way as you need.

Explanation

Reanimated uses 2 different ways to update style properties:

1. using synchronous updates on the UI thread - this is used for all non-layout props, like colors, transformations, etc. (props that don't affect layout of other views)
2. by committing changes on the native thread - this is used for all layout props which trigger recalculation of the layout (e.g. width, height, top, left, etc.)

For some reason, when you nest Text component within another Text component, updates made on the UI thread aren't enough and changes have to be committed on the native thread. On the New Architecture (Fabric) we simply commit all changes on the native thread if at least one layout prop is updated, thus the first workaround works. On the Old Architecture (Paper), though, we always update layout props and non-layout props separately, thus the first workaround doesn't work.

Hope it helps. Let me know if you have more questions.