react-native "type error: undefined is not a function" for a function bridged from native code

68 views Asked by At

I'm trying to use the react-native-dji-mobile-sdk library (Link to github: https://github.com/Kubessandra/react-native-dji-mobile-sdk). It's a wrapper to bridge native IOS and Android code from the dji mobile sdk to react native.

The specific functions in question are startTakeoff() and startLanding() in SDKAircraft.ts. I've written some basic code to register the app and connect to a DJI drone, and then access the functionality to take off and land. Registration and connection works (from SDKManager.ts). When tested, the remaining methods of SDKAircraft (getSerialNumber(), getModel(), isConnected()) work perfectly. But when trying to use startTakeoff() and startLanding() I get the error "undefined is not a function" or "function is undefined".

My AndroidManifest.xml includes the required

<meta-data
android:name="com.dji.sdk.API_KEY"
android:value="Your DJI API Key Here"/>

section with a valid API key that registered with the appropriate package name, in the correct place

Here is my App.tsx:

import React, {useState} from 'react';
import {
  SafeAreaView,
  Button,
  StyleSheet,
  useColorScheme,
} from 'react-native';
import { sdkManager, SDKDrone } from 'react-native-dji-mobile-sdk';




function App(): JSX.Element {
  const [drone, setDrone] = useState<SDKDrone | null>(null)
  const isDarkMode = useColorScheme() === 'dark';

  const register = async () => {
    try {
      await sdkManager.registerApp()
      await sdkManager.startConnectionToProduct()
      const newDrone = await sdkManager.getProduct()
      setDrone(newDrone);
    } catch (error) {
      console.error(error)
    }
  }

  const takeoff = async () => {
    try {
      if (drone) {
        await drone.startTakeOff()
      }
    } catch (error) {
      console.error(error)
    }
  }

  const land = async () => {
    try {
      if (drone) {
        await drone.startLanding()
      }
    } catch (error) {
      console.error(error)
    }
  }

  return (
    <SafeAreaView>
      <Button onPress={register} title='REGISTER' />
      {drone !== null && (<Button onPress={takeoff} title='TAKE OFF' />)}
      {drone !== null && (<Button onPress={land} title='LAND' />)}
    </SafeAreaView>
  );
}

export default App;

My build.gradle:

buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 31

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.3.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

.My build.gradle is configured as such for a reason. My main project has uses react-native-gesture-handler, which for some reason requires the compileSdkVersion to be 33, while the dji wrapper only works if the targetSdkVersion is 31.

Additional Info: I'm building this on a macbook with zulu-11-jdk as my java sdk.

I've tried running this in my main project and with just the simple UI I've created; both give me the same error. I've also tried calling the methods directly in my buttons as such onPress={drone.startLanding} and I've tried wrapping my asynchronous methods in synchronous methods as follows and putting those into my button onPress. This has worked before, over 6 months ago in a separate project which I haven't been able to run successfully within the last month (accessed from a repo)

0

There are 0 answers