React Navigation: Swipe on drawer does not work in Android
I have found the solution. React Navigation depends on the react-native-gesture-handler
library. In the Installation section of React Navigation docs, it only says to create link by using the command react-native link
. This is enough for iOS. But for Android, you have to edit the MainActivity.java
file, so that the gesture handler library can work as expected:
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);
+ }
+ };
+ }
}
Refer to the documentation: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html
Actually, it's nowhere stated in React Navigation documentation to modify any files, as it is specific to react-native-gesture-handler
and not React Navigation
. I am keeping the answer here so it may help others.
UPDATE: The latest docs of React Navigation addresses this issue
In the index.js
of your project just use gestureHandlerRootHOC
:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
resource: https://github.com/react-navigation/drawer/issues/105#issuecomment-540667009
Update:
In React Navigation > 5.x
Just put react-native-gesture-handler
at the beginning of root index.js
import 'react-native-gesture-handler';