title: How do I display a random image retrieved from an array in react native
body: <p>I am trying to randomly display images from a local file that have been stored in an array in a Card component which is then rendered in the App, the root of the application.</p>
  
  <p>Here is the Images file containing an array of images in the same directory.</p>
  
  <pre><code>const woolyImages = [
    require('images/wooly1'),
    require('images/wooly2'),
    require('images/wooly3'),
    require('images/wooly4'),
    require('images/wooly5'),
  ];
  
  export default woolyImages;
  </code></pre>
  
  <p>Here is the Card component where I attempt to pick a random image from the array and display it using the Image component via 'source'.</p>
  
  <pre><code>import React from 'react';
  import {Image, View, StyleSheet} from 'react-native';
  import woolyImages from '../images/Images';
  
  function Card() {
    const randomImage =
      woolyImages[Math.floor(Math.random() * woolyImages.length)];
    console.log(randomImage);
  
    return (
      &lt;View style={styles.cardContainer}&gt;
        &lt;Image source={randomImage} /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    cardContainer: {
      width: '50%',
      height: '35%',
      backgroundColor: 'pink',
    },
  });
  
  export default Card;
  </code></pre>
  
  <p>(I inserted the pink background so I could be sure it was rendering in the view. It is.)</p>
  
  <p>Finally, here is the root of the application where I render the card.</p>
  
  <pre><code>import React from 'react';
  import {View, StyleSheet} from 'react-native';
  import Header from './components/Header';
  import Card from './components/Card';
  import GenerateWoolyButton from './components/GenerateWoolyButton';
  
  function App() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Header /&gt;
        &lt;Card /&gt;
        &lt;GenerateWoolyButton style={styles.button} /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      justifyContent: 'flex-start',
      alignItems: 'center',
      flex: 1,
    },
  });
  
  export default App;
  </code></pre>
  
  <p>I am getting the below error.<a href="https://i.stack.imgur.com/XpUjI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XpUjI.png" alt="enter image description here"></a></p>
  
  <p>Can anyone please tell me how to display a randomly generated picture in the Card component and display it in the root of my application? Thank you.</p>