---
# System prepended metadata

title: Untitled

---

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

`react-native-gesture-handler`s touchableopacity 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](https://i.stack.imgur.com/Nqb91.gif)

**Home.tsx**
```typescript
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**

```typescript
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**

```typescript
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