Dynamic Text Background Highlight Animation with Duration in React Native

Question

I have stuck at this point to dynamically highlight some bunch of text in some duration. Like for example, I have this text :

Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.

I want the functionality to highlight this text background in a duration of 180sec.

What I did is this:

Video link

The logic I used is that I created two states s1, s2 with s1 as an empty string, and s2 with the whole content. Stating timer, I am removing n number of characters from s2 and adding the same n number of characters in s1, and showing s1 and s2 together inside <Text>.

This feature is working but not correctly animating. I want some CSS transition-type smooth highlight animation for this feature to highlight this text completely in some duration.

Can anyone please help me to implement this feature using React Native Animations API?

Answer 1

To dynamically start a new animation, you need a condition. You can use "Animated" from react-native. Instead of state, set a ref, and change the ref value.

import { Animated } from "react-native";

// this value can be animated one value to another
const animationRef = useRef<Animated.Value>(new Animated.Value(0));



if(condition){
    // pass array of animations
    Animated.sequence([
        Animated.timing(animationRef.current, {
            toValue: 1,
            // set the duration 
            duration: 500,
            useNativeDriver: false
        }),
        // delay is optional
        Animated.delay(1000),
        Animated.timing(animationRef.current, {
            toValue: 0,
            duration: 500,
          // useNativeDriver:true, might not work with the all properties that you need to animate. true might improve animation performance

            useNativeDriver: false
        })
    ]).start();

 }

Now in jsx you need to set your component:

   // Touchable opacity cannot be animated
    <TouchableOpacity style={styles.item}>
        <Animated.View
            style={[
                styles.itemBackground,
                {
                    backgroundColor: animationRef.current.interpolate({
                        inputRange: [0, 1],
                        // if value is 0 color:black, value is 1 color:white
                        outputRange: [colors.black, colors.white]
                    })
                }
            ]}
        />
   </TouchableOpacity>

Animated.View position should be absolute. Keep the dynamic part of CSS in the component, but you can keep other CSS in a different file.

 //styles.itemBackground:

 itemBackground: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }