I am making a react native chat app and can't figure out how to limit the length of the chat bubble before wrapping it to a new line

I am making a chat app with React Native using TS and NativeWind. I am trying to make the chat bubble's wrap after a certain length but whenever I put a fixed width on the chat bubble it always colors the whole width of the bubble, even if it isn't fill out.

Here you can see even if I don't use the whole length of the chat bubble the bubble is filled orange. I want the bubble to only be as big as it needs to fit the user content & email but wrap the text after I certain length.

import { View, Text } from "react-native";
import { Avatar, Divider } from "react-native-paper";
import { COLORS } from "../../constants";
import { styled } from "nativewind";

const StyledDivier = styled(Divider);

type Props = {
  text: string;
  email: string;
  date: string;
  time: string;
};

function UserSent({ text, email, date, time }: Props) {
  return (
    <View className="flex flex-row items-start justify-end w-full py-4 space-x-2 ">
      <View className="flex flex-col   space-y-1 pt-1 ">
        <Text className="text-xs text-foxGray">{date}</Text>
        <Text className="text-xs text-foxGray">{time}</Text>
      </View>

      <View className="flex flex-row">
        <View className=" p-2 rounded-md bg-foxOrange mr-2 w-60">
          <Text className="text-sm text-foxGray text-right ">{email}</Text>
          <StyledDivier className=" bg-foxGray" />
          <Text className="text-foxWhite pt-2 text-right ">{text}</Text>
        </View>

        <Avatar.Icon
          size={40}
          icon="account"
          color={COLORS.light.foxWhite}
          style=
        />
      </View>
    </View>
  );
}

export default UserSent;

Can someone help me change or rewrite my code so the bubble only takes up as much space as it needs but wraps after it reaches a certain length.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/8jUhGH5