React Native extend NativeModules TypeScript types

Question

I have a native module and I would like to type it.

Here is an example of my module's interface

export interface BBAudioPlayer {
  playSound: (sound: 'click' | 'tada') => Promise<void>;
  pause: () => Promise<void>;
}

and that is how I use it:

NativeModules.BBAudioPlayer.playSound('tada');

How can extend NativeModules to add the types of my new module?

strdr4605 · Accepted Answer · 2020-06-19 12:21:05Z

20

// extendNativeModules.d.ts
// import original module declarations
import 'react-native';

export interface BBAudioPlayerInterface {
  playSound: (sound: 'click' | 'tada') => Promise<void>;
  pause: () => Promise<void>;
}

// and extend them!
declare module 'react-native' {

  interface NativeModulesStatic {
    BBAudioPlayer: BBAudioPlayerInterface;
  }
}

answered Jun 19, 2020 at 12:21

strdr4605

4,4522 gold badges21 silver badges30 bronze badges

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

1 Comment

Kevin Amiranoff Over a year ago

ah awesome. thanks! One of the issues I had is, I had called the file index.d.ts inside my folder and it didn't get picked up. Renaming the file to something else worked.

Ilia · Accepted Answer · 2024-09-23 10:18:34Z

0

Extending @strdr4605 response, you also need & NativeModule or extends NativeModule to your existing interface if you want to use

new NativeEventEmitter(NativeModules.BBAudioPlayer)

answered Sep 23, 2024 at 10:18

Ilia

11 silver badge3 bronze badges

Collectives™ on Stack Overflow

React Native extend NativeModules TypeScript types

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related