The moment my text got bigger, my image flows out of its container - React Native

Question

enter image description here

In my project I am building a Cart like component that will be rendered on the screen. Like the image given, the moment my text got larger, it pushes away my image and makes it overflow out of its parent container.

I am using this properties for styling :

import React from "react";
import { TouchableOpacity, View, Text, StyleSheet, Image } from "react-native";

const OptionComponent = (props) => {
  return (
    <TouchableOpacity style={styles.mainContainer} onPress={props.onPress}>
      <View style={styles.element1}>
        <Image
          source={require("../assets/images/unnamed.png")}
          style={styles.image1}
        ></Image>
        <Text style={styles.text}>{props.text}</Text>
      </View>
      <View style={styles.element2}>
        <Image
          source={require("../assets/images/unnamed.png")}
          style={styles.image2}
        ></Image>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    width: "42%",
    height: 100,
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "green",
    borderRadius: 20,
  },
  element1: {
    justifyContent: "space-between",
    padding: "7%",
  },

  image1: {
    width: 35,
    height: 35,
    borderRadius: 10,
  },

  element2: {
    alignItems: "center",
    justifyContent: "center",
  },

  image2: {
    width: 50,
    height: 50,
  },

  text: {
    color: "white",
  },
});

export default OptionComponent;

thanks in advance!