How can you ensure flex shrink in react-native (and how can you debug react-native styles in general)?

I'm running a RN app using native-base for styling. I have four elements on my homepage: a header, a tab view from vreact-native-tab-view that contains a ScrollView that takes up about 70% of the viewport, and two smaller 100% width elements at the bottom.

However, the scrollview fills up more than 100% of the viewport and the two smaller elements get pushed to the bottom.

I looked in my element inspector and can apply a flexShrink to some of the many divs, but I'm not sure which one that is in my code because it's div hell when you use react-native. React devtools also has the same problem, except it's View hell.

So, two questions:

1. How can I ensure the scroll container doesn't fill up more than it should on the page?
2. How can I effectively debug react native when both chrome and react dev tools are a mess?

For reference, here's how I've styled so far:

Home.tsx:

<View flex={1}> // applied a flex for the entire homepage
  <TabView
    navigationState=
    renderScene={renderScene}
    renderTabBar={renderTabBar}
    onIndexChange={setIndex}
    initialLayout=
  />

  <View width="100%">
    <Center width="100%">
      <StrengthSlider />
    </Center>
    <AdMobBanner
      ...props
    />
  </View>
</View>

Teas.tsx:

<View flex={1} bg="white">
  <ScrollCards teas={blackTeas} />
</View>

ScrollCards.tsx:

<ScrollView>
  <Center>
    {teas.length > 0 &&
      teas.map((teaObj) => (
        <TeaCard id={teaObj.id} teaData={teaObj.data} key={teaObj.id} />
      ))}
  </Center>
</ScrollView>

from How can you ensure flex shrink in react-native (and how can you debug react-native styles in general)?