Created
April 28, 2017 17:29
-
-
Save thekevinscott/114fc100d47f68b5bd805c9fd32c35c0 to your computer and use it in GitHub Desktop.
Example of absolutely positioning a background <Image /> with React Native
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| import { | |
| AppRegistry, | |
| Image, | |
| View, | |
| Text, | |
| } from 'react-native'; | |
| const remote = 'https://s15.postimg.org/tw2qkvmcb/400px.png'; | |
| export default class BackgroundImage extends Component { | |
| render() { | |
| const resizeMode = 'center'; | |
| const text = 'I am some centered text'; | |
| return ( | |
| <View | |
| style={{ | |
| flex: 1, | |
| backgroundColor: '#eee', | |
| }} | |
| > | |
| <View | |
| style={{ | |
| position: 'absolute', | |
| top: 0, | |
| left: 0, | |
| width: '100%', | |
| height: '100%', | |
| }} | |
| > | |
| <Image | |
| style={{ | |
| flex: 1, | |
| resizeMode, | |
| }} | |
| source={{ uri: remote }} | |
| /> | |
| </View> | |
| <View | |
| style={{ | |
| flex: 1, | |
| backgroundColor: 'transparent', | |
| justifyContent: 'center', | |
| }} | |
| > | |
| <Text | |
| style={{ | |
| textAlign: 'center', | |
| fontSize: 40, | |
| }} | |
| > | |
| {text} | |
| </Text> | |
| </View> | |
| </View> | |
| ); | |
| } | |
| } | |
| AppRegistry.registerComponent('BackgroundImage', () => BackgroundImage); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment