CODEWITHSUNDEEP
reactjsreact-nativenpm
Jose Cabrera Zuniga
Jose Cabrera Zuniga

Reputation: 2627

Images on react native component

I created a react native component and package it for npm following:

https://www.freecodecamp.org/news/how-to-publish-a-react-native-component-to-npm-its-easier-than-you-think-51f6ae1ef850/

After this I created a new react native app and installed my new component using npm pack and npm i ...

However, every time I use Image from within this component using

    const myImg = require(imagesFolder + 'Happy.jpg')
    const caller = this.props.caller;


 return(
    <View style={{height: '100%', alignItems: 'center', backgroundColor: '#ffc600'}}>

            <Text></Text>

            <Image source={myImg}
                style={{width:150, height:150, borderWidth: 1, borderColor: 'red', resizeMode: 'contain'}}            
            />

            <Text></Text>

I can not see the image and the compiler does not report that it could not find the image. Any ideas? Is there a special location for image files that need to placed at?

Thanks

Upvotes: 0

Views: 133

Answers (2)

Wuilmer Medrano
Wuilmer Medrano

Reputation: 209

<Image
    style={styles.tinyLogo}
    source={require('@expo/snack-static/react-native-logo.png')}

For more infoenter link description here

Upvotes: 1

Lautaro Zarandon
Lautaro Zarandon

Reputation: 290

Try it

    <Image
      source={myImg}
      style={{ height: 350, width: WIDTH }}
      resizeMethod="resize"
      resizeMode="contain"
    />

Upvotes: 1

Related Questions