[Android] How to install with react-native-navigation?

[henrikra]

Everything else is clear in Android installation but editing the MainActivity.java. Since with react-native-navigation MainActivity.java is way different than normal. Here is installation for it https://wix.github.io/react-native-navigation/#/installation-android

As you can see MainActivity.java is pretty empty:

 import com.reactnativenavigation.controllers.SplashActivity;

 public class MainActivity extends SplashActivity {

 }

[kmagiera]

I haven't tried using these two libs together. It seems like it may not be as easy as one could think. The reason is that both react-native-navigation and gesture-handler use ReactRootView as an extension point: RNGestureHandlerEnabledRootView and ContentView

Also it seems like react-native-navigation doesn't allow you to swap out implementation of the root view in a way react-native on its own does (this library takes advantage of that and replaces the implementation of the rootview).

So in order to make it work one need to figure out how a custom implementation of rootview can be used with react-native-navigation then extend ContentView by adding capabilities from gesture-handler's RootView to it. The easies solution would be to change ContentView class to extend
RNGestureHandlerEnabledRootView instead of ReactRootView

[henrikra]

@kmagiera So you are not using native navigation library like react-native-navigation. I am using it because JS based navigation libraries suck :/

[kmagiera]

No, sorry. I'm afraid that there is nothing I can do as far as making changes to this library to make it work with react-native-navigation. As I mentioned earlier it would require some changes in the navigation library by itself (e.g. allowing for custom root view class to be used)

[henrikra]

Because both react-native-navigation and react-native-gesture-handler are made because native performance. And it would make sense to use them together? What navigation library you usually use?

[kmagiera]

@henrikra Thanks pushing for this, I believe it would be very valuable to get it work (I personally don't use this navigation library). Let's see what maintainers of the navigation library would say about it. In my opinion it would be required to change navigation API a bit so that it allows for pluggable rootview component or at least that would help with re-routing dispatchTouchEvent calls made to the rootview.

[henrikra]

Good to hear! Would it make sense to open this issue then? :)

[kmagiera]

Hey @henrikra ! I ended up figuring out a solution for this library to work with react-native-navigation. Just published alpha.32 that makes it possible for these two libraries to work together.

There is a separate installation path required for this to work. I documented it here: https://github.com/kmagiera/react-native-gesture-handler/blob/master/NATIVE_NAVIGATORS.md

Essentially instead of making changes in Java, you need to wrap each of your screens with gestureHandlerRootHOC.

If you find some time to test it out and let me know how it works for you that would be fantastic!

[henrikra]

@kmagiera For sure! I can test today!!!

[henrikra]

I started doing the install and ran into compilation problems :D I have problems when readme tells me to update MainApplication.java like this:

// Don't forget imports
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  // Add the following method to your main activity class
  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }
}

1. applications using react-native-navigation does not extends from ReactActivity but instead of NavigationApplication This is why I am getting error method does not override or implement a method from a supertype when compiling I guess. Here is example how MainApplication and MainActivity looks with react-native-navigation: https://wix.github.io/react-native-navigation/#/installation-android
2. in the example code there is getMainComponentName function but I don't have it or I don't see implementation in the README
3. Also getting this kind of error:

   error: not an enclosing class: MainActivity
       return new RNGestureHandlerEnabledRootView(MainActivity.this);
                                                              ^

[henrikra]

@kmagiera Do have idea how to continue testing from here? :)

[henrikra]

Sorry I accidentally put MainActivity stuff to MainApplication :D So there are really two problems only:

1. When adding createReactActivityDelegate inside MainActivity.java it says error: method does not override or implement a method from a supertype pointing at createReactActivityDelegates @Override

2. error: cannot find symbol
   return new ReactActivityDelegate(this, getMainComponentName()) {
                                          ^

My full MainActivity looks like this now:

import com.reactnativenavigation.controllers.SplashActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

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

[kmagiera]

You should ignore java changes part completely and instead do this https://github.com/kmagiera/react-native-gesture-handler/blob/master/NATIVE_NAVIGATORS.md

[kmagiera]

Just keep your java code as it was before. When you follow the other guide no java changes are required instead of adding GestureHandlerPackage in the right place

[henrikra]

Ahaa! I would then make super clear on docs that those are two different routes :) Looks like it is working! 🎉 I added simple box that I can drag!

One thing I noticed that now when I am doing Javascript reload it always gives me error (image below) for few seconds and then it reloads normally. It points to this library It looks like this: Do you have idea for this?

[kmagiera]

Makes sense, I’ll update the docs tomorrow, also have some idea on what this redbox might be for. Will try to fix tomorrow. Would you be open to publishing a sample app using native-navigation lib and gesture handler on Github? That would be very helpful for testing it in the future. Could be done as a separate repo or as a separate Example dir under gesture handler repo

[henrikra]

I made minimum repo which uses react-native-navigation and react-native-gesture-handler 🎈 It is here: https://github.com/henrikra/nativeNavigationGestureHandler I have two screens: First and Second. On the second screen I have draggable box. Look like when I am reloading JS on second screen which has your code it gives me this red screen. But If I am reloading in first screen which has almost nothing it does not give me red screen :)

I hope this helps you with your debugging :) 👍

[kmagiera]

Sweet! Thanks! Do you mind if I point to your repo as an example from the docs?

[henrikra]

Sure man! Can please reopen this issue btw? Also did you manage to reproduce the red screen? 👀

[kmagiera]

Sorry for getting back so late. Thanks for your sample app @henrikra – I managed to repro the issue and the fix is on its way

[kmagiera]

Landed the fix in alpha.34 and submitted https://github.com/henrikra/nativeNavigationGestureHandler/pull/1 to your sample app. Thanks again for your help!

[henrikra]

No worries! I have update the example repo with README now too. Future PRs are welcome too :)

[kmagiera]

Glad it worked for you!

I also fixed one more issue I noticed with the HOC not passing navigatorStyle constant properly. Fixed it here 1970fd258c7c1f29a99b8f0ade27af3efe416c57 and published alpha.35 with this update. Let me know if you encounter any other issues related or unrelated to native navigation lib.

[henrikra]

Will do 🙇

[zachgibson]

@kmagiera and @henrikra thanks for working on this! I’m needing to use both of these libs in a new project and now I can! Y’all are awesome. 👏