Resolve: app failing Typescript typecheck when using rn-range-slider

LabelContainer.tsx

@@ -1,19 +1,20 @@
-import React, { PureComponent } from 'react';
-import { View } from 'react-native';
+import {View} from 'react-native';
+import {PureComponent} from 'react';
 
 class LabelContainer extends PureComponent {
-
   state = {
     value: Number.NaN,
   };
-  
-  setValue = value => {
-    this.setState({ value });
-  }
+
+  setValue = (value: number) => {
+    this.setState({value});
+  };
 
   render() {
-    const { renderContent, ...restProps } = this.props;
-    const { value } = this.state;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const {renderContent, ...restProps} = this.props;
+    const {value} = this.state;
     return (
       <View {...restProps}>
         {renderContent(value)}

helpers.ts

@@ -11,9 +11,8 @@ export const isLowCloser = (
   return distanceFromLow < distanceFromHigh;
 };
 
-export const clamp = (value: number, min: number, max: number): number => {
-  return Math.min(Math.max(value, min), max);
-};
+export const clamp = (value: number, min: number, max: number): number =>
+  Math.min(Math.max(value, min), max);
 
 export const getValueForPosition = (
   positionInView: number,

hooks.tsx

@@ -32,8 +32,7 @@ export const useLowHigh = (
   step: number,
 ) => {
   const validLowProp = lowProp === undefined ? min : clamp(lowProp, min, max);
-  const validHighProp =
-    highProp === undefined ? max : clamp(highProp, min, max);
+  const validHighProp = highProp === undefined ? max : clamp(highProp, min, max);
   const inPropsRef = useRef({
     low: validLowProp,
     high: validHighProp,
@@ -67,8 +66,8 @@ export const useLowHigh = (
 export const useWidthLayout = (
   widthRef: MutableRefObject<number>,
   callback?: (width: number) => void,
-) => {
-  return useCallback(
+) =>
+  useCallback(
     ({nativeEvent}) => {
       const {
         layout: {width},
@@ -83,7 +82,6 @@ export const useWidthLayout = (
     },
     [callback, widthRef],
   );
-};
 
 /**
  * This hook creates a component which follows the thumb.
@@ -138,6 +136,8 @@ export const useThumbFollower = (
   const follower = (
     <Animated.View style={[transform, {opacity: isPressed ? 1 : 0}]}>
       <FollowerContainer
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         onLayout={handleLayout}
         ref={contentContainerRef}
         renderContent={renderContent}
@@ -174,7 +174,8 @@ export const useSelectedRail = (
       disableRange ? containerWidth - thumbWidth - leftValue : rightValue,
     );
   }, [inPropsRef, containerWidthRef, disableRange, thumbWidth, left, right]);
-  const styles = useMemo(
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const styles: object = useMemo(
     () => ({
       position: 'absolute',
       left: I18nManager.isRTL ? right : left,

index.tsx

@@ -104,16 +104,20 @@ const Slider: React.FC<SliderProps> = ({
     }
     const {low, high} = inPropsRef.current;
     if (!disableRange) {
+      // eslint-disable-next-line @typescript-eslint/no-shadow
       const {current: highThumbX} = highThumbXRef;
       const highPosition =
         ((high - min) / (max - min)) * (containerWidth - thumbWidth);
       highThumbX.setValue(highPosition);
     }
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     const {current: lowThumbX} = lowThumbXRef;
     const lowPosition =
       ((low - min) / (max - min)) * (containerWidth - thumbWidth);
     lowThumbX.setValue(lowPosition);
-    updateSelectedRail();
+    if (typeof updateSelectedRail === 'function') {
+      updateSelectedRail();
+    }
     onValueChanged?.(low, high, false);
   }, [
     disableRange,
@@ -133,7 +137,14 @@ const Slider: React.FC<SliderProps> = ({
     ) {
       updateThumbs();
     }
-  }, [highProp, inPropsRefPrev.lowPrev, inPropsRefPrev.highPrev, lowProp]);
+  }, [
+    highProp,
+    inPropsRefPrev.lowPrev,
+    inPropsRefPrev.highPrev,
+    lowProp,
+    inPropsRefPrev,
+    updateThumbs,
+  ]);
 
   useEffect(() => {
     updateThumbs();
@@ -152,19 +163,17 @@ const Slider: React.FC<SliderProps> = ({
     [thumbWidth],
   );
 
-  const lowStyles = useMemo(() => {
-    return {transform: [{translateX: lowThumbX}]};
-  }, [lowThumbX]);
+  const lowStyles = useMemo(
+    () => ({transform: [{translateX: lowThumbX}]}),
+    [lowThumbX]);
 
-  const highStyles = useMemo(() => {
-    return disableRange
-      ? null
-      : [styles.highThumbContainer, {transform: [{translateX: highThumbX}]}];
-  }, [disableRange, highThumbX]);
+  const highStyles = useMemo(
+    () => disableRange ? null : [styles.highThumbContainer, {transform: [{translateX: highThumbX}]}],
+    [disableRange, highThumbX]);
 
-  const railContainerStyles = useMemo(() => {
-    return [styles.railsContainer, {marginHorizontal: thumbWidth / 2}];
-  }, [thumbWidth]);
+  const railContainerStyles = useMemo(
+    () => [styles.railsContainer, {marginHorizontal: thumbWidth / 2}],
+    [thumbWidth]);
 
   const [labelView, labelUpdate] = useThumbFollower(
     containerWidthRef,
@@ -208,11 +217,14 @@ const Slider: React.FC<SliderProps> = ({
             return;
           }
           setPressed(true);
+          // eslint-disable-next-line @typescript-eslint/no-shadow
           const {current: lowThumbX} = lowThumbXRef;
+          // eslint-disable-next-line @typescript-eslint/no-shadow
           const {current: highThumbX} = highThumbXRef;
           const {locationX: downX, pageX} = nativeEvent;
           const containerX = pageX - downX;
 
+          // eslint-disable-next-line @typescript-eslint/no-shadow
           const {low, high, min, max} = inPropsRef.current;
           onSliderTouchStart?.(low, high);
           const containerWidth = containerWidthRef.current;
@@ -229,6 +241,7 @@ const Slider: React.FC<SliderProps> = ({
           gestureStateRef.current.isLow = isLow;
 
           const handlePositionChange = (positionInView: number) => {
+            // eslint-disable-next-line @typescript-eslint/no-shadow
             const {low, high, min, max, step} = inPropsRef.current;
             const minValue = isLow ? min : low + minRange;
             const maxValue = isLow ? high - minRange : max;
@@ -256,10 +269,14 @@ const Slider: React.FC<SliderProps> = ({
             (isLow ? lowThumbX : highThumbX).setValue(absolutePosition);
             onValueChanged?.(isLow ? value : low, isLow ? high : value, true);
             (isLow ? setLow : setHigh)(value);
-            labelUpdate &&
-            labelUpdate(gestureStateRef.current.lastPosition, value);
-            notchUpdate &&
-            notchUpdate(gestureStateRef.current.lastPosition, value);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            labelUpdate && labelUpdate(gestureStateRef.current.lastPosition, value);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            notchUpdate && notchUpdate(gestureStateRef.current.lastPosition, value);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             updateSelectedRail();
           };
           handlePositionChange(downX);
@@ -281,17 +298,20 @@ const Slider: React.FC<SliderProps> = ({
         },
       }),
     [
+      disabled,
       pointerX,
       inPropsRef,
+      onSliderTouchStart,
       thumbWidth,
       disableRange,
-      disabled,
+      minRange,
       onValueChanged,
       setLow,
       setHigh,
       labelUpdate,
       notchUpdate,
       updateSelectedRail,
+      onSliderTouchEnd,
     ],
   );
 

styles.ts

@@ -1,4 +1,4 @@
-import { I18nManager, StyleSheet } from 'react-native';
+import {I18nManager, StyleSheet} from 'react-native';
 
 export default StyleSheet.create({
   controlsContainer: {
@@ -15,13 +15,13 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   labelFixedContainer: {
-    alignItems: I18nManager.isRTL ? 'flex-end' : "flex-start",
+    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
   },
   labelFloatingContainer: {
     position: 'absolute',
     left: 0,
     right: 0,
-    alignItems: I18nManager.isRTL ? 'flex-end' : "flex-start",
+    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
   },
   touchableArea: {
     ...StyleSheet.absoluteFillObject,