I have an array of images and I want to have an image display randomly on the screen when I press a button, but I want to also have text display underneath the image. Each image I want to have its own respective text underneath. The full image array I have consists of over 200 images.

This is an example of what my code looks like: (The bold italicized portion is where I think the problem is)

import React, { useState, useEffect } from 'react';
import { Text, SafeAreaView, StyleSheet, ScrollView, Pressable, View, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

**//images
const images2 = [
  require('./Characters/image1.jpg'),
  require('./Characters/image2.webp'),
  require('./Characters/image3.webp'),
];**

const stylesIQ = StyleSheet.create({
    BLKButton:
    style={
      backgroundColor: 'black',
      width: 300,
      height: 50,
      borderRadius: 10,
      padding: 10,
      justifyContent: 'center',
      alignSelf: 'center',
      marginTop: 15,
    },
    BGColor:
    style={
      flex: 1,
      backgroundColor: '#0096FF',
    },
    Image:{
      height: 400,
      width: 300,
      marginTop: 10,
      marginBottom: 20,
      alignSelf: 'center',
      resizeMode: 'contain'
    },
  });

//IQScreen functionality
const IQScreen = () => {
  const navigation = useNavigation();

  const [randomImage, setRandomImage] = useState(null);
const [imageGenerated, setImageGenerated] = useState(false);

const generateRandomImage = () => {
  if (!imageGenerated) {
    const randomIndex = Math.floor(Math.random() * images2.length);
    setRandomImage(images2[randomIndex]);
    setImageGenerated(true);
  }
};

//Screen Setup
return (
  <View  style={[stylesIQ.BGColor]}>
    <Text style={{ fontSize: 35, marginTop: 10,  alignSelf: 'center'}}>Intelligence</Text>
    <Image
      source={randomImage}
      style={stylesIQ.Image}
    />
    <View style={[stylesIQ.BLKButton]}>
    <Pressable style={stylesIQ.BLKButton} onPress={generateRandomImage}>
      <Text style={{ fontSize: 20, color: 'white', alignSelf: 'center' }}>
          Choose Your Intellect
      </Text>
      </Pressable>
    </View>
    <View style={[stylesIQ.BLKButton]}>
    <Pressable style={stylesIQ.BLKButton} onPress={() => navigation.navigate('Strength')}>
      <Text style={{ fontSize: 20, color: 'white', alignSelf: 'center' }}>
          Next Trait: Strength
      </Text>
      </Pressable>
    </View>
  </View>
  );
}

export default IQScreen;

I tried making URI keys, but it still doesn’t work

const character1 = require('./Characters/image1.jpg');
const character2 = require('./Characters/image2.webp');
const character3 = require('./Characters/image3.webp');

// Refactored images array
const images2 = [
  { uri: character1, text: 'Character 1' },
  { uri: character2, text: 'Character 2' },
  { uri: character3, text: 'Character 3' },
];

I also tried this approach:

   {uri: require('./Characters/image1.jpg'), name = 'Character1'}