Skip to content

Commit 4d51ba2

Browse files
kkafarkkafar
committed
Add reproduction
1 parent fd00720 commit 4d51ba2

File tree

9 files changed

+308
-1
lines changed

9 files changed

+308
-1
lines changed

‎TestsExample/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,9 +92,10 @@ import Test1791 from './src/Test1791';
9292
import Test1802 from './src/Test1802';
9393
import Test1844 from './src/Test1844';
9494
import Test1864 from './src/Test1864';
95+
import Test1829 from './src/Test1829';
9596

9697
enableFreeze(true);
9798

9899
export default function App() {
99-
return <Test42 />;
100+
return <Test1829 />;
100101
}

‎TestsExample/src/Test1829/components/AssetsExample.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from 'react';
2+
import { Text, View, StyleSheet, Image } from 'react-native';
3+
4+
export default function AssetExample() {
5+
return (
6+
<View style={styles.container}>
7+
<Text style={styles.paragraph}>
8+
Local files and assets can be imported by dragging and dropping them
9+
into the editor
10+
</Text>
11+
<Image style={styles.logo} source={require('../assets/snack-icon.png')} />
12+
</View>
13+
);
14+
}
15+
16+
const styles = StyleSheet.create({
17+
container: {
18+
alignItems: 'center',
19+
justifyContent: 'center',
20+
padding: 24,
21+
},
22+
paragraph: {
23+
margin: 24,
24+
marginTop: 0,
25+
fontSize: 14,
26+
fontWeight: 'bold',
27+
textAlign: 'center',
28+
},
29+
logo: {
30+
height: 128,
31+
width: 128,
32+
},
33+
});

‎TestsExample/src/Test1829/index.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { SafeAreaProvider } from 'react-native-safe-area-context';
3+
import { NavigationContainer } from '@react-navigation/native';
4+
5+
import Stacks from './navigation/Stacks';
6+
7+
const App = () => (
8+
<SafeAreaProvider>
9+
<NavigationContainer>
10+
<Stacks />
11+
</NavigationContainer>
12+
</SafeAreaProvider>
13+
);
14+
15+
export default App;

‎TestsExample/src/Test1829/navigation/Stacks.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
3+
4+
import HomeView from '../screens/HomeView';
5+
import ModalView from '../screens/ModalView';
6+
import BaseView from '../screens/InnerView';
7+
import InnerModal from '../screens/InnerModal';
8+
9+
const RootStack = createNativeStackNavigator();
10+
const InnerStack = createNativeStackNavigator();
11+
12+
const Inner = () => (
13+
<InnerStack.Navigator>
14+
<InnerStack.Screen name="base" component={BaseView} />
15+
<InnerStack.Screen
16+
name="inner-modal"
17+
component={InnerModal}
18+
options={{ presentation: 'modal' }}
19+
/>
20+
</InnerStack.Navigator>
21+
);
22+
23+
const Stacks = () => (
24+
<RootStack.Navigator
25+
screenOptions={{
26+
headerShown: false,
27+
}}>
28+
<RootStack.Screen name="home" component={HomeView} />
29+
<RootStack.Screen name="inner" component={Inner} />
30+
<RootStack.Screen
31+
name="modal"
32+
component={ModalView}
33+
options={{
34+
presentation: 'modal',
35+
}}
36+
/>
37+
<RootStack.Screen
38+
name="modal-2"
39+
component={ModalView}
40+
options={{
41+
presentation: 'modal',
42+
}}
43+
/>
44+
</RootStack.Navigator>
45+
);
46+
47+
export default Stacks;

‎TestsExample/src/Test1829/screens/CardView.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
3+
4+
const CardView = () => {
5+
return <View style={styles.container} />;
6+
};
7+
8+
const styles = StyleSheet.create({
9+
container: {
10+
flex: 1,
11+
justifyContent: 'center',
12+
alignItems: 'center',
13+
backgroundColor: 'blue',
14+
},
15+
});
16+
17+
export default CardView;

‎TestsExample/src/Test1829/screens/HomeView.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
3+
import { useNavigation } from '@react-navigation/native';
4+
5+
const HomeView = () => {
6+
const navigation = useNavigation();
7+
return (
8+
<View style={styles.container}>
9+
<TouchableOpacity onPress={() => navigation.navigate('inner')}>
10+
<View style={styles.button}>
11+
<Text style={styles.buttonText}>Open Inner Navigator</Text>
12+
</View>
13+
</TouchableOpacity>
14+
<TouchableOpacity onPress={() => navigation.navigate('modal')}>
15+
<View style={styles.button}>
16+
<Text style={styles.buttonText}>Open Outer Modal</Text>
17+
</View>
18+
</TouchableOpacity>
19+
</View>
20+
);
21+
};
22+
23+
const styles = StyleSheet.create({
24+
container: {
25+
flex: 1,
26+
justifyContent: 'center',
27+
alignItems: 'center',
28+
backgroundColor: 'yellow',
29+
},
30+
button: {
31+
width: 200,
32+
height: 50,
33+
justifyContent: 'center',
34+
alignItems: 'center',
35+
borderRadius: 5,
36+
backgroundColor: 'blue',
37+
},
38+
buttonText: {
39+
color: 'white',
40+
},
41+
});
42+
43+
export default HomeView;

‎TestsExample/src/Test1829/screens/InnerModal.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
3+
import { useNavigation } from '@react-navigation/native';
4+
5+
const HomeView = () => {
6+
const navigation = useNavigation();
7+
return (
8+
<View style={styles.container}>
9+
<Text>
10+
This is the inner modal. Opening the outer modal here does not work.
11+
WTF?
12+
</Text>
13+
<TouchableOpacity onPress={() => navigation.navigate('modal')}>
14+
<View style={styles.button}>
15+
<Text style={styles.buttonText}>Open Outer Modal</Text>
16+
</View>
17+
</TouchableOpacity>
18+
<TouchableOpacity onPress={() => navigation.goBack()}>
19+
<View style={styles.button}>
20+
<Text style={styles.buttonText}>Back</Text>
21+
</View>
22+
</TouchableOpacity>
23+
</View>
24+
);
25+
};
26+
27+
const styles = StyleSheet.create({
28+
container: {
29+
flex: 1,
30+
justifyContent: 'center',
31+
alignItems: 'center',
32+
backgroundColor: 'yellow',
33+
},
34+
button: {
35+
width: 200,
36+
height: 50,
37+
justifyContent: 'center',
38+
alignItems: 'center',
39+
borderRadius: 5,
40+
backgroundColor: 'blue',
41+
},
42+
buttonText: {
43+
color: 'white',
44+
},
45+
});
46+
47+
export default HomeView;

‎TestsExample/src/Test1829/screens/InnerView.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
3+
import { useNavigation } from '@react-navigation/native';
4+
5+
const HomeView = () => {
6+
const navigation = useNavigation();
7+
return (
8+
<View style={styles.container}>
9+
<Text>
10+
This is the inner navigator. Opening the outer modal here works!
11+
</Text>
12+
<TouchableOpacity onPress={() => navigation.navigate('inner-modal')}>
13+
<View style={styles.button}>
14+
<Text style={styles.buttonText}>Open Inner Modal</Text>
15+
</View>
16+
</TouchableOpacity>
17+
<TouchableOpacity onPress={() => navigation.navigate('modal')}>
18+
<View style={styles.button}>
19+
<Text style={styles.buttonText}>Open Outer Modal</Text>
20+
</View>
21+
</TouchableOpacity>
22+
<TouchableOpacity onPress={() => navigation.goBack()}>
23+
<View style={styles.button}>
24+
<Text style={styles.buttonText}>Go back</Text>
25+
</View>
26+
</TouchableOpacity>
27+
</View>
28+
);
29+
};
30+
31+
const styles = StyleSheet.create({
32+
container: {
33+
flex: 1,
34+
justifyContent: 'center',
35+
alignItems: 'center',
36+
backgroundColor: 'yellow',
37+
},
38+
button: {
39+
width: 200,
40+
height: 50,
41+
justifyContent: 'center',
42+
alignItems: 'center',
43+
borderRadius: 5,
44+
backgroundColor: 'blue',
45+
},
46+
buttonText: {
47+
color: 'white',
48+
},
49+
});
50+
51+
export default HomeView;

‎TestsExample/src/Test1829/screens/ModalView.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { useEffect } from 'react';
2+
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
3+
import { useNavigation } from '@react-navigation/native';
4+
5+
const ModalView = () => {
6+
useEffect(() => {
7+
console.log('ModalView mounted');
8+
}, []);
9+
10+
const navigation = useNavigation();
11+
return (
12+
<View style={styles.container}>
13+
<Text>
14+
This is the outer modal. If you try to open it from the inner modal, it
15+
doesn't work. But if you comment out the `presentation: modal` on the
16+
inner modal, it does work! In addition, if opening a modal in the same
17+
navigator stack also works.
18+
</Text>
19+
<TouchableOpacity onPress={() => navigation.navigate('modal-2')}>
20+
<View style={styles.button}>
21+
<Text style={styles.buttonText}>Open sibling outer modal.</Text>
22+
</View>
23+
</TouchableOpacity>
24+
<TouchableOpacity onPress={() => navigation.goBack()}>
25+
<View style={styles.button}>
26+
<Text style={styles.buttonText}>Back</Text>
27+
</View>
28+
</TouchableOpacity>
29+
</View>
30+
);
31+
};
32+
33+
const styles = StyleSheet.create({
34+
container: {
35+
flex: 1,
36+
justifyContent: 'center',
37+
alignItems: 'center',
38+
backgroundColor: 'green',
39+
},
40+
button: {
41+
width: 200,
42+
height: 50,
43+
justifyContent: 'center',
44+
alignItems: 'center',
45+
borderRadius: 5,
46+
backgroundColor: 'blue',
47+
},
48+
buttonText: {
49+
color: 'white',
50+
},
51+
});
52+
53+
export default ModalView;

0 commit comments

Comments
 (0)