Unable to add local image

Question

Unable to add a local image.

I tried:

const MyApp = () => {
    return(
        <Text>
            Some Text
        </Text>
        <Image source={require('./story1.jpg')} />
        )
}

Also tried:

const MyApp = () => {
    return(
        <Text>
            Some Text
        </Text>
        <Image source={require('./story1.jpg')}> </Image>
        )
}

Error: Error: TransformError SyntaxError: ----------/src/Components/Story1.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (39:2)

Why am I getting this error? What am I doing wrong? The image is in the same folder where this component is present.

score 2 · Accepted Answer · answered Dec 11 '19 at 13:56

You need to wrap your <Text> and <Image> Component in a parent <View> or Fragment. In addition you need to add width and height to your image. See example below.

Example:

const MyApp = () => {
    return(
        <View>
           <Text>
            Some Text
           </Text>
           <Image source={require('./story1.jpg')} style={{width: 100, height: 100}}/>
        </View>
        );
}

score 1 · Answer 2 · answered Dec 11 '19 at 14:16

const MyApp = () => {
    return(
        <View>
          <Text>
            Some Text
          </Text>
          <Image source={require('./story1.jpg')} />
        </View>
        )
}

You should wrap the Text and Image component in one component like View. Because there should be only one root component. And also you should close Image component like not Because there is no child of component.

Unable to add local image

2 Answers2