import * as React from 'react'; import { Text, View, StyleSheet, Image, ActivityIndicator } from 'react-native'; const url = 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png'; const placeholder = require('./assets/snack-icon.png'); export default class App extends React.Component { constructor(props) { super(props); this.state = { imageSource: null, }; } componentDidMount() { this.getImageSource(url); } getImageSource = url => { if (url) { this.setState({ imageSource: { uri: url } }); } else { this.setState({ imageSource: placeholder }); } }; onErrorImage = () => { this.setState({ imageSource: placeholder }); }; render() { return ( <View style={styles.container}> <Image source={this.state.imageSource} style={{ width: 100, height: 100 }} onError={this.onErrorImage} /> </View> ); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter