1

Stack pop, convert current screen to previous screen with animation, use navigation.goBack(),

react-native-gesture-handlers 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

enter image description here

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

0 Answers0