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.

Tim · Accepted Answer · 2019-12-11 13:56:12Z

2

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>
        );
}

answered Dec 11, 2019 at 13:56

Tim

10.7k4 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shing Ho Tan · Accepted Answer · 2019-12-11 14:16:52Z

1

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.

answered Dec 11, 2019 at 14:16

Shing Ho Tan

95111 silver badges32 bronze badges

Collectives™ on Stack Overflow

Unable to add local image

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related