thanks for ans! react native animated : why my loop image animation is worked like a weird?

i have successfully created App behavior i want. so i want to share this

we have to know this

1. absolute position
2. useref
3. animated

first, save and declare images

const MainScreen = () => {
  const imageSources = [
    require('../assets/image/meadow.jpg'),
    require('../assets/image/mountain.jpg'),
    require('../assets/image/sea.jpg'),
    require('../assets/image/desert.jpg'),
  ]

  return (
    <View style={{ styles.yourLayout, }}>

      
   
      <YourComponents />
    </View>
  );
};



export default MainScreen;

second, make custom image component

import React, {useRef,useEffect} from "react";
import { Animated,  } from 'react-native';


interface BackgroundImageProps{
    delay: number,
    imageSource: any,
}

const CustomImage= ({delay, imageSource}:BackgroundImageProps) => {

    const fadeAni = useRef<Animated.Value>(new Animated.Value(0)).current;
    //opacity 1: visible, 0: invisible
  
    useEffect(() => {
        //make fadein <-> fadeout loop
    }, [fadeAni])


    return (
        <Animated.Image style={{
            opacity: fadeAni,
            position: 'absolute',
            left: 0,
            top: 0,
            width: '100%',
            height: '100%',
        }} source={imageSource} />
    );
}
/*

*/


export default BackgroundImage;

third, make animation
we want to start animation when as soon as component rendered, we use useEfecct
since other image to be invisible when other image visible, we design the animation sequence(delay,loop). so we can start each loop for each images.
when animated value is increased to 1,
show image 2secs
when animated value is decreased to 0,
wait for other image.

Animated.sequence([
            Animated.delay(delay),
            Animated.loop(
                Animated.sequence([
                    Animated.timing(fadeAni, {
                        toValue: 1,
                        duration: 1000,
                        useNativeDriver: true,
                    }),
                    Animated.delay(2000),
                    Animated.timing(fadeAni, {
                        toValue: 0,
                        duration: 1000,
                        useNativeDriver: true,
                    }),
                    Animated.delay(8000),
                ]),
            )
        ]).start()

we must add animated value dependency in useEffect. (like the code) if you want to know more click the url in my question.

apply

const MainScreen = () => {
  const imageSources = [
    require('../assets/image/meadow.jpg'),
    require('../assets/image/mountain.jpg'),
    require('../assets/image/sea.jpg'),
    require('../assets/image/desert.jpg'),
  ]

  return (
    <View style={{ styles.yourLayout, }}>
      <BackgroundImage imageSource={imageSources[0]} delay={0} />
      <BackgroundImage imageSource={imageSources[1]} delay={3000} />
      <BackgroundImage imageSource={imageSources[2]} delay={6000} />
      <BackgroundImage imageSource={imageSources[3]} delay={9000} />
      <YourComponents />
    </View>
  );
};

backgroundimage component’s position is ‘absolute’ so layout between yourcomponent and view is free from backgroundimage.

please advise about my mistake and better component!