Stack pop, convert current screen to previous screen with animation, use navigation.goBack()
,
react-native-gesture-handler
s touchableopacity in previous screen touchable before current screen unmount in android, but ios no touchable until unmount current screen.
why different?
anything possible touchable in ios before unmount current screen?, help
Home.tsx
import {useNavigation} from '@react-navigation/native';
import React, {useEffect} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {TouchableHighlight, TouchableWithoutFeedback} from 'react-native-gesture-handler';
const Home = () => {
const navigation = useNavigation();
const goUpper = () => {
console.log('goupper click');
navigation.navigate('upper');
};
return (
<View style={styles.container}>
<TouchableWithoutFeedback onPress={() => console.log('clickable')}>
<Text>Home</Text>
<TouchableHighlight onPress={goUpper}>
<Text>goUpper</Text>
</TouchableHighlight>
</TouchableWithoutFeedback>
</View>
);
};
export default Home;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Upper.tsx
import React, { useEffect } from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';
import {useNavigation} from '@react-navigation/native';
const Upper = () => {
const navigation = useNavigation();
const goBack = () => {
console.log('back click');
navigation.goBack();
};
useEffect(() => {
console.log('upper render');
return () => console.log('upper unmount');
}, []);
return (
<View style={styles.container}>
<Text>Upper</Text>
<Button onPress={goBack} title="goBack" />
</View>
);
};
export default Upper;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Navigator.tsx
import React from 'react';
import {createStackNavigator, CardStyleInterpolators} from '@react-navigation/stack';
import {Home, Upper} from './views';
type RootStackParamList = {
home: undefined;
upper: undefined;
};
const Stack = createStackNavigator<RootStackParamList>();
function MyStack() {
return (
<Stack.Navigator
screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
}}>
<Stack.Screen name="home" component={Home} />
<Stack.Screen name="upper" component={Upper} />
</Stack.Navigator>
);
}
export default MyStack;
ios - not work / android - work