-
-
Notifications
You must be signed in to change notification settings - Fork 507
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Expo 43] Blank screen when native stack is nested inside material bottom tabs #1197
Comments
I have exactly the same issue (without expo) with all libraries to latest and |
Same here since Expo 43 |
|
@WoLewicki I did check and unfortunately after applying the suggested solution the issue still occurs. |
This issue comes from the usage of |
You were right! That sorts it out. |
I found even simpler solution with no need of changes in the code of library. When you nest the const TabOneStack = createNativeStackNavigator();
function TabOneNavigator() {
return (
<View style={{flex: 1}} collapsable={false}>
<TabOneStack.Navigator>
<TabOneStack.Screen
name="TabOneScreen"
component={TabOneScreen}
options={{ headerShown: false }}
/>
</TabOneStack.Navigator>
</View>
);
}
const BottomTab = createMaterialBottomTabNavigator();
function BottomTabNavigator() {
return (
<BottomTab.Navigator initialRouteName="TabOne">
<BottomTab.Screen
name="TabOne"
component={TabOneNavigator}
/>
</BottomTab.Navigator>
);
} It should prevent the issues with logic of native layouts of |
While I can confirm that the above does work (using an extra |
@kendallroth does this issue exist in newer versions of |
@WoLewicki Good question, I thought about waiting until Expo SDK 44 comes out, but that is also using RN |
The issue comes from the way the layout system works in |
I tested it with react-native 0.65.0 and the issue does not occur. I suppose it was fixed due to the following commit facebook/react-native@da8ed6b. @WoLewicki I think the solution you proposed is good enough, so we can wait until expo bumps RN version. I guess the issue can be closed, thank you all for your time. |
@WoLewicki Yes, I completely agree, if it appears fixed in newer versions than adding an additional |
Ok, I am closing it then. Thanks for your contribution 🎉 |
I am still experiencing the issue even though I already did the workaround. My react-native version is 0.67.5 and I'm on the latest version of react-navigation and react-native-screens, The initial tab is not rendering correctly when opening the app but the second tab is rendering okay. Here's my code:
Here are the screenshots of the first and second tabs: |
Description
Using recently released expo 43, when native stacks are nested inside material bottom tabs navigator (react-navigation), navigating between tabs back and forth causes a blank screen to appear.
The identical navigation setup works fine in expo 42.
This is a repost of this issue: react-navigation/react-navigation#10081
Demo
screen-20211026-181850.mp4
Steps To Reproduce
Expected behavior
I expect the screen content to be properly displayed when navigating, as it is in case of using @react-navigation/bottom-tabs (not material) and/or @react-navigation/stack (not native) or how it used to be in expo 42.
Actual behavior
Navigating between tabs back and forth causes a blank screen to appear.
Reproduction
https://github.com/Gruak/react-navigation-material-bottom-tabs-bug-repro
Platform
Workflow
Package versions
The text was updated successfully, but these errors were encountered: