How do I pass a prop that contains the image location to Image Source when rendering many images in-CodePudding

My code below accepts inputPhotoLocation as a prop. inputPhotoLocation contains a list of image source locations (which have been retrieved from a file containing a list). I need a way to pass these to my Image source. I have been able to pass the locations directly in the text box with success.

function SelectionBoxComponent({inputPhotoLocation, inputText, onPress}) {                                       
    return (

        <TouchableWithoutFeedback onPress={onPress}> 
            <View style={styles.box}>
                <View style={styles.circularPhoto}>
                    <Image style={{height:"100%", width:"100%", borderRadius:70, 
                      borderWidth:0, source={require(inputPhotoLocation)}}} ></Image> //here i need to insert the list items
                     </View>
                
                <AppText style={styles.textStyle} onPress={console.log(inputText)} > 
                    {inputText}</AppText>
            

             </View>
        </TouchableWithoutFeedback>

My inputPhotoLocation prop contains this

./assets/GroupImages/football.jpg

../assets/GroupImages/valley.jpg

../assets/GroupImages/usa.jpg

../assets/GroupImages/playstation.jpg

../assets/GroupImages/pc.jpg

I am able to pass these locations as text outputs successfully. However, I cant figure out how to pass these in the Image Source. Thanks!

CodePudding user response：

  <Image
    style={{
      height: '100%',
      width: '100%',
      borderRadius: 70,
      borderWidth: 0,
      source={require(inputPhotoLocation) // The source prop is not a style prop
    }}></Image>



  <Image
    source={require(inputPhotoLocation) // The source prop is Image prop
    style={{
      height: '100%',
      width: '100%',
      borderRadius: 70,
      borderWidth: 0
    }}></Image>