-3

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
eeshankeni
  • 240
  • 3
  • 11

1 Answers1

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



      <Image
        {/* The source prop is Image prop */}
        source={require(inputPhotoLocation)
        style={{
          height: '100%',
          width: '100%',
          borderRadius: 70,
          borderWidth: 0
        }}></Image>
Michael Bahl
  • 2,941
  • 1
  • 13
  • 16
  • This seems to be unbalanced - one extra "`{`" for each block (also indicated by the weird syntax highlighting). Shouldn't `{require(inputPhotoLocation)` be `{require(inputPhotoLocation)}` (an extra "`}`" at the end)? (This should be independent of the [comment character sequence requirements](https://stackoverflow.com/a/30766542).) – Peter Mortensen Oct 27 '21 at 22:14
  • To be clear, the main concern is the syntax highlighting on this Stack Overflow page. Either the code should be fixed or the syntax highlighting should be turned off (e.g. with [code fence](https://meta.stackexchange.com/questions/184108/what-is-syntax-highlighting-and-how-does-it-wok/184109#184109) \`\`\`lang-none ... \`\`\`). – Peter Mortensen Oct 27 '21 at 22:39
  • Is the sample code here valid? – Peter Mortensen Nov 07 '21 at 15:03
  • Yes, the lower code is valid. I post both variants to make it clear what is wrong and which line cause the issue. – Michael Bahl Nov 07 '21 at 15:21
  • But the original code is not unbalanced - it is `{{...source={require(inputPhotoLocation)}}}` (not `{{...source={require(inputPhotoLocation)}}`) – Peter Mortensen Nov 08 '21 at 23:47
  • Can you add some explanation to your answer? It *seems* like you have removed one `}` compared to the source code example in the question (near "`source={require`"). Maybe there is a good reason for making the code invalid (the code in the question is not invalid in this respect), but it ought to be explained. – Peter Mortensen Nov 08 '21 at 23:53
  • Or in other words, why would invalid code/markup be part of an answer to the question? – Peter Mortensen Nov 08 '21 at 23:59