Load random image react native

Question

I try to randomly load a gif from an array. I tried several ways to do it but none works. I either get an error message or the image just won't appear.

Version 1 (result: image doesn't appear):

var myPix = new Array("../assets/class/emojis/correct/clapping_hands.gif", "../assets/class/emojis/correct/beaming_face_with_smiling_eyes.gif","../assets/class/emojis/correct/confetti_ball.gif","../assets/class/emojis/correct/flexed_biceps.gif");

var randomNum = Math.floor(Math.random() * myPix.length);
var theImage= myPix[randomNum];


  return (
      <View>
        <Image
          style={styles.gifAnimation}
        source={theImage}
/>
</View>

Version 2 (result: "invalid call")

var myPix = new Array("../assets/class/emojis/correct/clapping_hands.gif", "../assets/class/emojis/correct/beaming_face_with_smiling_eyes.gif","../assets/class/emojis/correct/confetti_ball.gif","../assets/class/emojis/correct/flexed_biceps.gif");

var randomNum = Math.floor(Math.random() * myPix.length);
var theImage= myPix[randomNum];


  return (
      <View>
        <Image
          style={styles.gifAnimation}
        source={require(myPix[randomNum])}
/>
</View>

Version 3 (result: image won't load):

  const [theImage, setTheImage] = useState();
React.useEffect(() => {
    var myPix = new Array(
      "../assets/class/emojis/correct/clapping_hands.gif",
      "../assets/class/emojis/correct/beaming_face_with_smiling_eyes.gif",
      "../assets/class/emojis/correct/confetti_ball.gif",
      "../assets/class/emojis/correct/flexed_biceps.gif",

    );
    var randomNum = Math.floor(Math.random() * myPix.length);
    var x = myPix[randomNum];
    setTheImage_Correct(x);

source={image_correct

Any thoughts?

score 1 · Answer 1 · answered Sep 22 '22 at 23:02

Make sure you have implemented the right environment to display GIF as explained below:

For RN < 0.60

By default the Gif images are not supported in android react native app. You need to set use Fresco to display the gif images. The code:

Edit your android/app/build.gradle file and add the following code:

dependencies: {

...

compile 'com.facebook.fresco:fresco:1.+'

// For animated GIF support
compile 'com.facebook.fresco:animated-gif:1.+'

// For WebP support, including animated WebP
compile 'com.facebook.fresco:animated-webp:1.+'
compile 'com.facebook.fresco:webpsupport:1.+'

}

then you need to bundle the app again, You can display the gif images in two ways like this.

1-> <Image 
        source={require('./../images/load.gif')}  
        style={{width: 100, height: 100 }}
    />

2-> <Image 
        source={{uri: 'http://www.clicktorelease.com/code/gif/1.gif'}}  
        style={{width: 100, height:100 }} 
    />
    enter code here

For RN >= 0.60

implementation 'com.facebook.fresco:animated-gif:1.12.0' //instead of

implementation 'com.facebook.fresco:animated-gif:2.0.0'   //use

As explained in this issue: How do I display an animated gif in React Native?

Thank you very much for the swift reply! As long as I don't try to randomly show gifs as shown above everything works fine. So I can load and show a gif animation but I can not make it load a random gif from my array. Do you have any suggestions? — Twos22, Sep 23 '22 at 06:29
I see! Have you tried updating the "key" prop whenever a new random gif was selected? Here is a way, add this or something similar for the Image component: key={new date()} or key={theImage+new Date()} — Azzam Michel, Sep 23 '22 at 13:27

score 0 · Answer 2 · answered Dec 04 '22 at 21:20

I went back to this issue and found out why the images did not load. This is the original code. When using the code, the Gifs simply would not load:

var myPix = new Array(
"../assets/class/emojis/correct/clapping_hands.gif", "../assets/class/emojis/correct/beaming_face_with_smiling_eyes.gif",
"../assets/class/emojis/correct/confetti_ball.gif",
"../assets/class/emojis/correct/flexed_biceps.gif");

var randomNum = Math.floor(Math.random() * myPix.length);
var theImage= myPix[randomNum];


  return (
      <View>
        <Image
          style={styles.gifAnimation}
        source={theImage}
/>
</View>

I simply added "require()" for the image sources and it worked well:

var myPix = new Array(
require("../assets/class/emojis/correct/clapping_hands.gif"), require("../assets/class/emojis/correct/beaming_face_with_smiling_eyes.gif"),
require("../assets/class/emojis/correct/confetti_ball.gif"),
require("../assets/class/emojis/correct/flexed_biceps.gif");

var randomNum = Math.floor(Math.random() * myPix.length);
var theImage= myPix[randomNum];


  return (
      <View>
        <Image
          style={styles.gifAnimation}
        source={theImage}
/>
</View>

Load random image react native

2 Answers2