React Native Image non-looping animated gif lost when application sent to background

Question

As can be seen from this snack, I embedded 2 identical animated gifs back to back.

The first one that loops for ever functions as expected.

But the second, the non-looping animated gif is lost when the application is sent to background and retrieved back to foreground.

Is there anything that can be done to avoid this?

import testAniGif from '../assets/test.gif';
import testAniGif2 from '../assets/test2.gif';

export default function AssetExample() {
  return (
    <View>
      <Image style={styles.logo} source={testAniGif} />
      <Image style={styles.logo} source={testAniGif2} />
    </View>
  );
}

score 0 · Answer 1 · answered Jun 02 '20 at 11:56

I think you just need to implement proper syntax for Image attribute

<Image style={styles.logo} source={require(testAniGif)} />
<Image style={styles.logo} source={require(testAniGif2)} />

Have a look Image syntax https://reactnative.dev/docs/image

For better understanding you can follow this answer too : https://stackoverflow.com/a/40717686/3840093

React Native Image non-looping animated gif lost when application sent to background

1 Answers1