So i have this code, i want to change this cause this is buggy (if i run the code or refresh the page the function will running all over and repeat so many zoomIn zoomOut function
Is it possible to run zoomIn zoomOut function without timeout / with callback perhaps ?
export default function LoadingScreen () {
useEffect(()=>{
zoomIn()
}
const zoomIn = () => {
setTimeout(zoomOut,800)
Animated.parallel([
Animated.timing(zoomWidth, {
toValue: windowWidth/2.5,
duration: 800,
}),
Animated.timing(zoomHeight, {
toValue: windowHeight/4,
duration: 800,
})
]).start(() => {
// callback
});
};
const zoomOut = () => {
setTimeout(zoomIn,800)
Animated.parallel([
Animated.timing(zoomWidth, {
toValue: windowWidth/5,
duration: 800,
}),
Animated.timing(zoomHeight, {
toValue: windowHeight/8,
duration: 800,
})
]).start(() => {
// callback
});
};
return(
<View style={styles.loadingContainer}>
<View>
<View style={styles.imageContainer}>
<Animated. Image source={require('../assets/images/ARIcrop.png')}
style={{ width:zoomWidth , height:zoomHeight }}/>
</View>
</View>
</View>
}