React Native LOOPING animation ANIMATED

56 Views Asked by At

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>

}
0

There are 0 best solutions below