React Native importing React Navigation

Question

I follow all instructions for installing React Navigation for Android.

First, "npm install --save react-navigation", " npm install --save react-native-gesture-handler". "react-native link react-native-gesture-handler" and lastly, updated my MainActivity.java

Here is my MainActivity.java:

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 {

/**
 * Returns the name of the main component registered from JavaScript.
 * This is used to schedule rendering of the component.
 */
@Override
protected String getMainComponentName() {
    return "InstagramClone";
}

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

This is the error I got:

• What went wrong: Failed to create parent directory 'D:\React Native Projects\InstagramClone\node_modules\react-native-gesture-handler\android\build' when creating directory 'D:\React Native Projects\InstagramClone\node_modules\react-native-gesture-handler\android\build\intermediates\check-manifest\debug'

Answer 1

If you initiated your project with expo just install react-native-gesture-handler. But if your projected started by react-native cli you have to first install react-native-gesture-handler and then link it to all packages by the command:

react-native link

Answer 2

if you had to a link react-native-gesture-handler there should be no problem or you try react-native link it will be link all package. Or if you still face same problem delete app first on your emulator then React-native run-android again

Answer 3

You need to install react-native-gesture-handler npm separately. They create separated npm package for touch & gesture handling and recognition.

Step 1.

npm i react-native-gesture-handler 

Step 2.

react-native link react-native-gesture-handler 

Step 3.(optional )

If step 2 is not worked properly, code is not configured properly so we are manually configure it using step 3

To finalize the installation of react-native-gesture-handler for Android, be sure to make the necessary modifications to MainActivity.java:

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);  } 
 }; 
 } }

No additional steps are required for iOS.

Please Refer the following document for more information:-

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

https://www.npmjs.com/package/react-native-gesture-handler/v/1.0.0-alpha.34?activeTab=readme

https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html