Calling native function from TypeScript in react-native

Question

Lately I needed a simple function to interact with the native code, but I decided not to build a package, because it wouldn't be very useful. I created the java files exactly as if they were from a plugin and registered it in MainApplication.

I'm using typescript so now I'm struggling with the rn to java interaction. I tried with a js file as follows:

import NativeModules from 'react-native';
const AndroidService = NativeModules;
export default { AndroidService }

But then I have to define types (message from vs code):

Property 'play' does not exist on type '{ AndroidService: typeof import("/home/karol/Git/TailosiveHub-react/node_modules/@types/react-native/index"); }'.

I tried creating a index.d.ts file in the root of the project, but that doesn't work.

How do I define types for a native module in typescript?

MainApplication:

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    packages.add(new AndroidServicePackage());
    // packages.add(new MainReactPackage());
    return packages;
}

AndroidServicePackage:

@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
  return Arrays.<NativeModule>asList(new AndroidServiceModule(reactContext));
}

AndroidServiceModule:

@Override
public String getName() {
    return "AndroidService";
}

Method:

@ReactMethod
public void play(String streamingURL/*, ReadableMap options*/) {
  doSomething();
}

Steven L · Accepted Answer · 2020-02-09 00:17:06Z

2

The NativeModules import contains the native modules inside, so you simply need to extract the AndroidService module as a property.

import NativeModules from 'react-native';
const { AndroidService } = NativeModules
export default { AndroidService }

Alternatively, you can simply export it like so:

import NativeModules from 'react-native';
exports.default = NativeModules.AndroidService;

This should give you the result that you want, provided that you have the corresponding native module named AndroidService added inside a package given to React Native.

Taken from React Native's documentation on Native Modules

answered Feb 9, 2020 at 0:17

Steven L

212 bronze badges

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

1 Comment

Karol Wasowski Over a year ago

This doesn't work: AndroidService.default.play(url) is not a function (is undefined). I've added some more details to my post.

Karol Wasowski · Accepted Answer · 2020-02-10 18:48:09Z

0

I fixed it by fixing my imports in the plugin ts file. It now looks like this:

import { NativeModules } from 'react-native';
const AndroidService = NativeModules.AndroidService;
export default AndroidService;

answered Feb 10, 2020 at 18:48

Karol Wasowski

4821 gold badge7 silver badges19 bronze badges

Comments

emeraldsanto · Accepted Answer · 2020-02-10 18:52:09Z

0

You have to add brackets around your assignation to AndroidService like so (that's called destructuring):

import { NativeModules } from 'react-native'; 
export const { AndroidService } = NativeModules

Then in another file you can use it like so:

import { AndroidService } from 'path/to/exporting/file';

...

AndroidService.play("YOUR_URL");

edited Feb 10, 2020 at 18:52

answered Feb 10, 2020 at 16:39

emeraldsanto

4,7611 gold badge17 silver badges28 bronze badges

1 Comment

Karol Wasowski Over a year ago

In the file where I import the module vs code tells me

Property 'AndroidService' does not exist on type 'typeof import("/home/karol/Git/TailosiveHub-react/node_modules/@types/react-native/index")'

And if I run the app I get: TypeError: undefined is not an object (evaluating '_AndroidService.AndroidService.play')

Collectives™ on Stack Overflow

Calling native function from TypeScript in react-native

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related