Skip to content

Instantly share code, notes, and snippets.

@josenaves
Created March 15, 2018 19:07
Show Gist options
  • Save josenaves/9eb1ba79b64618da126a7915689b0cd0 to your computer and use it in GitHub Desktop.
Save josenaves/9eb1ba79b64618da126a7915689b0cd0 to your computer and use it in GitHub Desktop.
Example on how to create a image background with another layer on top
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ImageBackground, Platform } from 'react-native';
const backgroundImage = require('../assets/background.png')
const iconCamera = require('../assets/camera_alt_white_48x48.png')
const styles = StyleSheet.create({
addImage: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
height: 200,
backgroundColor: 'black'
},
backgroundImage: {
flex: 1,
width: null,
height: null
},
overlay: {
justifyContent: 'center',
alignItems: 'center',
marginTop: 30
},
addImageText: {
fontSize: 15,
textAlign: 'center',
marginTop: 5,
color: 'white'
},
addImageDesc: {
fontSize: 15,
textAlign: 'center',
marginTop: 10,
marginLeft: 37,
marginRight: 37,
paddingLeft: 25,
paddingRight: 25,
color: '#9EA0A1'
}
});
export default AddImageView = (props) => {
return (
<View style={ styles.addImage }>
<ImageBackground
blurRadius={ Platform.OS === 'ios' ? 10 : 5 }
style={ styles.backgroundImage }
source={ backgroundImage }
>
<View style={ styles.overlay }>
<Image source={ iconCamera } />
<Text style={ styles.addImageText }>ADD A STORY PHOTO</Text>
<Text style={ styles.addImageDesc }>
Please upload photos in landscape orientation that are at least 704 pixels wide and 376 pixels tall.
</Text>
</View>
</ImageBackground>
</View>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment