4

According to the steps of React Navigation 3.x documentation, I have added react-native-gesture-handler for android. I have added the additional lines in MainActivity.java too.

Here is the link for reference:

https://reactnavigation.org/docs/en/getting-started.html

I have followed the document added below lines.

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

I can swipe the drawer. Unfortunately, I am unable to touch any of the other elements on the screen. I am using react-native 0.57

Can anyone please help?

Linda Paiste
  • 38,446
  • 6
  • 64
  • 102
K.Raj.
  • 643
  • 6
  • 22

1 Answers1

1

TLDR: You might need to use the TouchableOpacity from react-native-gesture-handler instead of react-native

My issue was not being able to press the back button in a header for versions of Android after Android 10. We were using React-Navigations Stack.Navigator and Stack.Screen for routing.

Version 5.x of react-navigation's stack lets you supply a header component in the options prop of a Screen and ours was wrapped with an Animated.View and not using the TouchableOpacity from the react-native-gesture-handler library was the culprit.

Simplified Screen

<Stack.Screen
      name={name}
      component={component}
      options={({ route }) => ({
        header: (
          <Animated.View>
            <NavHeader title={headerTitle} {...route.params} />
          </Animated.View>
        ),
        gestureEnabled: gestureEnabled,
      })}
/>

When I switched my header component's TouchableOpacity import to

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

the issue resolved.

Jon Lowrey
  • 11
  • 2