React-native Text auto width on each line of text

Question

I am trying to have a 2 text elements inside of a view. I need the first element to have a numberOfLines of 2 and for the 2nd element to be able to fit next to the first element on the first and second lines, but if the first element takes up its maximum of 2 lines, then the 2nd element will move to line 3.

Examples

Example

Other Example

Code

// using nativewind similar to tailwindcss (does not impact issue)
<View className="flex-wrap flex flex-row mx-1">
    <Text className="text-white text-xs flex-nowrap bg-red-500" numberOfLines={ 2 } style={{ fontFamily: "Roboto-Medium" }}>
        { text }
    </Text>
    <TextGradient className="z-10 border-1 border-red-600" fontSize={ 12 } lineHeight={ 16 } fontFamily="Roboto-Medium" angle={ 45 } colors={ [ "#00F0FF", "#00A3FF" ] }>{ /* returns svg text */ }
        { otherText }
    </TextGradient>
</View>

I have already tried many other suggested answers, including many from react-native-auto-width-by-text-inside, but all of the solutions I tried from here only work on a single line of text and do not work for multiline.

I have also tried replacing the View component with a Text component, but that results in the first Text element not being able to have a set numberOfLines