How I can create background to image

i053322 — Wed, 13 Jul 2022 06:02:15 +0000

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

})

How to create layout editor

i053322 — Sun, 03 Jul 2022 13:29:29 +0000

Do you know on tool that do layout editor for react-native something like https://builderx.io/ ?
The idea that you can drag and drop and then you will get a layout

How to create Cube

i053322 — Wed, 11 May 2022 11:11:41 +0000

I want to create cube in react native for android and IOS , I saw this blog
https://medium.com/the-react-native-log/implementing-cube-in-react-native-cb61b9a7e8c3

is it something new to create cube ?
I want also to create cube with different images or number and have the option when I press on it to change the cube

DEV Community: i053322

How I can create background to image

How to create layout editor

How to create Cube