render() { return ( <View style={styles.container}> <Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}> </Image> <View style={styles.overlay} /> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, width: null, height: null, }, imageContainer: { flex: 1, width: null, height: null, }, overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(69,85,117,0.7)', } })
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