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'

try to remove whitespaces in your directory: 'D:\React Native Projects\InstagramClone\ => 'D:\ReactNativeProjects\InstagramClone\ — peja
– peja, Commented Dec 30, 2018 at 14:43

Meisam Nazari · Accepted Answer · 2019-08-29 19:32:27Z

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

answered Aug 29, 2019 at 19:32

Meisam Nazari

99411 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fathurifki Elvarianto Gamal · Accepted Answer · 2019-02-20 10:39:19Z

0

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

answered Feb 20, 2019 at 10:39

Fathurifki Elvarianto Gamal

765 bronze badges

Comments

Vishal Dhanotiya · Accepted Answer · 2019-04-06 12:32:59Z

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

Collectives™ on Stack Overflow

React Native importing React Navigation

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related