so I have an issue with stacknavigator on an expo app and trying to open a modal from it.
If the modal is on the body of the app, it works fine, with no issue, but when the modal is launched from a stack screen, most of the view is missing and when inspecting, the content is there and clickable, just not shown.
I've added a screenshot of what I mean.
It's the same piece of code for both.
This is how I added the modal to the stack
return (<Stack.Navigator screenOptions={headerOptions} headerMode="screen" initialRouteName={'Home'}><Stack.Screen name="Home" component={TabNavigator} options={({ navigation, route }) => { let tabScene = getTabSceneName(route); return { headerTitle:<View><TouchableOpacity onPress={() => setSearchModalVisible(true)} activeOpacity={1}><View style={styles.searchInputContainer}><SearchInput pointerEvents="none" placeholder={t('Search')} editable={false} /></View></TouchableOpacity><SearchModal onItemPress={(product: Product) => { navigation.navigate('ProductDetails', { productHandle: product.handle }); }} onSubmit={(searchKeyword: string) => navigation.navigate('SearchResults', { searchKeyword, }) } isVisible={isSearchModalVisible} setVisible={setSearchModalVisible} /></View>, headerRight: () => (<HeaderIconButton icon="cart" onPress={() => navigation.navigate('ShoppingCart')} /> ), headerStyle: { shadowColor: COLORS.transparent, elevation: 10, }, }; } }} /><Stack.Screen name="Auth" component={AuthScene} options={() => ({ title: t('Welcome'), })} /><Stack.Screen name="ForgotPassword" component={ForgotPasswordScene} options={() => ({ title: t('Forgot Password'), })} /></Stack.Navigator>);}I've attached screenshots of how it's meant to be like and the issue.
Screenshot of missing view, when it's launched from the stack screen