-
-
Notifications
You must be signed in to change notification settings - Fork 513
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(iOS): white flash on tab change when using native stack (#2188)
## Description This PR gets rid of undesired white flashes during `maybeAddToParentAndUpdateContainer`. The white flash was present on paper architecture when `unmountOnBlur` option was set to true on parent bottomStackNavigator (see repro). The affected logic was previously introduced or changed by following PRs: - #600 - #613 - #643 The removed `_hasLayout` was initially added by #600 in order to resolve an issue: #432. However the logic was later changed by #613 in order to fix another issue and the added `_hasLayout` may not fix anything eventually, as stated by [this comment](#432 (comment)). Fixes #1645. ## Changes - removed `_hasLayout` variable - added repros ## Screenshots / GIFs ### Before https://github.com/software-mansion/react-native-screens/assets/91994767/226a32d7-728b-48dd-b21a-6a1e4195add2 ### After https://github.com/software-mansion/react-native-screens/assets/91994767/32febcf1-d159-4a9d-ae3a-373042732a6d ## Test code and steps to reproduce - added `Test1645.js` repro to test examples - added `Test432.tsx` repro to test examples ## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes --------- Co-authored-by: Kacper Kafara <kacper.kafara@swmansion.com>
- Loading branch information
Showing
4 changed files
with
175 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| /* eslint-disable react-native/no-inline-styles */ | ||
|
|
||
| import React, {useEffect, useState} from 'react'; | ||
| import {Text, View} from 'react-native'; | ||
|
|
||
| import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; | ||
| import {createNativeStackNavigator} from '@react-navigation/native-stack'; | ||
| import {createStackNavigator} from '@react-navigation/stack'; | ||
| import {NavigationContainer} from '@react-navigation/native'; | ||
|
|
||
| const TestBottomTabBar = createBottomTabNavigator(); | ||
| const TestNativeStack1 = createNativeStackNavigator(); | ||
| const TestNativeStack2 = createNativeStackNavigator(); | ||
|
|
||
| const TestScreen1 = () => { | ||
| const [t, setT] = useState(110); | ||
|
|
||
| useEffect(() => { | ||
| const interval = setInterval(() => { | ||
| setT(lastT => lastT + 1); | ||
| }, 100); | ||
|
|
||
| return () => clearInterval(interval); | ||
| }, []); | ||
| return ( | ||
| <View | ||
| style={{ | ||
| flex: 1, | ||
| backgroundColor: '#000', | ||
| }}> | ||
| {Array.from({length: 100}).map((e, idx) => ( | ||
| <Text style={{color: '#fff'}} key={idx}> | ||
| T{idx}: {t} | ||
| </Text> | ||
| ))} | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const TestScreen2 = () => { | ||
| const [t, setT] = useState(0); | ||
|
|
||
| useEffect(() => { | ||
| const interval = setInterval(() => { | ||
| setT(lastT => lastT + 1); | ||
| }, 100); | ||
|
|
||
| return () => clearInterval(interval); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <View | ||
| style={{ | ||
| flex: 1, | ||
| backgroundColor: '#000', | ||
| }}> | ||
| {Array.from({length: 100}).map((e, idx) => ( | ||
| <Text style={{color: 'red'}} key={idx}> | ||
| T{idx}: {t} | ||
| </Text> | ||
| ))} | ||
| </View> | ||
| ); | ||
| }; | ||
| const TestScreenTab1 = () => { | ||
| return ( | ||
| <TestNativeStack1.Navigator initialRouteName="screen1a"> | ||
| <TestNativeStack1.Screen name="screen1a" component={TestScreen1} /> | ||
| <TestNativeStack1.Screen name="screen1b" component={TestScreen2} /> | ||
| </TestNativeStack1.Navigator> | ||
| ); | ||
| }; | ||
|
|
||
| const TestScreenTab2 = () => { | ||
| return ( | ||
| <TestNativeStack2.Navigator initialRouteName="screen2a"> | ||
| <TestNativeStack2.Screen name="screen2a" component={TestScreen2} /> | ||
| <TestNativeStack2.Screen name="screen2b" component={TestScreen1} /> | ||
| </TestNativeStack2.Navigator> | ||
| ); | ||
| }; | ||
|
|
||
| const App = () => { | ||
| return ( | ||
| <NavigationContainer> | ||
| <TestBottomTabBar.Navigator | ||
| initialRouteName="tab1" | ||
| screenOptions={{ | ||
| unmountOnBlur: true, | ||
| }}> | ||
| <TestBottomTabBar.Screen name="tab1" component={TestScreenTab1} /> | ||
| <TestBottomTabBar.Screen name="tab2" component={TestScreenTab2} /> | ||
| </TestBottomTabBar.Navigator> | ||
| </NavigationContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { Pressable, View, Button, Text } from 'react-native'; | ||
|
|
||
| import { NavigationContainer, useNavigation } from '@react-navigation/native'; | ||
| import { | ||
| NativeStackScreenProps, | ||
| createNativeStackNavigator, | ||
| } from '@react-navigation/native-stack'; | ||
| import React, { useCallback } from 'react'; | ||
|
|
||
| type RootStackParamList = { | ||
| Home: undefined; | ||
| Settings: undefined; | ||
| }; | ||
| type RootStackScreenProps<T extends keyof RootStackParamList> = | ||
| NativeStackScreenProps<RootStackParamList, T>; | ||
| const HomeScreen = ({ navigation }: RootStackScreenProps<'Home'>) => { | ||
| const showSettings = useCallback(() => { | ||
| navigation.navigate('Settings'); | ||
| }, [navigation]); | ||
| return ( | ||
| <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> | ||
| <Button onPress={showSettings} title={'Show settings'} /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const SettingsScreen = ({ navigation }: RootStackScreenProps<'Settings'>) => { | ||
| return ( | ||
| <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> | ||
| <Text>Settings</Text> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const RootStack = createNativeStackNavigator<RootStackParamList>(); | ||
| const RootNavigator = () => { | ||
| const navigation = useNavigation(); | ||
| const headerRight = useCallback( | ||
| () => ( | ||
| <Pressable | ||
| onPress={() => { | ||
| navigation.goBack(); | ||
| }}> | ||
| <Text>Close</Text> | ||
| </Pressable> | ||
| ), | ||
| [navigation], | ||
| ); | ||
| return ( | ||
| <RootStack.Navigator screenOptions={{ headerShown: false }}> | ||
| <RootStack.Screen name="Home" component={HomeScreen} /> | ||
| <RootStack.Screen | ||
| name="Settings" | ||
| component={SettingsScreen} | ||
| options={{ | ||
| presentation: 'modal', | ||
| animation: 'slide_from_bottom', | ||
| headerShown: true, | ||
| headerRight: headerRight, | ||
| }} | ||
| /> | ||
| </RootStack.Navigator> | ||
| ); | ||
| }; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <NavigationContainer> | ||
| <RootNavigator /> | ||
| </NavigationContainer> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters