1

I am a little new to the animation world of react-native. I am working on a react native application where I would like to show animation around a button. The animation should consist of two separate lines moving around the button border. How do we do that using hooks infinitely?

import React, {useEffect, useState} from 'react';
import {View, Animated} from 'react-native';
const App = () => {
    const value = useState(new Animated.ValueXY({x: 0, y: 0}))[0];
    const moveLine = () => {
         Animated.timing(value, {
         toValue: {x: 100, y: 100},
         duration: 1000,
         useNativeDriver: false,
     }).start();
    };
    useEffect(() => {
        moveLine();
     });
    return (
<Animated.View>
  <View style={{width: 100, height: 100, backgroundColor: 'red'}}></View>
</Animated.View>
 );
};

export default App;

Jamal Butt
  • 73
  • 4

0 Answers0