fix loose types in GifView module

modules/expo-bluesky-gif-view/src/GifView.tsx

@@ -1,17 +1,24 @@
-import React from 'react'
+import {createRef, PureComponent} from 'react'
 import {requireNativeModule} from 'expo'
 import {requireNativeViewManager} from 'expo-modules-core'
 
 import {type GifViewProps} from './GifView.types'
 
-const NativeModule = requireNativeModule('ExpoBlueskyGifView')
+interface GifViewNativeRef {
+  playAsync: () => Promise<void>
+  pauseAsync: () => Promise<void>
+  toggleAsync: () => Promise<void>
+}
+
+const NativeModule: {
+  prefetchAsync: (sources: string[]) => Promise<void>
+} = requireNativeModule('ExpoBlueskyGifView')
 const NativeView: React.ComponentType<
-  GifViewProps & {ref: React.RefObject<any>}
+  GifViewProps & {ref: React.RefObject<GifViewNativeRef | null>}
 > = requireNativeViewManager('ExpoBlueskyGifView')
 
-export class GifView extends React.PureComponent<GifViewProps> {
-  // TODO native types, should all be the same as those in this class
-  private nativeRef: React.RefObject<any> = React.createRef()
+export class GifView extends PureComponent<GifViewProps> {
+  private nativeRef: React.RefObject<GifViewNativeRef | null> = createRef()
 
   constructor(props: GifViewProps | Readonly<GifViewProps>) {
     super(props)
@@ -22,15 +29,15 @@ export class GifView extends React.PureComponent<GifViewProps> {
   }
 
   async playAsync(): Promise<void> {
-    await this.nativeRef.current.playAsync()
+    await this.nativeRef.current?.playAsync()
   }
 
   async pauseAsync(): Promise<void> {
-    await this.nativeRef.current.pauseAsync()
+    await this.nativeRef.current?.pauseAsync()
   }
 
   async toggleAsync(): Promise<void> {
-    await this.nativeRef.current.toggleAsync()
+    await this.nativeRef.current?.toggleAsync()
   }
 
   render() {

modules/expo-bluesky-gif-view/src/GifView.web.tsx

@@ -1,10 +1,11 @@
-import {createRef, PureComponent, type RefObject} from 'react'
+import {createRef, PureComponent} from 'react'
 import {StyleSheet} from 'react-native'
 
 import {type GifViewProps} from './GifView.types'
 
 export class GifView extends PureComponent<GifViewProps> {
-  private readonly videoPlayerRef: RefObject<HTMLMediaElement> = createRef()
+  private readonly videoPlayerRef: React.RefObject<HTMLVideoElement | null> =
+    createRef()
   private isLoaded = false
 
   constructor(props: GifViewProps | Readonly<GifViewProps>) {
@@ -18,9 +19,9 @@ export class GifView extends PureComponent<GifViewProps> {
   componentDidUpdate(prevProps: Readonly<GifViewProps>) {
     if (prevProps.autoplay !== this.props.autoplay) {
       if (this.props.autoplay) {
-        this.playAsync()
+        void this.playAsync()
       } else {
-        this.pauseAsync()
+        void this.pauseAsync()
       }
     }
   }
@@ -29,6 +30,7 @@ export class GifView extends PureComponent<GifViewProps> {
     document.removeEventListener('visibilitychange', this.onVisibilityChange)
   }
 
+  // eslint-disable-next-line @typescript-eslint/require-await
   static async prefetchAsync(_: string[]): Promise<void> {
     console.warn('prefetchAsync is not supported on web')
   }
@@ -81,6 +83,7 @@ export class GifView extends PureComponent<GifViewProps> {
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/require-await
   async pauseAsync(): Promise<void> {
     this.videoPlayerRef.current?.pause()
   }
@@ -102,12 +105,12 @@ export class GifView extends PureComponent<GifViewProps> {
         // When `<source>` children are present, omit `src` so the browser
         // walks the source list and picks via canPlayType.
         src={useSources ? undefined : source}
-        autoPlay={autoplay ? 'autoplay' : undefined}
+        autoPlay={autoplay ? true : undefined}
         preload={autoplay ? 'auto' : undefined}
         playsInline={true}
-        loop="loop"
-        muted="muted"
-        style={StyleSheet.flatten(style)}
+        loop={true}
+        muted={true}
+        style={StyleSheet.flatten(style) as React.CSSProperties}
         onCanPlay={this.onLoad}
         onPlay={this.firePlayerStateChangeEvent}
         onPause={this.firePlayerStateChangeEvent}