react-native-drax: Library not working on Android Emulator

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.