Fix TypeScript coverage

example-web/package.json

@@ -10,6 +10,7 @@
     "@types/node": "^16.18.9",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "@types/react-native": "^0.69.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-web": "^0.18.10",

example-web/src/App.tsx

@@ -5,7 +5,6 @@ import {
   ScrollView,
   Platform,
   StyleSheet,
-// @ts-ignore
 } from 'react-native';
 
 import {examples, Props as ExamplesTabProperties} from './Examples';

example-web/src/Examples.tsx

@@ -1,7 +1,5 @@
 import React, {useState} from 'react';
-// @ts-ignore
 import {Text, View, StyleSheet} from 'react-native';
-// @ts-ignore
 import Slider, {SliderProps} from '@react-native-community/slider';
 
 export interface Props {

example-web/src/Props.tsx

@@ -1,7 +1,5 @@
 import React, {useState} from 'react';
-// @ts-ignore
 import {Text, View, StyleSheet} from 'react-native';
-// @ts-ignore
 import Slider, {SliderProps} from '@react-native-community/slider';
 
 export interface Props {

example-web/tsconfig.json

@@ -18,7 +18,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@react-native-community/slider": ["../package"]
+    }
   },
   "include": [
     "src"

package/package.json

@@ -29,6 +29,7 @@
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "2.0.0",
     "@types/jest": "^28.1.8",
+    "@types/react-dom": "18.0.x",
     "@types/react-native": "^0.69.5",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^26.6.3",
@@ -40,7 +41,8 @@
     "flow-bin": "^0.163.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "^0.70.3",
-    "react": "^18.0.0",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
     "react-native": "^0.69.1",
     "react-native-windows": "^0.69.1",
     "react-test-renderer": "^18.0.0",

package/src/RNCSliderNativeComponent.ts

@@ -1,7 +1,6 @@
 import type {ColorValue, HostComponent, ViewProps} from 'react-native';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-//@ts-ignore
-import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
+import type {ImageSourcePropType} from 'react-native';
 import type {
   Float,
   WithDefault,
@@ -21,10 +20,10 @@ export interface NativeProps extends ViewProps {
   inverted?: WithDefault<boolean, false>;
   vertical?: WithDefault<boolean, false>;
   tapToSeek?: WithDefault<boolean, false>;
-  maximumTrackImage?: ImageSource;
+  maximumTrackImage?: ImageSourcePropType;
   maximumTrackTintColor?: ColorValue;
   maximumValue?: Float;
-  minimumTrackImage?: ImageSource;
+  minimumTrackImage?: ImageSourcePropType;
   minimumTrackTintColor?: ColorValue;
   minimumValue?: Float;
   onChange?: BubblingEventHandler<Event>;
@@ -33,9 +32,9 @@ export interface NativeProps extends ViewProps {
   onRNCSliderValueChange?: BubblingEventHandler<Event>;
   step?: Float;
   testID?: string;
-  thumbImage?: ImageSource;
+  thumbImage?: ImageSourcePropType;
   thumbTintColor?: ColorValue;
-  trackImage?: ImageSource;
+  trackImage?: ImageSourcePropType;
   value?: Float;
   lowerLimit?: Float;
   upperLimit?: Float;

package/src/RNCSliderNativeComponent.web.tsx

@@ -1,4 +1,5 @@
-//@ts-ignore
+/// <reference lib="dom" />
+
 import ReactDOM from 'react-dom';
 import React, {RefObject, useCallback} from 'react';
 import {
@@ -10,9 +11,10 @@ import {
   GestureResponderEvent,
   LayoutChangeEvent,
   Image,
+  AccessibilityActionEvent,
 } from 'react-native';
-//@ts-ignore
-import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
+
+import type {ImageSourcePropType} from 'react-native';
 
 type Event = Readonly<{
   nativeEvent: {
@@ -34,7 +36,7 @@ export interface Props {
   disabled: boolean;
   trackHeight: number;
   thumbSize: number;
-  thumbImage?: ImageSource;
+  thumbImage?: ImageSourcePropType;
   onRNCSliderSlidingStart: (event: Event) => void;
   onRNCSliderSlidingComplete: (event: Event) => void;
   onRNCSliderValueChange: (event: Event) => void;
@@ -149,11 +151,9 @@ const RCTSliderWebComponent = React.forwardRef(
       hasBeenResized.current = true;
     };
     React.useEffect(() => {
-      //@ts-ignore
       window.addEventListener('resize', onResize);
 
       return () => {
-        //@ts-ignore
         window.removeEventListener('resize', onResize);
       };
     }, []);
@@ -211,10 +211,13 @@ const RCTSliderWebComponent = React.forwardRef(
     }, [maximumValue, minimumValue, step]);
 
     const updateContainerPositionX = () => {
-      //@ts-ignore
-      const positionX = ReactDOM.findDOMNode(
+      const element = ReactDOM.findDOMNode(
+        // TODO: Unsafe casting of a forwarded ref
         (containerRef as RefObject<any>).current,
-      ).getBoundingClientRect()?.x;
+        // findDOMNode is not generic and always includes Text as a possible type.
+        // Here we know the ref is always an Element.
+      ) as unknown as Element | null;
+      const positionX = element?.getBoundingClientRect()?.x;
       containerPositionX.current = positionX ?? 0;
     };
 
@@ -253,7 +256,7 @@ const RCTSliderWebComponent = React.forwardRef(
       updateValue(newValue);
     };
 
-    const accessibilityActions = (event: any) => {
+    const accessibilityActions = (event: AccessibilityActionEvent) => {
       const tenth = (maximumValue - minimumValue) / 10;
       switch (event.nativeEvent.actionName) {
         case 'increment':

package/src/Slider.tsx

@@ -11,8 +11,7 @@ import {
   StyleProp,
 } from 'react-native';
 import RCTSliderNativeComponent from './index';
-//@ts-ignore
-import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
+import type {ImageSourcePropType} from 'react-native';
 
 import type {Ref} from 'react';
 
@@ -42,19 +41,19 @@ type IOSProps = Readonly<{
    * Assigns a single image for the track. Only static images are supported.
    * The center pixel of the image will be stretched to fill the track.
    */
-  trackImage?: ImageSource;
+  trackImage?: ImageSourcePropType;
 
   /**
    * Assigns a minimum track image. Only static images are supported. The
    * rightmost pixel of the image will be stretched to fill the track.
    */
-  minimumTrackImage?: ImageSource;
+  minimumTrackImage?: ImageSourcePropType;
 
   /**
    * Assigns a maximum track image. Only static images are supported. The
    * leftmost pixel of the image will be stretched to fill the track.
    */
-  maximumTrackImage?: ImageSource;
+  maximumTrackImage?: ImageSourcePropType;
 
   /**
    * Permits tapping on the slider track to set the thumb position.
@@ -163,7 +162,7 @@ type Props = ViewProps &
     /**
      * Sets an image for the thumb. Only static images are supported.
      */
-    thumbImage?: ImageSource;
+    thumbImage?: ImageSourcePropType;
 
     /**
      * If true the slider will be inverted.