Library not working on Android Emulator

[djordje47]

Hi everyone,

first of all I need to tell u that I am beginner with ReactNative, so if at the end this resolves as something stupid, forgive me.

I have created new app using the command: npx react-native init puzzleNative for the application I want to build.

My Gradle version is:

distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-all.zip

My package.json looks like this:

  "name": "puzzleNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-native-fontawesome": "^0.2.7",
    "@reduxjs/toolkit": "^1.7.1",
    "animate.css": "^4.1.1",
    "react": "17.0.2",
    "react-native": "0.67.2",
    "react-native-drax": "^0.9.3",
    "react-native-gesture-handler": "^2.2.0",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.2",
    "@babel/runtime": "^7.17.2",
    "@react-native-community/eslint-config": "^3.0.1",
    "babel-jest": "^27.5.1",
    "eslint": "^8.9.0",
    "jest": "^27.5.1",
    "metro-react-native-babel-preset": "^0.68.0",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

And in the App.js file I am just trying to run the example from the github page like so:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { DraxProvider, DraxView } from 'react-native-drax';

export default function App() {
  return (
    <DraxProvider>
      <View style={styles.container}>
        <DraxView
          style={styles.draggable}
          onDragStart={() => {
            console.log('start drag');
          }}
          payload="world"
        />
        <DraxView
          style={styles.receiver}
          onReceiveDragEnter={({ dragged: { payload } }) => {
            console.log(`hello ${payload}`);
          }}
          onReceiveDragExit={({ dragged: { payload } }) => {
            console.log(`goodbye ${payload}`);
          }}
          onReceiveDragDrop={({ dragged: { payload } }) => {
            console.log(`received ${payload}`);
          }}
        />
      </View>
    </DraxProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  draggable: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
  receiver: {
    width: 100,
    height: 100,
    backgroundColor: 'green',
  },
});

I am using Android 10 Q for my emulator.

Please if someone can help me I would really appreciate it.

Thanks in advance! :)

And I can't drag the bluebox. I dont have any errors in the console.

[lafiosca]

Hello @djordje47! I apologize that I will likely not have time to try to look into this and reproduce it myself, but I am curious about your screenshot. At the bottom it shows a yellow box dev warning from react-native-gesture-handler. Drax is built on top of react-native-gesture-handler, so if something is misconfigured about that, it will not work. Can you look into what that warning is and see if it helps you out?

[djordje47]

Hi thanks for answering! :+1: This is the full log:

WARN  [react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system! 
LongPressGestureHandler@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.puzzlenative&modulesOnly=false&runModule=true:114391:38
DraxView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.puzzlenative&modulesOnly=false&runModule=true:113086:27
RCTView
View
RCTView
View

I was googling it and found that it's just a log and that we should update our dependencies. https://github.com/software-mansion/react-native-gesture-handler/issues/1831 I found that here, but all of my dependencies are at the latest versions.

Thanks in advance! :+1: Please if you have any other ideas, let me know!

[lafiosca]

Ah.. well, as I mentioned I don't think I'll be much help currently, but I would suggest trying to see if you can get https://github.com/nuclearpasta/react-native-drax-example working in your emulator. If it works, see if you can track down what's different between the two. If it doesn't, then we might have a bigger problem here.

[djordje47]

Hi, I have done now exactly that. If I run your examples it works. If I move all your code into my created example by the way I have used this command to create the project:

npx react-native init testDrax --version 0.63.3 --template react-native-template-typescript

In order to have the same version of react native like you and same version of gradle like you. I also used typescript. It doesn't work.

I thought it's something up to my setup because I am on linux Debian. But then also your examples should not work. :(

I really don't know what to do.

[lafiosca]

I'm sorry, that sounds very frustrating, but I think you'll just need to continue to track down what's different or missing. :(

[chukiatt]

I have same issue

[chukiatt]

I think this library use old version of react-native-gesture-handler. but the current version is "react-native-gesture-handler": "^2.2.0",

[lafiosca]

@chukiatt The library definitely is using an older version. Have they introduced breaking changes in more recent ones?

[chukiatt]

thank you

[shabaz-ejaz]

Having same issue with Android emulator and `react-native-gesture-handler": "^2.4.2". Think this needs to be addressed as it doesn't seem to like the new versions ofreact-native-gesture-handler`. It will only be a problem going forward for Android.

[lafiosca]

That is a shame :( Unfortunately I have not had availability to put any serious development effort into this library in quite a while. To give an idea of how much of a focus React Native development has been for me recently: my primary mobile app project is still on RN 0.63. 😬

[artemis-prime]

https://stackoverflow.com/questions/71618989/react-native-gesture-handler-not-working-on-android.

This fix worked for me to get your color drag example working, @lafiosca . (by just grabbing and slightly modifying the component in "screens", removing DragProvider from the component etc)>

But when I tried it in another app (with literally the identical hierarchy), it wouldn't work. I would get a warning in the snackbar in emulator: "ref.measureLayout must be called with a ref from a View"... looking at your code I saw the setting of that ref in the DraxView to be what's breaking. I literally have no idea why it works in one harness and not another.

I tired downgrade to 1.8 of react-native-gesture-handler handler, but gradle choked on it during the build.

dunno. frustrated.

[lafiosca]

I'm sorry. I understand how frustrating it can be to see a library like this fall into a state of disrepair and not work with current versions of the platform. (I once gave a talk on that topic 😅) Sadly I still have no availability to work on Drax for the foreseeable future.

[Arkan4ik]

@artemis-prime how did you solve this? did you find another library? for me this library does not work on android

[artemis-prime]

@Arkan4ik. I kind of built my own system on top of react-native-gesture-handler. It really wasn't that hard. If you're interested in see it, it's in my chess-two-ways repo which is public. It's in apps/chess-rn/src/app/chessboard/ChessDnD.tsx Obviously, in the domain is chess, with an 8x8 matrix, the problem of hit-testing is greatly simplified. But one could easily keep a map of draggables / droppables and do one's own. That's basically what Drax and other similar systems do.