App fails Typecheck when rn-range-slider installed

[charneykaye]

trafficstars

I'm using rn-range-slider 2.2.2 with react-native 0.68.3

Here's my tsconfig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es2017"],
    "baseUrl": "./src",
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true
  }
}

Typecheck fails as follows. My attempts to ask Typecheck to ignore this library have yet to be successful.

NOTE: Adding "skipLibCheck": true, has nothing to do with this. Contrary to numerous sources, this is for ignoring *.d.ts files and you will see my errors are from .tsx files.

NOTE ALSO: adding exclude: [ "node_modules" ] also has no effect. Under normal circumstances, and contrary to numerous sources, this is an unnecessary redundancy.

node_modules/rn-range-slider/hooks.tsx:141:9 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: {} | Readonly<{}>): LabelContainer', gave the following error.
    Type '{ onLayout: ({ nativeEvent }: any) => void; ref: MutableRefObject<LabelContainer | null>; renderContent: (value: number) => ReactNode; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<LabelContainer> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
      Property 'onLayout' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<LabelContainer> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
  Overload 2 of 2, '(props: {}, context: any): LabelContainer', gave the following error.
    Type '{ onLayout: ({ nativeEvent }: any) => void; ref: MutableRefObject<LabelContainer | null>; renderContent: (value: number) => ReactNode; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<LabelContainer> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
      Property 'onLayout' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<LabelContainer> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

141         onLayout={handleLayout}
            ~~~~~~~~


node_modules/rn-range-slider/index.tsx:116:5 - error TS2349: This expression is not callable.
  Not all constituents of type '{ position: string; left: Value; right: Value; } | (() => void)' are callable.
    Type '{ position: string; left: Value; right: Value; }' has no call signatures.

116     updateSelectedRail();
        ~~~~~~~~~~~~~~~~~~

node_modules/rn-range-slider/index.tsx:260:13 - error TS2349: This expression is not callable.
  Not all constituents of type 'Element | ((thumbPositionInView: any, value: any) => void)' are callable.
    Type 'Element' has no call signatures.

260             labelUpdate(gestureStateRef.current.lastPosition, value);
                ~~~~~~~~~~~

node_modules/rn-range-slider/index.tsx:262:13 - error TS2349: This expression is not callable.
  Not all constituents of type 'Element | ((thumbPositionInView: any, value: any) => void)' are callable.
    Type 'Element' has no call signatures.

262             notchUpdate(gestureStateRef.current.lastPosition, value);
                ~~~~~~~~~~~

node_modules/rn-range-slider/index.tsx:263:13 - error TS2349: This expression is not callable.
  Not all constituents of type '{ position: string; left: Value; right: Value; } | (() => void)' are callable.
    Type '{ position: string; left: Value; right: Value; }' has no call signatures.

263             updateSelectedRail();
                ~~~~~~~~~~~~~~~~~~

node_modules/rn-range-slider/index.tsx:307:26 - error TS2322: Type '{ position: string; left: Value; right: Value; } | (() => void)' is not assignable to type 'false | RegisteredStyle<ViewStyle> | Value | AnimatedInterpolation<string | number> | WithAnimatedObject<ViewStyle> | WithAnimatedArray<...> | null | undefined'.
  Type '{ position: string; left: Animated.Value; right: Animated.Value; }' is not assignable to type 'false | RegisteredStyle<ViewStyle> | Value | AnimatedInterpolation<string | number> | WithAnimatedObject<ViewStyle> | WithAnimatedArray<...> | null | undefined'.
    Type '{ position: string; left: Animated.Value; right: Animated.Value; }' is not assignable to type 'WithAnimatedObject<ViewStyle>'.
      Types of property 'position' are incompatible.
        Type 'string' is not assignable to type '"absolute" | "relative" | Value | AnimatedInterpolation<string | number> | undefined'.

307           <Animated.View style={selectedRailStyle}>
                             ~~~~~

  node_modules/@types/react-native/index.d.ts:2621:5
    2621     style?: StyleProp<ViewStyle> | undefined;
             ~~~~~
    The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & AnimatedProps<ViewProps & RefAttributes<View>> & { children?: ReactNode; }'

node_modules/rn-range-slider/LabelContainer.tsx:10:14 - error TS7006: Parameter 'value' implicitly has an 'any' type.

10   setValue = value => {
                ~~~~~

node_modules/rn-range-slider/LabelContainer.tsx:15:13 - error TS2339: Property 'renderContent' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

15     const { renderContent, ...restProps } = this.props;
               ~~~~~~~~~~~~~


Found 8 errors in 3 files.

Errors  Files
     1  node_modules/rn-range-slider/hooks.tsx:141
     5  node_modules/rn-range-slider/index.tsx:116
     2  node_modules/rn-range-slider/LabelContainer.tsx:10

Posted to StackOverflow: https://stackoverflow.com/questions/75026405/app-fails-typescript-typecheck-when-rn-range-slider-installed

[princefishthrower]

There is no mystery here. The typings are wrong within this library, that's it. If I get the time I'll submit a pull request to fix this, I like having 0 type errors / warnings in my projects.

[jcmnavia]

Is there al fix already for this? 👀

EDIT: I've managed to pass the tsc checks doing the following:

const RangeSlider = require('rn-range-slider').default;

[Dimasprog]

There is no mystery here. The typings are wrong within this library, that's it. If I get the time I'll submit a pull request to fix this, I like having 0 type errors / warnings in my projects.

Is there already any fix?

[adamplenti]

I fixed this by creating custom config and types file. See code below.

package.json:

"typecheck": "tsc --project tsconfig.typecheck.json",

tsconfig.typecheck.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "noEmit": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
        "rn-range-slider": ["src/types/rn-range-slider"] // this is important
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": [
    "node_modules/**/*", // this is important
  ]
} 

src/types/rn-range-slider.ts:

declare module 'rn-range-slider' {
    const RangeSlider: any;
    export default RangeSlider;
    export type SliderProps = any;
}

What a pain in the ass 😢