CODEWITHSUNDEEP
react-nativereact-native-image
Somename
Somename

Reputation: 3434

Unable to add local image

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)

enter image description here

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

Upvotes: 0

Views: 70

Answers (2)

Shing Ho Tan
Shing Ho Tan

Reputation: 951

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.

Upvotes: 1

Tim
Tim

Reputation: 10709

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

Upvotes: 2

Related Questions