How I can create background to image

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,
    }

})