i am new to react native and i am trying to make a chat app layout.

As you can see in screenshot that i have attached, i want text box to take as much space as the text in it. For example, if i send 'Hi', it should only be stretched as much space 'Hi' needs. If i send a long text, then it should stretch and take as much space as that text is. Like it happens in almost all texting apps.

The text box code is:

<TouchableOpacity>
        <View style={styles.containerSent}>
          <View style={{flex: 3}}>
            <Text style={styles.message}>{item.message}</Text>
          </View>
          <View style={{flex: 1}}>
            <Image
              source={require('../assets/images/check.png')}
              style={styles.image}
            />
            <Text style={{textAlign: 'right', color: 'white'}}>
              {msToTime(item.timestamp)}
            </Text>
          </View>
        </View>
      </TouchableOpacity>

Stylesheet

  containerSent: {
    flex: 1,
    maxWidth: '70%',
    // minWidth: '30%',
    marginTop: 20,
    paddingTop: 20,
    paddingHorizontal: 10,
    paddingBottom: 10,
    borderWidth: 1,
    backgroundColor: '#6F2232',
    borderRadius: 20,
    alignSelf: 'flex-end',
    flexDirection: 'row',
    justifyContent: 'space-between',
    // justifyContent: 'flex-end',
  },

  message: {
    color: 'white',
    fontSize: 15,
    fontWeight: 'bold',
    textAlign: 'left',
    alignSelf: 'stretch',
  },

  image: {
    width: 15,
    height: 15,
    marginLeft: 20,
    marginBottom: 5,
    alignSelf: 'flex-end',
  },