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;