Incubator.Slider - fix types

demo/src/screens/incubatorScreens/IncubatorSliderScreen.tsx

@@ -111,7 +111,6 @@ const IncubatorSliderScreen = () => {
         <Text margin-10 text70BL $textDefault>
           Disabled Slider
         </Text>
-        {/* @ts-expect-error */}
         <Incubator.Slider value={0.4} containerStyle={styles.container} disableRTL={disableRTL} disabled/>
       </View>
     );

src/incubator/Slider/SliderPresenter.ts

@@ -1,5 +1,5 @@
 import {SharedValue, interpolate} from 'react-native-reanimated';
-import {SliderProps} from '../../components/slider';
+import {SliderProps} from './index';
 
 export function getOffsetForValue(value: number, span: number, minimumValue = 0, maximumValue = 1) {
   const range = maximumValue - minimumValue;
@@ -38,7 +38,7 @@ function inRange(value: number, min: number, max: number) {
 }
 
 export function validateValues(props: SliderProps) {
-  const {useRange, value, minimumValue, maximumValue, initialMinimumValue, initialMaximumValue} = props;
+  const {useRange, value, minimumValue = 0, maximumValue = 1, initialMinimumValue, initialMaximumValue} = props;
   if (minimumValue > maximumValue || 
     useRange && initialMinimumValue && initialMaximumValue && initialMinimumValue > initialMaximumValue) {
     console.error('Your passed values are invalid. Please check if minimum values are not higher than maximum values');

src/incubator/Slider/Thumb.tsx

@@ -6,30 +6,29 @@ import {Colors} from '../../style';
 import View from '../../components/view';
 import {Constants} from '../../commons/new';
 
-export interface Props extends ViewProps {
-  defaultStyle?: SharedValue<ViewStyle>;
-  activeStyle?: SharedValue<ViewStyle>;
-  disableActiveStyling?: boolean;
-  hitSlop?: ViewProps['hitSlop'];
-  disabled?: boolean;
-  onSeekStart?: () => void;
-  onSeekEnd?: () => void;
-  disableRTL?: boolean;
+interface ThumbProps extends ViewProps {
   start: SharedValue<number>;
   end: SharedValue<number>;
   offset: SharedValue<number>;
-  shouldDisableRTL?: boolean;
-  stepInterpolation?: () => number;
-  shouldBounceToStep: boolean;
   stepInterpolatedValue: SharedValue<number>;
+  stepInterpolation?: () => number;
+  shouldBounceToStep?: boolean;
   gap?: number;
+  disabled?: boolean;
   secondary?: boolean;
+  defaultStyle?: SharedValue<ViewStyle>;
+  activeStyle?: SharedValue<ViewStyle>;
+  disableActiveStyling?: boolean;
+  hitSlop?: ViewProps['hitSlop'];
+  shouldDisableRTL?: boolean;
+  onSeekStart?: () => void;
+  onSeekEnd?: () => void;
 }
 
 const SHADOW_RADIUS = 4;
 const THUMB_SIZE = 24;
 
-const Thumb = (props: Props) => {
+const Thumb = (props: ThumbProps) => {
   const {
     disabled,
     disableActiveStyling,

src/incubator/Slider/index.tsx

@@ -1,13 +1,12 @@
 import _ from 'lodash';
-import React, {useImperativeHandle, useCallback, useMemo, useEffect} from 'react';
-import {StyleSheet, AccessibilityRole, StyleProp, ViewStyle, GestureResponderEvent, LayoutChangeEvent} from 'react-native';
+import React, {useImperativeHandle, useCallback, useMemo, useEffect, ReactElement} from 'react';
+import {StyleSheet, AccessibilityRole, StyleProp, ViewStyle, GestureResponderEvent, LayoutChangeEvent, ViewProps} from 'react-native';
 import {useSharedValue, useAnimatedStyle, runOnJS, useAnimatedReaction, withTiming} from 'react-native-reanimated';
 import {forwardRef, ForwardRefInjectedProps, Constants} from '../../commons/new';
 import {extractAccessibilityProps} from '../../commons/modifiers';
 import {Colors, Spacings} from '../../style';
 import {StyleUtils} from 'utils';
 import View from '../../components/view';
-import {SliderProps} from '../../components/slider';
 import {
   validateValues,
   getOffsetForValue,
@@ -17,6 +16,121 @@ import {
 import Thumb from './Thumb';
 import Track from './Track';
 
+export type SliderProps = {
+  /**
+   * Initial value
+   */
+  value?: number;
+  /**
+   * Track minimum value
+   */
+  minimumValue?: number;
+  /**
+   * Track maximum value
+   */
+  maximumValue?: number;
+  /**
+   * Initial minimum value (when useRange is true)
+   */
+  initialMinimumValue?: number;
+  /**
+   * Initial maximum value (when useRange is true)
+   */
+  initialMaximumValue?: number;
+  /**
+   * Step value of the slider. The value should be between 0 and (maximumValue - minimumValue)
+   */
+  step?: number;
+  /**
+   * The color used for the track from minimum value to current value
+   */
+  minimumTrackTintColor?: string;
+  /**
+   * The track color
+   */
+  maximumTrackTintColor?: string;
+  /**
+   * Custom render instead of rendering the track
+   */
+  renderTrack?: () => ReactElement | ReactElement[];
+  /**
+   * Callback for onValueChange
+   */
+  onValueChange?: (value: number) => void;
+  /**
+   * Callback that notifies about slider seeking is started
+   */
+  onSeekStart?: () => void;
+  /**
+   * Callback that notifies about slider seeking is finished
+   */
+  onSeekEnd?: () => void;
+  /**
+   * Callback that notifies when the reset function was invoked 
+   */
+  onReset?: () => void;
+  /**
+   * The container style
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * The track style
+   */
+  trackStyle?: StyleProp<ViewStyle>;
+  /**
+   * The thumb style
+   */
+  thumbStyle?: ViewStyle;
+  /**
+   * The active (during press) thumb style
+   */
+  activeThumbStyle?: ViewStyle;
+  /**
+   * If true the Slider will not change it's style on press
+   */
+  disableActiveStyling?: boolean;
+  /**
+   * Defines how far a touch event can start away from the thumb.
+   */
+  thumbHitSlop?: ViewProps['hitSlop'];
+  /**
+   * Thumb color
+   */
+  thumbTintColor?: string;
+  /**
+   * If true the Slider will be disabled and will appear in disabled color
+   */
+  disabled?: boolean;
+  /**
+   * If true the Slider will display a second thumb for the min value
+   */
+  useRange?: boolean;
+  /**
+   * If true the min and max thumbs will not overlap
+   */
+  useGap?: boolean;
+  /**
+   * Callback for onRangeChange. Returns values object with the min and max values
+   */
+  onRangeChange?: (values: {min: number, max: number}) => void;
+  /**
+   * If true the Slider will stay in LTR mode even if the app is on RTL mode
+   */
+  disableRTL?: boolean;
+  /**
+   * If true the component will have accessibility features enabled
+   */
+  accessible?: boolean;
+  /**
+   * The slider's test identifier
+   */
+  testID?: string;
+  /** 
+   * Whether to use the new Slider implementation using Reanimated
+   */
+  migrate?: boolean;
+}
+
 type Props = SliderProps & ForwardRefInjectedProps;
 interface Statics {
   reset: () => void;