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 can't figure out how to pass these in the image source.