Why is my image making it so that my button is always at the top part of it? React native

Question

I'm doing a little project and here is my issue: with this code :

   <View style={{ flex: 3, backgroundColor: "brown" }}>
        <View
          style={[
            styles.container,
            {
              flexDirection: "row",
              justifyContent: "center",
              backgroundColor: "yellow",
              flex: 1,
              zIndex: 1,
            },
          ]}
        >
          <View style={{ flex: 0.15, backgroundColor: "blue" }}></View>
          <View
            style={{ flex: 2, backgroundColor: "pink", flexDirection: "col" }}
          >
            <View style={{ flex: 0.55, backgroundColor: "blue" }}></View>
            <TouchableOpacity>
              <View style={styles.button11}>
                <Text style={styles.text3}>Découvrir</Text>
              </View>
            </TouchableOpacity>
          </View>
          <View style={{ flex: 0.25, backgroundColor: "blue" }}></View>
          <View style={{ flex: 2, backgroundColor: "violet" }}>
            <TouchableOpacity>
              <View style={styles.button11}>
                <Text style={styles.text3}>Nos Servives</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
        {/*
        <Image
          source={img_back}
          style={{
            width: "100%",
            height: 500,
          }}
        />
        */}
      </View>

I have my button that is near the center of my blue case. Howether, if I delete the {/* ... */} and thus add my image, the button is always going on the top part of the image(inside of it, but the top of the button touch the top of the image). How do I made it so that the button can be elsewhere? My issue is on both buttons. Thanks a lot for you response/comments.

The styles are :

  container: {
    justifyContent: "center",
    marginTop: 12,
  },
button11: {
    backgroundColor: "#26AA90",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 3,
    height: 45,
    padding: 15,
    width: 165,
  },
text3: {
    fontSize: 17,
    textAlign: "center",
    fontWeight: 400,
    color: "#FFFFFF",
    width: 100,
  },

Answer 1

You need to use the ImageBackground for each TouchableOpacity (note: you can set the background color at transparent in order to see your image)