From ec0d113eb25c39ef9defb6c7215640f44e3569ae Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Wed, 18 Aug 2021 05:02:37 -0700
Subject: [PATCH] fix: content container in native web stack should fill parent
 (#9832)

`flex: 1` needs to be set on the `View` container sits between the `Screen` component and screen contents in `NativeStackView` otherwise content on tabs nested inside native stack will not be visible, along with other similar types of bugs.

Reproducible example: https://gist.github.com/brentvatne/273d34be0c937237eb353e4100c49949

Apply the fix from this diff to see it resolves the issue.
---
 packages/native-stack/src/views/NativeStackView.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/native-stack/src/views/NativeStackView.tsx b/packages/native-stack/src/views/NativeStackView.tsx
index a0d26fcb..a890da2b 100644
--- a/packages/native-stack/src/views/NativeStackView.tsx
+++ b/packages/native-stack/src/views/NativeStackView.tsx
@@ -138,7 +138,9 @@ export default function NativeStackView({ state, descriptors }: Props) {
                 { display: isFocused ? 'flex' : 'none' },
               ]}
             >
-              <View style={contentStyle}>{render()}</View>
+              <View style={[styles.contentContainer, contentStyle]}>
+                {render()}
+              </View>
             </Screen>
           );
         })}
@@ -151,6 +153,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  contentContainer: {
+    flex: 1,
+  },
   backImage: {
     height: 24,
     width: 24,