I was wondering why my image is not showing. What I want is for my image to be in the background with my two buttons on the bottom, over the image. I am using react native, with the IDE 'Deco' for apps. Right now there is no image showing at all:
import React, { Component } from 'react';
import { Button,Alert, TouchableOpacity,Image, Dimensions } from 'react-native'
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
class Project extends Component {
render() {
return (
<View style={{backgroundColor: '#375D81', flex: 1}}>
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/f/f0/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006_edit_1.jpg'}}/>
<View style = {styles.container}>
<TouchableOpacity style = {styles.buttonText1} onPress={() => { Alert.alert('You tapped the button!')}}>
<Text style={styles.text}>
Button 1
</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonText2} onPress={() => { Alert.alert('You tapped the button!')}}>
<Text style= {styles.text}>
Button 2
</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
main: {
backgroundColor: 'blue'
},
text: {
alignItems : 'center'
},
container: {
alignItems: 'center',
flex: 1,
},
buttonText1: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: '#C4D7ED',
alignItems: 'center',
position: 'absolute',
bottom: 0,
width: Dimensions.get('window').width / 2,
height: Dimensions.get('window').height / 8,
left: 0,
},
buttonText2: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: '#C4D7ED',
alignItems: 'center',
position: 'absolute',
bottom: 0,
width: Dimensions.get('window').width / 2,
height: Dimensions.get('window').height / 8,
right: 0,
}
});
AppRegistry.registerComponent('Project', () => Project);
make some width and height for the image..
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
resizeMode={'cover'} // cover or contain its upto you view look
/>
Here i mentioned width and height... you can make it '100%' its upto you...