diff --git a/example-web/package-lock.json b/example-web/package-lock.json index 94254ebe..cb841a90 100644 --- a/example-web/package-lock.json +++ b/example-web/package-lock.json @@ -15,6 +15,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", @@ -3890,6 +3891,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-native": { + "version": "0.69.16", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.69.16.tgz", + "integrity": "sha512-wNaFnc3fyl33OcoZxRpamb9LN6B4bBkvQS/SswJLLM+h6y7SpsKmAIwKAxFAdttr+DZj9pVMwTIn6XA4Bto3KQ==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -19630,6 +19639,14 @@ "@types/react": "*" } }, + "@types/react-native": { + "version": "0.69.16", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.69.16.tgz", + "integrity": "sha512-wNaFnc3fyl33OcoZxRpamb9LN6B4bBkvQS/SswJLLM+h6y7SpsKmAIwKAxFAdttr+DZj9pVMwTIn6XA4Bto3KQ==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", diff --git a/example-web/package.json b/example-web/package.json index 31198794..28d8a91f 100644 --- a/example-web/package.json +++ b/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", diff --git a/example-web/src/App.tsx b/example-web/src/App.tsx index a096bec4..aee082cb 100644 --- a/example-web/src/App.tsx +++ b/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'; diff --git a/example-web/src/Examples.tsx b/example-web/src/Examples.tsx index 7a8ed1ce..b80419e5 100644 --- a/example-web/src/Examples.tsx +++ b/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 { diff --git a/example-web/src/Props.tsx b/example-web/src/Props.tsx index 04ac35ad..b9d487d6 100644 --- a/example-web/src/Props.tsx +++ b/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 { diff --git a/example-web/tsconfig.json b/example-web/tsconfig.json index a273b0cf..f0ee422f 100644 --- a/example-web/tsconfig.json +++ b/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" diff --git a/example/package-lock.json b/example/package-lock.json index 6b8fa1cd..6dc2566d 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -49,6 +49,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", @@ -60,7 +61,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", @@ -20591,6 +20593,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", @@ -20602,7 +20605,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", diff --git a/package/package-lock.json b/package/package-lock.json index f4bbaf74..93a49e33 100644 --- a/package/package-lock.json +++ b/package/package-lock.json @@ -16,6 +16,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", @@ -27,7 +28,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", @@ -6479,6 +6481,15 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-dom": { + "version": "18.0.10", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz", + "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-native": { "version": "0.69.5", "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.69.5.tgz", @@ -16084,6 +16095,19 @@ "ws": "^7" } }, + "node_modules/react-dom": { + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz", + "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.21.0" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -23913,6 +23937,15 @@ "csstype": "^3.0.2" } }, + "@types/react-dom": { + "version": "18.0.10", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz", + "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-native": { "version": "0.69.5", "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.69.5.tgz", @@ -31228,6 +31261,16 @@ "ws": "^7" } }, + "react-dom": { + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz", + "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "scheduler": "^0.21.0" + } + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package/package.json b/package/package.json index 9281e320..16e0ee2c 100644 --- a/package/package.json +++ b/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", diff --git a/package/src/RNCSliderNativeComponent.ts b/package/src/RNCSliderNativeComponent.ts index bd00338a..3789bc2e 100644 --- a/package/src/RNCSliderNativeComponent.ts +++ b/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; vertical?: WithDefault; tapToSeek?: WithDefault; - maximumTrackImage?: ImageSource; + maximumTrackImage?: ImageSourcePropType; maximumTrackTintColor?: ColorValue; maximumValue?: Float; - minimumTrackImage?: ImageSource; + minimumTrackImage?: ImageSourcePropType; minimumTrackTintColor?: ColorValue; minimumValue?: Float; onChange?: BubblingEventHandler; @@ -33,9 +32,9 @@ export interface NativeProps extends ViewProps { onRNCSliderValueChange?: BubblingEventHandler; step?: Float; testID?: string; - thumbImage?: ImageSource; + thumbImage?: ImageSourcePropType; thumbTintColor?: ColorValue; - trackImage?: ImageSource; + trackImage?: ImageSourcePropType; value?: Float; lowerLimit?: Float; upperLimit?: Float; diff --git a/package/src/RNCSliderNativeComponent.web.tsx b/package/src/RNCSliderNativeComponent.web.tsx index a454ef51..b2ee82b4 100644 --- a/package/src/RNCSliderNativeComponent.web.tsx +++ b/package/src/RNCSliderNativeComponent.web.tsx @@ -1,4 +1,5 @@ -//@ts-ignore +/// + 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).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': diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx index e66c72f5..dde20b21 100644 --- a/package/src/Slider.tsx +++ b/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.