Tutorial by Examples

You're going to have to import Image from the react-native package like so then use it: import { Image } from 'react'; <Image source={{uri: 'https://image-souce.com/awesomeImage'}} /> You can also use a local image with a slightly different syntax but same logic like so: import { Image...

class ImageExample extends Component { render() { return ( <View> <Image style={{width: 30, height: 30}} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /> </View> ); } }

<Image style={[this.props.imageStyle]} source={this.props.imagePath ? this.props.imagePath : require('../theme/images/resource.png')} /> If the path is available in imagePath then it will be assigned to source else the default image path will be assigned.

let imagePath = require("../../assets/list.png"); <Image style={{height: 50, width: 50}} source={imagePath} /> From external resource: <Image style={{height: 50, width: 50}} source={{uri: userData.image}} />

<Image resizeMode="contain" style={{height: 100, width: 100}} source={require('../assets/image.png')} /> Try also cover, stretch, repeat and center parameters.