-
-
Notifications
You must be signed in to change notification settings - Fork 493
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: dont recycle RNScreenView (#2069)
## Description PR disabling view recycling from `RNSScreenView` component. It also enables us to fix long lasting issue with view recycling. This feature was added in RN 0.74 and will only work then. Fixes #1628. ## Changes - stop recycling `RNSScreenView` - Remove logic connected to problems with view recycling - Change the logic of setting push view controllers on new architecture, when transition is ongoing - Add if check for cases, when user navigates to more than one screen at the same time ## Test code and steps to reproduce See that modals and `replace` action work correctly. You can also use `Test2069.tsx` from FabricTestExample / TestsExample to test the behavior of replacing screens conditionally. --------- Co-authored-by: tboba <tymoteusz.boba@gmail.com>
- Loading branch information
Showing
7 changed files
with
234 additions
and
71 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,99 @@ | ||
| import { NavigationContainer } from '@react-navigation/native'; | ||
| import { | ||
| createNativeStackNavigator, | ||
| NativeStackNavigationProp, | ||
| } from '@react-navigation/native-stack'; | ||
| import React, { useState } from 'react'; | ||
| import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; | ||
|
|
||
| type StackParamList = { | ||
| Home: undefined; | ||
| Home1: undefined; | ||
| Home2: undefined; | ||
| Home3: undefined; | ||
| }; | ||
|
|
||
| interface MainScreenProps { | ||
| navigation: NativeStackNavigationProp<StackParamList>; | ||
| } | ||
|
|
||
| const Home = ({ navigation }: MainScreenProps) => ( | ||
| <View style={styles.view}> | ||
| <Text | ||
| onPress={() => { | ||
| navigation.navigate('Home1'); | ||
| navigation.navigate('Home2'); | ||
| }}> | ||
| This is the initial View | ||
| </Text> | ||
| </View> | ||
| ); | ||
|
|
||
| const Home1 = ({ navigation }: MainScreenProps) => ( | ||
| <View style={styles.view}> | ||
| <Text onPress={() => navigation.goBack()}>This is View 1</Text> | ||
| </View> | ||
| ); | ||
|
|
||
| const Home2 = ({ navigation }: MainScreenProps) => ( | ||
| <View style={styles.view}> | ||
| <Text onPress={() => navigation.goBack()}>This is View 2</Text> | ||
| </View> | ||
| ); | ||
|
|
||
| const Home3 = ({ navigation }: MainScreenProps) => ( | ||
| <View style={styles.view}> | ||
| {/* goBack shouldn't work here. */} | ||
| <Text onPress={() => navigation.goBack()}>This is View 3</Text> | ||
| </View> | ||
| ); | ||
|
|
||
| const Stack = createNativeStackNavigator(); | ||
|
|
||
| const Test2069 = () => { | ||
| const [hasChangedState, setHasChangedState] = useState(0); | ||
|
|
||
| return ( | ||
| <NavigationContainer> | ||
| <Stack.Navigator> | ||
| {hasChangedState % 3 === 0 ? ( | ||
| <> | ||
| <Stack.Screen name="Home" component={Home} /> | ||
| <Stack.Screen name="Home1" component={Home1} /> | ||
| <Stack.Screen name="Home2" component={Home2} /> | ||
| </> | ||
| ) : hasChangedState % 3 === 1 ? ( | ||
| <> | ||
| <Stack.Screen name="Home2" component={Home2} /> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <Stack.Screen name="Home3" component={Home3} /> | ||
| </> | ||
| )} | ||
| </Stack.Navigator> | ||
| <TouchableOpacity | ||
| style={styles.button} | ||
| onPress={() => setHasChangedState(old => old + 1)}> | ||
| <Text>Change state</Text> | ||
| </TouchableOpacity> | ||
| </NavigationContainer> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| button: { | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| height: 100, | ||
| }, | ||
| view: { | ||
| alignItems: 'center', | ||
| backgroundColor: '#b7c4bb', | ||
| flex: 1, | ||
| justifyContent: 'center', | ||
| padding: 12, | ||
| }, | ||
| }); | ||
|
|
||
| export default Test2069; |
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,99 @@ | ||
| import { NavigationContainer } from '@react-navigation/native'; | ||
| import { | ||
| createNativeStackNavigator, | ||
| NativeStackNavigationProp, | ||
| } from '@react-navigation/native-stack'; | ||
| import React, { useState } from 'react'; | ||
| import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; | ||
|
|
||
| type StackParamList = { | ||
| Home: undefined; | ||
| Home1: undefined; | ||
| Home2: undefined; | ||
| Home3: undefined; | ||
| }; | ||
|
|
||
| interface MainScreenProps { | ||
| navigation: NativeStackNavigationProp<StackParamList>; | ||
| } | ||
|
|
||
| const Home = ({ navigation }: MainScreenProps) => ( | ||
| <View style={styles.view}> | ||
| <Text | ||
| onPress={() => { | ||
| navigation.navigate('Home1'); | ||
| navigation.navigate('Home2'); | ||
| }}> | ||
| This is the initial View | ||
| </Text> | ||
| </View> | ||
| ); | ||
|
|
||
| const Home1 = ({ navigation }: MainScreenProps) => ( | ||
| <View style={styles.view}> | ||
| <Text onPress={() => navigation.goBack()}>This is View 1</Text> | ||
| </View> | ||
| ); | ||
|
|
||
| const Home2 = ({ navigation }: MainScreenProps) => ( | ||
| <View style={styles.view}> | ||
| <Text onPress={() => navigation.goBack()}>This is View 2</Text> | ||
| </View> | ||
| ); | ||
|
|
||
| const Home3 = ({ navigation }: MainScreenProps) => ( | ||
| <View style={styles.view}> | ||
| {/* goBack shouldn't work here. */} | ||
| <Text onPress={() => navigation.goBack()}>This is View 3</Text> | ||
| </View> | ||
| ); | ||
|
|
||
| const Stack = createNativeStackNavigator(); | ||
|
|
||
| const Test2069 = () => { | ||
| const [hasChangedState, setHasChangedState] = useState(0); | ||
|
|
||
| return ( | ||
| <NavigationContainer> | ||
| <Stack.Navigator> | ||
| {hasChangedState % 3 === 0 ? ( | ||
| <> | ||
| <Stack.Screen name="Home" component={Home} /> | ||
| <Stack.Screen name="Home1" component={Home1} /> | ||
| <Stack.Screen name="Home2" component={Home2} /> | ||
| </> | ||
| ) : hasChangedState % 3 === 1 ? ( | ||
| <> | ||
| <Stack.Screen name="Home2" component={Home2} /> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <Stack.Screen name="Home3" component={Home3} /> | ||
| </> | ||
| )} | ||
| </Stack.Navigator> | ||
| <TouchableOpacity | ||
| style={styles.button} | ||
| onPress={() => setHasChangedState(old => old + 1)}> | ||
| <Text>Change state</Text> | ||
| </TouchableOpacity> | ||
| </NavigationContainer> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| button: { | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| height: 100, | ||
| }, | ||
| view: { | ||
| alignItems: 'center', | ||
| backgroundColor: '#b7c4bb', | ||
| flex: 1, | ||
| justifyContent: 'center', | ||
| padding: 12, | ||
| }, | ||
| }); | ||
|
|
||
| export default Test2069; |
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
Oops, something went wrong.