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 `div`s, 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={{ index, routes }}
    renderScene={renderScene}
    renderTabBar={renderTabBar}
    onIndexChange={setIndex}
    initialLayout={{ width: layout.width, height: "100%" }}
  />

  <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>

```

EDIT:

Code Sandbox link: <https://codesandbox.io/s/gracious-sammet-l4tqz?file=/src/App.js&resolutionWidth=402&resolutionHeight=675>

Note that the admob footer remains underneath the cards content. It should be sticky and remain always at the bottom of the screen. I also noticed that when I'm not using the header from the `MainStackNavigator` the footer works as intended - i.e. it remains sticky at the bottom - but I don't see why using the header (`AppBar`) component should interfere with my footer.