In my RN app styled with native-base, my homepage features a header, a tab view using vreact-native-tab-view that includes a ScrollView occupying 70% of the viewport, and two smaller elements at the bottom each with 100% width.
However, I noticed that the ScrollView extends beyond the viewport causing the smaller elements to be pushed down. When inspecting the elements, I found that applying flexShrink could help, but with so many divs in react-native, it's hard to pinpoint which one needs it. React devtools also present similar challenges in debugging.
I have two questions:
- How can I contain the scroll container within its desired dimensions?
- What effective methods are there for debugging react native when tools like Chrome and react devtools are not as helpful?
Below are snippets of how I've styled the components:
Home.tsx:
<View flex={1}>
<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:
You can find the code sandbox link here. In the sandbox, you'll notice that the admob footer content stays beneath the cards instead of remaining sticky at the bottom of the screen. It seems that using the MainStackNavigator header component affects the behavior of the footer, although this interference with the AppBar component is unclear.