How to use react-native-video-controls with typescript?

[jrhager84]

When I import the Video component from the package, I get this error:

Could not find a declaration file for module 'react-native-video-controls'. '/Volumes/Work/frankmobile/node_modules/react-native-video-controls/VideoPlayer.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-native-video-controls` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native-video-controls';`ts(7016)

How do I implement the typing for it? I tried the recommendation but it doesn't seem a declaration file exists. How do I declare it without doing it manually? Thanks!

[edenmoyal1]

any news? facing the same problem

[I-vasilich-I]

When I import the Video component from the package, I get this error:

Could not find a declaration file for module 'react-native-video-controls'. '/Volumes/Work/frankmobile/node_modules/react-native-video-controls/VideoPlayer.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-native-video-controls` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native-video-controls';`ts(7016)

How do I implement the typing for it? I tried the recommendation but it doesn't seem a declaration file exists. How do I declare it without doing it manually? Thanks!

just create index.d.ts file and put there declare module 'react-native-video-controls';
@edenmoyal1

[FrancescoCioria]

this is a better implementation if you want to have real typings instead of any

create a react-native-video-controls.d.ts file as:

declare module 'react-native-video-controls' {
  import * as React from 'react';
  import {VideoProperties} from 'react-native-video';

  type VideoControlsProps = {
    onEnterFullscreen?: () => void;
    onExitFullscreen?: () => void;
    onHideControls?: () => void;
    onShowControls?: () => void;
    onError?: () => void;
    onPause?: () => void;
    onPlay?: () => void;
    onBack?: () => void;
    onEnd?: () => void;
    toggleResizeModeOnFullscreen?: boolean;
    controlTimeout?: number;
    showOnStart?: boolean;
    showTimeRemaining?: boolean;
    tapAnywhereToPause?: boolean;
    disableFullscreen?: boolean;
    disablePlayPause?: boolean;
    disableSeekbar?: boolean;
    disableVolume?: boolean;
    disableTimer?: boolean;
    disableBack?: boolean;
  };

  export default class Video extends React.Component<
    VideoProperties & VideoControlsProps
  > {
    player: {
      ref: {
        presentFullscreenPlayer(): void;
        dismissFullscreenPlayer(): void;
        restoreUserInterfaceForPictureInPictureStopCompleted(
          restored: boolean,
        ): void;
        save(): Promise<void>;
        seek(time: number, tolerance?: number): void;
      };
    };
  }
}

the typings are not 100% complete, but you can easily improve them from here