Touchabe Opacity doest work in React Navigation

Question

i am using RN version 0.59.9 and React Navigaton 3.11.1.

I want to add onPress on my view so i wrap it in TouchableOpacity but it doest work for me.

I try to use it outside React Navigation and it is still working, so maybe it is a bug in this lib.

I have tried to set the height for the view i want to add OnPress but still not working

UPDATE: For more info for you guys, there are some code:

i have two screens like this:

class VuaTraiCayApp extends Component {
      render() {
        return <AppContainer />;
      }
    }

    const stack = createStackNavigator(
      {
        Home: {
          screen: HomeScreen
        },
        Detail: {
          screen: DetailScreen
        }
      },
      {
        defaultNavigationOptions: {
          headerTitle: "Trang chủ"
        }
      }
    );

    const AppContainer = createAppContainer(stack);

In the HomeScreen, i want to add onPress on the view, so i wrapped the view inside TouchabeOpacity. It not works:

<TouchableOpacity 
      onPress={()=> {
        alert("Clicked");
      }}
    >
      <View 
        style={{
          width: 200,
          height: 500,
          backgroundColor: "pink"
        }} 
      />
    </TouchableOpacity>

But if i use the same code outside the stack. Let's see i move this code go to the root without in stack. It works perfectly.

class VuaTraiCayApp extends Component {
  render() {
    return (
       <TouchableOpacity 
          onPress={()=> {
            alert("Clicked");
          }}
        >
          <View 
            style={{
              width: 200,
              height: 500,
              backgroundColor: "pink"
            }} 
          />
        </TouchableOpacity>
);
  }
}

Answer 1

Sometimes VSCode import Touchable from gesture handler

import {
 TouchableOpacity
} from 'react-native-gesture-handler'

You need to link the library properly, Otherwise it will show the button, but click mayn't work. (This is just an edge case i encountered)

Other helpful links: https://github.com/react-navigation/react-navigation/issues/1225