0
I want to have one raw with 4 images. under each image I want to present short text I have a generic background. In each image I want to have Square with different color
Problems:
how I can add the backgroundColor color that will be with padding and also in the right size
import React from 'react';
import { View, Image, StyleSheet , Text } from 'react-native'
function Settings(props) {
return (
<View style={styles.container}>
<View style={[styles.imageView,styles.smallBackground]}>
<Image
style={styles.smallImage}
source={require('../assets/DiceSize.png')}
></Image>
<View>
<Text style={styles.text} >
S
</Text>
</View>
</View>
<View style={[styles.imageView,styles.meduimBackground]}>
<Image
style={[styles.meduimImage]}
source={require('../assets/DiceSize.png')}
></Image>
<View>
<Text style={styles.text}>
M
</Text>
</View>
</View>
<View style={[styles.imageView,styles.largeBackground]}>
<Image
style={styles.largeImage}
source={require('../assets/DiceSize.png')}
></Image>
<View>
<Text style={styles.text}>
L
</Text>
</View>
</View>
<View style={[styles.imageView,styles.xlargeBackground]}>
<Image
style={styles.xlargeImage}
source={require('../assets/DiceSize.png')}
></Image>
<View>
<Text style={styles.text}>
XL
</Text>
</View>
</View>
</View>
);
}
export default Settings;
const styles = StyleSheet.create({
smallBackground: {
backgroundColor: 'black',
width: 80,
height: 110,
},
meduimBackground: {
backgroundColor: 'black',
width: 80,
height: 110,
},
largeBackground: {
backgroundColor: 'black',
width: 80,
height: 110,
},
xlargeBackground: {
backgroundColor: 'black',
width: 90,
height: 110,
},
text:{
padding: 20,
color: 'white',
},
imageView:{
paddingLeft: 30,
},
container: {
flex: 1,
backgroundColor: '#a9a9a9',
flexDirection:'row',
alignItems:'center',
// justifyContent:'center',
},
smallImage:{
width: 45,
height: 46,
},
meduimImage:{
width: 52,
height: 53,
},
largeImage: {
width: 60,
height: 61,
},
xlargeImage: {
width: 68,
height: 70,
}
})
Top comments (0)