How to play multiple sprite sheet one after another?

[NainalChauhan]

I want to play different sprite sheet when first sprite animation finishes. I have tried setting source as a state but it doesn't work. Is there any other way to do this.

[mileung]

Use multiple SpriteSheet components and lay them on top of each other with absolute positioning.

[elisechant]

@NainalChauhan yes, the code would look something like this:

import React, { useRef, useState } from 'react';
import { View, Button } from 'react-native';
import SpriteSheet from "rn-sprite-sheet";

const MyView = () => {
  const elSlider1 = useRef(null);
  const elSlider2 = useRef(null);
  const [slider1IsVisible, setSlider1IsVisible] = useState(true);
  return (
    <View>
      <View style={{position:'relative'}}>
        <View style={{position:'absolute', opacity: slider1IsVisible ? 1 : 0}}>
          <SpriteSheet ref={elSlider1} source={Sprite1} animations={{anim1: []}} />
        </View>
        <View style={{position:'absolute'}}>
          <SpriteSheet ref={elSlider2} source={Sprite2} animations={{anim2: []}} />
        </View>
      </View>
      <Button onPress={() => {
        if (elSlider1.current) {
          elSlider1.current.play({ 
            type: 'anim1', 
            onFinish: () => {
              setSlider1IsVisible(false);
              elSlider2.current.play({type: 'anim2' });
            }
          });
        }
      }} title={'Play 1 then 2'} />
    </View>
  )
};

[JeffGuKang]

Or you can recreate SpriteSheet instance at the specific timing to use useMemo. It is simple and neat way.