I added a picture and I want to add a background to the image in a fixed size.

import React, {useState} from 'react';

import { Alert, View, Image, StyleSheet , Text , Button, ImageBackground} from 'react-native'

function Test1(props) {

    return (
        <View style={styles.container}>
            <View style={styles.container2}>
            <ImageBackground source={require('../assets/plus.jpeg')} resizeMode="cover" style={styles.image4}>
               
            </ImageBackground>  
            </View>
        </View>
        
    );
}

export default Test1;

const styles = StyleSheet.create({
    image4:{
        //  flex: 1,
          justifyContent: "center",
          width: 100,
          height: 100,
  },
    text4: {
        color: "white",
        fontSize: 42,
        lineHeight: 84,
        fontWeight: "bold",
        textAlign: "center",
        backgroundColor: "#000000c0"
      },
    container2: {
        flex: 1,
    },
  
    container: {
        flex: 1,
        backgroundColor: '#a9a9a9',
        flexDirection:'column',
        alignItems:'center',
        paddingTop: 100,
      }
    

})

This is the result that I want ( - )

I want to add another black square to the image ( the default background is gray ) In my case the default image is with white background( and not green but it is not matter ) I want to add another black square to the image

CodePudding user response：

If you want something like Create New, you can do like this. You need to add height and width in ImageBackground. You cannot use flex:1 as it wont work.

    <TouchableOpacity>
     <ImageBackground source={YOUR SOURCE} style={{width:100,height:100,alignItems:'center', justifyContent:'center', flexDirection:'column'}}>
     <Image source={YOUR OTHER SOURCE} style={{width:30,height:30}} />
     <Text>Send</Text>
    </ImageBackground>
    </TouchableOpacity>