how to make image show fade in and out with pure react native? (with function component)

Question

i want to make sequential images that fade in and out repeated.
i seen this sometimes in web.
i want to implement this in app with react-native.
but i feel difficult when make this with pure react native.
and it seems impossible with ImageBackground Component even if i use image show background of component.
when i use multiple ImageBackground, my react app cannot show image correctly.
my image seems to be hidden. and i feel difficult when i design animation with complex delay.
how to make this?

Answer 1

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!