Expo/React Native: `align-self: stretch` on a `flex-direction: column` child changes the height due to text wrapping but it isn't recaclulated

I have a React Native component in my Expo project which is behaving weirdly. I will post some code snippets here. FYI I am using Nativewind classes for CSS, and they are being applied properly.

I have an outer View component being returned by a React function:

<View className={`min-w-full flex flex-col items-stretch justify-start gap-0 rounded-xl overflow-hidden pt-1 ${isCollapsed ? `` : `pb-3`}`}><View className="min-w-full bg-white/25 rounded-t-2xl">    {/* Title content here  */}</View>  {!isCollapsed && (<View className='self-stretch bg-blue-500'>       renderContent()</View>  )}</View>

The renderContent() returns something like this:

const renderContent = () => {  return contentList.map((content, index) => (<View      key={index}      className="bg-black/25"><View className="bg-red-500/25 rounded-b-xl border-t border-white/10 rounded-t-xl w-full py-2 px-3"><Text className="font-raleway text-sm">          {content}</Text></View></View>  ));};

The content rendered in renderContent is stretching to fit the width of the flex container becayse of self-stretch. If I replace self-stretch with w-full, for some reason, the content actually doesn't stretch to the full width of the flex container. If I don't put any class at all, it also stretches to the full width. This is fine, I just used self-stretch to get around this and be explicit.

However, the problem occurs in that the <Text> that is rendering the content sometimes shrinks it's height because it now needs one less line to render the same content. The <View>s inside of renderContent are the correct height but the <View> that wraps renderContent has a height as if the the text never wrapped. All this height is manifested at the bottom of the <View> below all of the individual content from renderContent.

Interestingly, if I change the <View> that wraps renderContent to a fragment <>, it still stretches to full width, and now I can see the extra space below each individual piece of content that actually lost height due to the text wrap. Further, the <Text> component, and the inner <View> in renderContent change their height appropriately, but I can clearly see it is the outer <View> in renderContent that doesn't change its height.

What is going on? And how to fix?

Edit: Some images. 1st with self-stretch and <View> wrapping renderContent. 2nd is with <> fragment wrapping. 3rd is with <View> wrapping it, but attaching a w-full class to the view