@symbiote-native/slider 2.0.4 → 2.0.6

package/codegen-specs/RNCSliderNativeComponent.ts

@@ -0,0 +1,46 @@
+import type {ColorValue, HostComponent, ViewProps} from 'react-native';
+import {ImageSource, codegenNativeComponent} from 'react-native';
+import type {
+  Float,
+  WithDefault,
+  DirectEventHandler,
+  BubblingEventHandler,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+type Event = Readonly<{
+  value: Float;
+  fromUser?: boolean;
+}>;
+
+export interface NativeProps extends ViewProps {
+  accessibilityUnits?: string;
+  accessibilityIncrements?: ReadonlyArray<string>;
+  disabled?: WithDefault<boolean, false>;
+  inverted?: WithDefault<boolean, false>;
+  vertical?: WithDefault<boolean, false>;
+  tapToSeek?: WithDefault<boolean, false>;
+  maximumTrackImage?: ImageSource;
+  maximumTrackTintColor?: ColorValue;
+  maximumValue?: Double;
+  minimumTrackImage?: ImageSource;
+  minimumTrackTintColor?: ColorValue;
+  minimumValue?: Double;
+  onChange?: BubblingEventHandler<Event>;
+  onRNCSliderSlidingStart?: DirectEventHandler<Event>;
+  onRNCSliderSlidingComplete?: DirectEventHandler<Event>;
+  onRNCSliderValueChange?: BubblingEventHandler<Event>;
+  step?: Double;
+  testID?: string;
+  thumbImage?: ImageSource;
+  thumbTintColor?: ColorValue;
+  thumbSize?: Float;
+  trackImage?: ImageSource;
+  value?: Float;
+  lowerLimit?: Float;
+  upperLimit?: Float;
+}
+
+export default codegenNativeComponent<NativeProps>('RNCSlider', {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;

package/codegen-specs/RNCSliderNativeComponent.web.tsx

@@ -0,0 +1,398 @@
+import React, {RefObject, useCallback} from 'react';
+import {
+  Animated,
+  View,
+  ColorValue,
+  ViewStyle,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  Image,
+  ImageSourcePropType,
+} from 'react-native';
+//@ts-ignore
+import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
+import {constants} from './utils/constants';
+
+type Event = Readonly<{
+  nativeEvent: {
+    value: number;
+  };
+}>;
+
+type AnimationValues = {
+  val: Animated.Value;
+  min: Animated.Value;
+  max: Animated.Value;
+  diff: Animated.Value;
+};
+
+export interface Props {
+  value: number;
+  minimumValue: number;
+  maximumValue: number;
+  lowerLimit?: number;
+  upperLimit?: number;
+  step: number;
+  minimumTrackTintColor: ColorValue;
+  maximumTrackTintColor: ColorValue;
+  thumbTintColor: ColorValue;
+  thumbStyle: ViewStyle;
+  style: ViewStyle;
+  inverted: boolean;
+  disabled: boolean;
+  trackHeight: number;
+  thumbImage?: ImageSource;
+  onRNCSliderSlidingStart: (event: Event) => void;
+  onRNCSliderSlidingComplete: (event: Event) => void;
+  onRNCSliderValueChange: (event: Event) => void;
+}
+
+const valueToEvent = (value: number): Event => ({nativeEvent: {value}});
+
+const RCTSliderWebComponent = React.forwardRef(
+  (
+    {
+      value: initialValue = 0,
+      minimumValue = 0,
+      maximumValue = 0,
+      lowerLimit = 0,
+      upperLimit = 0,
+      step = 1,
+      minimumTrackTintColor = '#009688',
+      maximumTrackTintColor = '#939393',
+      thumbTintColor = '#009688',
+      thumbStyle = {},
+      style = {},
+      inverted = false,
+      disabled = false,
+      trackHeight = 4,
+      thumbImage,
+      onRNCSliderSlidingStart = (_: Event) => {},
+      onRNCSliderSlidingComplete = (_: Event) => {},
+      onRNCSliderValueChange = (_: Event) => {},
+      ...others
+    }: Props,
+    forwardedRef: any,
+  ) => {
+    const containerSize = React.useRef({width: 0, height: 0});
+    const containerPositionX = React.useRef(0);
+    const containerRef = forwardedRef || React.createRef();
+    const containerPositionInvalidated = React.useRef(false);
+    const [value, setValue] = React.useState(initialValue || minimumValue);
+    const lastInitialValue = React.useRef<number>(0);
+    const animationValues = React.useRef<AnimationValues>({
+      val: new Animated.Value(value),
+      min: new Animated.Value(minimumValue),
+      max: new Animated.Value(maximumValue),
+      // make sure we never divide by 0
+      diff: new Animated.Value(maximumValue - minimumValue || 1),
+    }).current;
+
+    // update minimumValue & maximumValue animations
+    React.useEffect(() => {
+      animationValues.min.setValue(minimumValue);
+      animationValues.max.setValue(maximumValue);
+      // make sure we never divide by 0
+      animationValues.diff.setValue(maximumValue - minimumValue || 1);
+    }, [animationValues, minimumValue, maximumValue]);
+
+    // compute animated slider position based on animated value
+    const minPercent = React.useRef(
+      Animated.multiply(
+        new Animated.Value(100),
+        Animated.divide(
+          Animated.subtract(animationValues.val, animationValues.min),
+          animationValues.diff,
+        ),
+      ),
+    ).current;
+    const maxPercent = React.useRef(
+      Animated.subtract(new Animated.Value(100), minPercent),
+    ).current;
+
+    const onValueChange = useCallback(
+      (value: number) => {
+        onRNCSliderValueChange && onRNCSliderValueChange(valueToEvent(value));
+      },
+      [onRNCSliderValueChange],
+    );
+
+    const onSlidingStart = useCallback(
+      (value: number) => {
+        isUserInteracting.current = true;
+        onRNCSliderSlidingStart && onRNCSliderSlidingStart(valueToEvent(value));
+      },
+      [onRNCSliderSlidingStart],
+    );
+
+    const onSlidingComplete = useCallback(
+      (value: number) => {
+        isUserInteracting.current = false;
+        onRNCSliderSlidingComplete &&
+          onRNCSliderSlidingComplete(valueToEvent(value));
+      },
+      [onRNCSliderSlidingComplete],
+    );
+    // Add a ref to track user interaction
+    const isUserInteracting = React.useRef(false);
+    const updateValue = useCallback(
+      (newValue: number) => {
+        // Ensure that the value is correctly rounded
+        const hardRounded =
+          decimalPrecision.current < 20
+            ? Number.parseFloat(newValue.toFixed(decimalPrecision.current))
+            : newValue;
+
+        // Ensure that the new value is still between the bounds
+        const withinBounds = Math.max(
+          minimumValue,
+          Math.min(hardRounded, maximumValue),
+        );
+        if (value !== withinBounds) {
+          setValue(withinBounds);
+          if (isUserInteracting.current) {
+            onValueChange(withinBounds);
+          }
+          return withinBounds;
+        }
+        return hardRounded;
+      },
+      [minimumValue, maximumValue, value, onValueChange],
+    );
+
+    React.useLayoutEffect(() => {
+      // we have to do this check because `initialValue` gets default to `0` by
+      // Slider. If we don't this will get called every time `value` changes
+      // as `updateValue` is mutated when value changes. The result of not
+      // checking this is that the value constantly gets reset to `0` in
+      // contexts where `value` is not managed externally.
+      if (initialValue !== lastInitialValue.current) {
+        lastInitialValue.current = initialValue;
+        const newValue = updateValue(initialValue);
+        animationValues.val.setValue(newValue);
+      }
+    }, [initialValue, updateValue, animationValues]);
+
+    React.useEffect(() => {
+      const invalidateContainerPosition = () => {
+        containerPositionInvalidated.current = true;
+      };
+      const onDocumentScroll = (e: Event) => {
+        const isAlreadyInvalidated = !containerPositionInvalidated.current;
+        if (
+          isAlreadyInvalidated &&
+          containerRef.current &&
+          // @ts-ignore
+          e.target.contains(containerRef.current)
+        ) {
+          invalidateContainerPosition();
+        }
+      };
+      //@ts-ignore
+      window.addEventListener('resize', invalidateContainerPosition);
+      //@ts-ignore
+      document.addEventListener('scroll', onDocumentScroll, {capture: true});
+
+      return () => {
+        //@ts-ignore
+        window.removeEventListener('resize', invalidateContainerPosition);
+
+        //@ts-ignore
+        document.removeEventListener('scroll', onDocumentScroll, {
+          capture: true,
+        });
+      };
+    }, [containerRef]);
+
+    const containerStyle = [
+      {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 'auto',
+        flexDirection: 'row',
+        alignItems: 'center',
+      },
+      style,
+    ] as ViewStyle[];
+
+    const trackStyle = {
+      height: trackHeight,
+      borderRadius: trackHeight / 2,
+      userSelect: 'none',
+    };
+
+    const minimumTrackStyle = {
+      ...trackStyle,
+      backgroundColor: minimumTrackTintColor,
+      flexGrow: minPercent,
+    };
+
+    const maximumTrackStyle = {
+      ...trackStyle,
+      backgroundColor: maximumTrackTintColor,
+      flexGrow: maxPercent,
+    };
+
+    const thumbSize = constants.THUMB_SIZE;
+    const thumbViewStyle = [
+      {
+        width: thumbSize,
+        height: thumbSize,
+        backgroundColor: thumbTintColor,
+        zIndex: 1,
+        borderRadius: thumbSize / 2,
+        overflow: 'hidden',
+      },
+      thumbStyle,
+    ] as ViewStyle[];
+
+    const decimalPrecision = React.useRef(
+      calculatePrecision(minimumValue, maximumValue, step),
+    );
+    React.useEffect(() => {
+      decimalPrecision.current = calculatePrecision(
+        minimumValue,
+        maximumValue,
+        step,
+      );
+    }, [maximumValue, minimumValue, step]);
+
+    const updateContainerPositionX = () => {
+      const positionX = (
+        containerRef as RefObject<HTMLElement | undefined>
+      ).current?.getBoundingClientRect().x;
+      containerPositionX.current = positionX ?? 0;
+    };
+
+    const getValueFromNativeEvent = (pageX: number) => {
+      const adjustForThumbSize = (containerSize.current.width || 1) > thumbSize;
+      const width =
+        (containerSize.current.width || 1) -
+        (adjustForThumbSize ? thumbSize : 0);
+
+      if (containerPositionInvalidated.current) {
+        containerPositionInvalidated.current = false;
+        updateContainerPositionX();
+      }
+
+      const containerX =
+        containerPositionX.current + (adjustForThumbSize ? thumbSize / 2 : 0);
+      const lowerValue = minimumValue < lowerLimit ? lowerLimit : minimumValue;
+      const upperValue = maximumValue > upperLimit ? upperLimit : maximumValue;
+
+      if (pageX < containerX) {
+        return inverted ? upperValue : lowerValue;
+      } else if (pageX > containerX + width) {
+        return inverted ? lowerValue : upperValue;
+      } else {
+        const x = pageX - containerX;
+        const newValue = inverted
+          ? maximumValue - ((maximumValue - minimumValue) * x) / width
+          : minimumValue + ((maximumValue - minimumValue) * x) / width;
+
+        const valueAfterStep = step
+          ? Math.round(newValue / step) * step
+          : newValue;
+        const valueAfterLowerLimit =
+          valueAfterStep < lowerLimit ? lowerLimit : valueAfterStep;
+        const valueInLimitRange =
+          valueAfterLowerLimit > upperLimit ? upperLimit : valueAfterLowerLimit;
+        return valueInLimitRange;
+      }
+    };
+
+    const onTouchEnd = ({nativeEvent}: GestureResponderEvent) => {
+      const newValue = updateValue(getValueFromNativeEvent(nativeEvent.pageX));
+      animationValues.val.setValue(newValue);
+      onSlidingComplete(newValue);
+    };
+
+    const onMove = ({nativeEvent}: GestureResponderEvent) => {
+      const newValue = getValueFromNativeEvent(nativeEvent.pageX);
+      animationValues.val.setValue(newValue);
+      updateValue(newValue);
+    };
+
+    const accessibilityActions = (event: any) => {
+      const tenth = (maximumValue - minimumValue) / 10;
+      switch (event.nativeEvent.actionName) {
+        case 'increment':
+          updateValue(value + (step || tenth));
+          break;
+        case 'decrement':
+          updateValue(value - (step || tenth));
+          break;
+      }
+    };
+
+    React.useImperativeHandle(
+      forwardedRef,
+      () => ({
+        updateValue: (val: number) => {
+          updateValue(val);
+        },
+      }),
+      [updateValue],
+    );
+
+    return (
+      <View
+        ref={containerRef}
+        onLayout={({nativeEvent: {layout}}: LayoutChangeEvent) => {
+          containerSize.current.height = layout.height;
+          containerSize.current.width = layout.width;
+          if ((containerRef as RefObject<View>).current) {
+            updateContainerPositionX();
+          }
+        }}
+        accessibilityActions={[
+          {name: 'increment', label: 'increment'},
+          {name: 'decrement', label: 'decrement'},
+        ]}
+        onAccessibilityAction={accessibilityActions}
+        accessible={true}
+        accessibilityRole={'adjustable'}
+        style={containerStyle}
+        {...others}
+        // NOTE: gesture responders should all fall _after_ the {...others}
+        // spread operator, or they may not work appropriately.
+        onStartShouldSetResponder={() => !disabled}
+        onMoveShouldSetResponder={() => !disabled}
+        onResponderGrant={() => onSlidingStart(value)}
+        onResponderRelease={onTouchEnd}
+        onResponderMove={onMove}>
+        <Animated.View pointerEvents="none" style={minimumTrackStyle} />
+        <View pointerEvents="none" style={thumbViewStyle}>
+          {thumbImage !== undefined ? (
+            <Image
+              source={thumbImage as ImageSourcePropType}
+              style={{width: '100%', height: '100%'}}
+            />
+          ) : null}
+        </View>
+        <Animated.View pointerEvents="none" style={maximumTrackStyle} />
+      </View>
+    );
+  },
+);
+
+// We should round number with the same precision as the min, max or step values if provided
+function calculatePrecision(
+  minimumValue: number,
+  maximumValue: number,
+  step: number,
+) {
+  if (!step) {
+    return Infinity;
+  } else {
+    // Calculate the number of decimals we can encounter in the results
+    const decimals = [minimumValue, maximumValue, step].map(
+      (value) => ((value + '').split('.').pop() || '').length,
+    );
+    return Math.max(...decimals);
+  }
+}
+
+RCTSliderWebComponent.displayName = 'RTCSliderWebComponent';
+
+export default RCTSliderWebComponent;

package/codegen-specs/Slider.tsx

@@ -0,0 +1,356 @@
+import React, {useEffect, useState} from 'react';
+import {
+  Image,
+  Platform,
+  AccessibilityActionEvent,
+  ViewProps,
+  ViewStyle,
+  ColorValue,
+  NativeSyntheticEvent,
+  StyleProp,
+  View,
+  ImageSource,
+  ImageSourcePropType,
+} from 'react-native';
+import RCTSliderNativeComponent from './index';
+
+import type {FC, Ref} from 'react';
+import {MarkerProps} from './components/TrackMark';
+import {StepsIndicator} from './components/StepsIndicator';
+import {styles} from './utils/styles';
+import {constants} from './utils/constants';
+
+type Event = NativeSyntheticEvent<
+  Readonly<{
+    value: number;
+    /**
+     * Android Only.
+     */
+    fromUser?: boolean;
+  }>
+>;
+
+type WindowsProps = Readonly<{
+  /**
+   * If true the slider will be inverted.
+   * Default value is false.
+   */
+  vertical?: boolean;
+}>;
+
+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;
+
+  /**
+   * 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;
+
+  /**
+   * 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;
+
+  /**
+   * Permits tapping on the slider track to set the thumb position.
+   * Defaults to false on iOS. No effect on Android or Windows.
+   */
+  tapToSeek?: boolean;
+}>;
+
+type Props = ViewProps &
+  IOSProps &
+  WindowsProps &
+  Readonly<{
+    /**
+     * Used to style and layout the `Slider`.  See `StyleSheet.js` and
+     * `DeprecatedViewStylePropTypes.js` for more info.
+     */
+    style?: StyleProp<ViewStyle>;
+
+    /**
+     * Write-only property representing the value of the slider.
+     * Can be used to programmatically control the position of the thumb.
+     * Entered once at the beginning still acts as an initial value.
+     * The value should be between minimumValue and maximumValue,
+     * which default to 0 and 1 respectively.
+     * Default value is 0.
+     *
+     * This is not a controlled component, you don't need to update the
+     * value during dragging.
+     */
+    value?: number;
+
+    /**
+     * Step value of the slider. The value should be
+     * between 0 and (maximumValue - minimumValue).
+     * Default value is 0.
+     */
+    step?: number;
+
+    /**
+     * Initial minimum value of the slider. Default value is 0.
+     */
+    minimumValue?: number;
+
+    /**
+     * Initial maximum value of the slider. Default value is 1.
+     */
+    maximumValue?: number;
+
+    /**
+     * The lower limit value of the slider. The user won't be able to slide below this limit.
+     */
+    lowerLimit?: number;
+
+    /**
+     * The upper limit value of the slider. The user won't be able to slide above this limit.
+     */
+    upperLimit?: number;
+
+    /**
+     * The color used for the track to the left of the button.
+     * Overrides the default blue gradient image on iOS.
+     */
+    minimumTrackTintColor?: ColorValue;
+
+    /**
+     * The color used for the track to the right of the button.
+     * Overrides the default blue gradient image on iOS.
+     */
+    maximumTrackTintColor?: ColorValue;
+    /**
+     * The color used to tint the default thumb images on iOS, or the
+     * color of the foreground switch grip on Android.
+     */
+    thumbTintColor?: ColorValue;
+
+    /**
+     * If true the user won't be able to move the slider.
+     * Default value is false.
+     */
+    disabled?: boolean;
+
+    /**
+     * Callback continuously called while the user is dragging the slider.
+     */
+    onValueChange?: (_value: number) => void;
+
+    /**
+     * Callback that is called when the user touches the slider,
+     * regardless if the value has changed. The current value is passed
+     * as an argument to the callback handler.
+     */
+    onSlidingStart?: (_value: number) => void;
+
+    /**
+     * Callback that is called when the user releases the slider,
+     * regardless if the value has changed. The current value is passed
+     * as an argument to the callback handler.
+     */
+    onSlidingComplete?: (_value: number) => void;
+
+    /**
+     * Used to locate this view in UI automation tests.
+     */
+    testID?: string;
+
+    /**
+     * Sets an image for the thumb. Only static images are supported.
+     */
+    thumbImage?: ImageSource;
+
+    /**
+     * Sets the size (width and height) of the thumb.
+     * If `thumbImage` is provided, it will be scaled to this size.
+     */
+    thumbSize?: number;
+
+    /**
+     * If true the slider will be inverted.
+     * Default value is false.
+     */
+    inverted?: boolean;
+
+    /**
+     * Component to be rendered for each step indicator.
+     */
+    StepMarker?: FC<MarkerProps>;
+
+    /**
+     *
+     */
+    renderStepNumber?: boolean;
+
+    /**
+     * A string of one or more words to be announced by the screen reader.
+     * Otherwise, it will announce the value as a percentage.
+     * Requires passing a value to `accessibilityIncrements` to work correctly.
+     * Should be a plural word, as singular units will be handled.
+     */
+    accessibilityUnits?: string;
+
+    /**
+     * An array of values that represent the different increments displayed
+     * by the slider. All the values passed into this prop must be strings.
+     * Requires passing a value to `accessibilityUnits` to work correctly.
+     * The number of elements must be the same as `maximumValue`.
+     */
+    accessibilityIncrements?: Array<string>;
+  }>;
+
+const SliderComponent = (
+  {
+    onValueChange,
+    onSlidingStart,
+    onSlidingComplete,
+    onAccessibilityAction,
+    value = constants.SLIDER_DEFAULT_INITIAL_VALUE,
+    minimumValue = 0,
+    maximumValue = 1,
+    step = 0,
+    inverted = false,
+    tapToSeek = false,
+    lowerLimit = Platform.select({
+      web: minimumValue,
+      default: constants.LIMIT_MIN_VALUE,
+    }),
+    upperLimit = Platform.select({
+      web: maximumValue,
+      default: constants.LIMIT_MAX_VALUE,
+    }),
+    ...props
+  }: Props,
+  forwardedRef?: Ref<typeof RCTSliderNativeComponent>,
+) => {
+  const [currentValue, setCurrentValue] = useState(
+    value ?? minimumValue ?? constants.SLIDER_DEFAULT_INITIAL_VALUE,
+  );
+  const [width, setWidth] = useState(0);
+
+  const stepResolution = step ? step : constants.DEFAULT_STEP_RESOLUTION;
+
+  const defaultStep = (maximumValue - minimumValue) / stepResolution;
+  const stepLength = step || defaultStep;
+
+  const options = Array.from(
+    {
+      length: (step ? defaultStep : stepResolution) + 1,
+    },
+    (_, index) => minimumValue + index * stepLength,
+  );
+
+  const defaultStyle =
+    Platform.OS === 'ios' ? styles.defaultSlideriOS : styles.defaultSlider;
+  const sliderStyle = {zIndex: 1, width: width};
+  const style = [defaultStyle, props.style];
+
+  const onValueChangeEvent = (event: Event) => {
+    onValueChange && onValueChange(event.nativeEvent.value);
+    setCurrentValue(event.nativeEvent.value);
+  };
+
+  const _disabled =
+    typeof props.disabled === 'boolean'
+      ? props.disabled
+      : props.accessibilityState?.disabled === true;
+
+  const _accessibilityState =
+    typeof props.disabled === 'boolean'
+      ? {...props.accessibilityState, disabled: props.disabled}
+      : props.accessibilityState;
+
+  const onSlidingStartEvent = onSlidingStart
+    ? (event: Event) => {
+        onSlidingStart(event.nativeEvent.value);
+      }
+    : null;
+  const onSlidingCompleteEvent = onSlidingComplete
+    ? (event: Event) => {
+        onSlidingComplete(event.nativeEvent.value);
+      }
+    : null;
+  const onAccessibilityActionEvent = onAccessibilityAction
+    ? (event: AccessibilityActionEvent) => {
+        onAccessibilityAction(event);
+      }
+    : null;
+
+  const passedValue = Number.isNaN(value) || !value ? undefined : value;
+
+  useEffect(() => {
+    if (lowerLimit >= upperLimit) {
+      console.warn(
+        'Invalid configuration: lower limit is supposed to be smaller than upper limit',
+      );
+    }
+  }, [lowerLimit, upperLimit]);
+
+  return (
+    <View
+      onLayout={(event) => {
+        setWidth(event.nativeEvent.layout.width);
+      }}
+      style={[style, {justifyContent: 'center'}]}>
+      {props.StepMarker || !!props.renderStepNumber ? (
+        <StepsIndicator
+          options={options}
+          sliderWidth={width}
+          currentValue={currentValue}
+          renderStepNumber={props.renderStepNumber}
+          thumbImage={props.thumbImage}
+          StepMarker={props.StepMarker}
+          isLTR={inverted}
+        />
+      ) : null}
+      <RCTSliderNativeComponent
+        {...props}
+        minimumValue={minimumValue}
+        maximumValue={maximumValue}
+        step={step}
+        inverted={inverted}
+        tapToSeek={tapToSeek}
+        value={passedValue}
+        lowerLimit={lowerLimit}
+        upperLimit={upperLimit}
+        accessibilityState={_accessibilityState}
+        thumbImage={
+          Platform.OS === 'web'
+            ? props.thumbImage
+            : props.StepMarker || !props.thumbImage
+            ? undefined
+            : Image.resolveAssetSource(props.thumbImage as ImageSourcePropType)
+        }
+        ref={forwardedRef}
+        style={[
+          sliderStyle,
+          defaultStyle,
+          {alignContent: 'center', alignItems: 'center'},
+        ]}
+        onChange={onValueChangeEvent}
+        onRNCSliderSlidingStart={onSlidingStartEvent}
+        onRNCSliderSlidingComplete={onSlidingCompleteEvent}
+        onRNCSliderValueChange={onValueChangeEvent}
+        disabled={_disabled}
+        onStartShouldSetResponder={() => true}
+        onResponderTerminationRequest={() => false}
+        onRNCSliderAccessibilityAction={onAccessibilityActionEvent}
+        thumbTintColor={
+          props.thumbImage && !!props.StepMarker
+            ? 'transparent'
+            : props.thumbTintColor
+        }
+      />
+    </View>
+  );
+};
+
+const SliderWithRef = React.forwardRef(SliderComponent);
+
+export default SliderWithRef;

package/codegen-specs/components/StepNumber.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {StyleProp, Text, TextStyle, View} from 'react-native';
+import {styles} from '../utils/styles';
+
+export const StepNumber = ({
+  i,
+  index,
+  style,
+}: {
+  i: number;
+  index: number;
+  style: StyleProp<TextStyle>;
+}) => {
+  return (
+    <View style={styles.stepNumber}>
+      <Text testID={`${index}th-step`} style={style}>
+        {i}
+      </Text>
+    </View>
+  );
+};

package/codegen-specs/components/StepsIndicator.tsx

@@ -0,0 +1,105 @@
+import React, {FC, Fragment, useCallback, useMemo} from 'react';
+import {Platform, View} from 'react-native';
+import {StepNumber} from './StepNumber';
+import {MarkerProps, SliderTrackMark} from './TrackMark';
+//@ts-ignore
+import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
+import {styles} from '../utils/styles';
+import {constants} from '../utils/constants';
+
+export const StepsIndicator = ({
+  options,
+  sliderWidth,
+  currentValue,
+  StepMarker,
+  renderStepNumber,
+  thumbImage,
+  isLTR,
+}: {
+  options: number[];
+  sliderWidth: number;
+  currentValue: number;
+  StepMarker?: FC<MarkerProps>;
+  renderStepNumber?: boolean;
+  thumbImage?: ImageSource;
+  isLTR?: boolean;
+}) => {
+  const stepNumberFontStyle = useMemo(() => {
+    return {
+      fontSize:
+        options.length > 9
+          ? constants.STEP_NUMBER_TEXT_FONT_SMALL
+          : constants.STEP_NUMBER_TEXT_FONT_BIG,
+    };
+  }, [options.length]);
+
+  const platformDependentStyles = useMemo(() => {
+    const isWeb = Platform.OS === 'web';
+    return {
+      stepIndicatorContainerStyle: isWeb
+        ? styles.stepsIndicator
+        : {
+            ...styles.stepsIndicator,
+            marginHorizontal: sliderWidth * constants.MARGIN_HORIZONTAL_PADDING,
+          },
+      stepIndicatorElementStyle: isWeb
+        ? {
+            ...styles.stepIndicatorElement,
+            width: constants.THUMB_SIZE,
+            justifyContent: 'space-between' as const,
+          }
+        : styles.stepIndicatorElement,
+    };
+  }, [sliderWidth]);
+
+  const values = isLTR ? options.reverse() : options;
+
+  const renderStepIndicator = useCallback(
+    (i: number, index: number) => {
+      return (
+        <Fragment key={index}>
+          <View
+            style={platformDependentStyles.stepIndicatorElementStyle}
+            key={`${index}-View`}>
+            <SliderTrackMark
+              key={`${index}-SliderTrackMark`}
+              isTrue={currentValue === i}
+              index={i}
+              thumbImage={thumbImage}
+              StepMarker={StepMarker}
+              currentValue={currentValue}
+              min={options[0]}
+              max={options[options.length - 1]}
+            />
+            {renderStepNumber ? (
+              <StepNumber
+                i={i}
+                index={index}
+                style={stepNumberFontStyle}
+                key={`${index}th-step`}
+              />
+            ) : null}
+          </View>
+        </Fragment>
+      );
+    },
+    [
+      currentValue,
+      StepMarker,
+      options,
+      thumbImage,
+      renderStepNumber,
+      stepNumberFontStyle,
+      platformDependentStyles.stepIndicatorElementStyle,
+    ],
+  );
+
+  return (
+    <View
+      pointerEvents="none"
+      testID="StepsIndicator-Container"
+      style={platformDependentStyles.stepIndicatorContainerStyle}>
+      {values.map((i, index) => renderStepIndicator(i, index))}
+    </View>
+  );
+};

package/codegen-specs/components/TrackMark.tsx

@@ -0,0 +1,55 @@
+import React, {FC} from 'react';
+import {Image, ImageSource, ImageSourcePropType, View} from 'react-native';
+import {styles} from '../utils/styles';
+
+export type MarkerProps = {
+  stepMarked: boolean;
+  currentValue: number;
+  index: number;
+  min: number;
+  max: number;
+};
+
+export type TrackMarksProps = {
+  isTrue: boolean;
+  index: number;
+  thumbImage?: ImageSource;
+  StepMarker?: FC<MarkerProps>;
+  currentValue: number;
+  min: number;
+  max: number;
+};
+
+export const SliderTrackMark = ({
+  isTrue,
+  index,
+  thumbImage,
+  StepMarker,
+  currentValue,
+  min,
+  max,
+}: TrackMarksProps) => {
+  return (
+    <View style={styles.trackMarkContainer}>
+      {StepMarker ? (
+        <StepMarker
+          stepMarked={isTrue}
+          index={index}
+          currentValue={currentValue}
+          min={min}
+          max={max}
+        />
+      ) : null}
+      {thumbImage && isTrue ? (
+        <View
+          style={styles.thumbImageContainer}
+          testID="sliderTrackMark-thumbImage">
+          <Image
+            source={thumbImage as ImageSourcePropType}
+            style={styles.thumbImage}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+};

package/codegen-specs/index.ts

@@ -0,0 +1,3 @@
+const RNCSlider = require('./RNCSliderNativeComponent').default;
+
+export default RNCSlider;

package/codegen-specs/utils/constants.ts

@@ -0,0 +1,13 @@
+import {Platform} from 'react-native';
+
+export const constants = {
+  SLIDER_DEFAULT_INITIAL_VALUE: 0,
+  MARGIN_HORIZONTAL_PADDING: 0.05,
+  // Default thumb size for web platform (used in step indicator positioning)
+  THUMB_SIZE: 20,
+  STEP_NUMBER_TEXT_FONT_SMALL: 8,
+  STEP_NUMBER_TEXT_FONT_BIG: 12,
+  LIMIT_MIN_VALUE: Number.MIN_SAFE_INTEGER,
+  LIMIT_MAX_VALUE: Number.MAX_SAFE_INTEGER,
+  DEFAULT_STEP_RESOLUTION: Platform.OS === 'android' ? 128 : 1000,
+};

package/codegen-specs/utils/styles.ts

@@ -0,0 +1,55 @@
+import {Platform, StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  stepNumber: {
+    marginTop: 20,
+    alignItems: 'center',
+    position: 'absolute',
+  },
+  sliderMainContainer: {zIndex: 1, width: '100%'},
+  defaultSlideriOS: {
+    height: 40,
+  },
+  defaultSlider: {},
+  stepsIndicator: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    top: Platform.OS === 'ios' ? 10 : 0,
+    zIndex: 2,
+  },
+  trackMarkContainer: {
+    alignItems: 'center',
+    alignContent: 'center',
+    alignSelf: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    zIndex: 3,
+  },
+  thumbImageContainer: {
+    position: 'absolute',
+    zIndex: 3,
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignContent: 'center',
+  },
+  thumbImage: {
+    alignContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+  },
+  stepIndicatorElement: {
+    alignItems: 'center',
+    alignContent: 'center',
+  },
+  defaultIndicatorMarked: {
+    height: 20,
+    width: 5,
+    backgroundColor: '#CCCCCC',
+  },
+  defaultIndicatorIdle: {
+    height: 10,
+    width: 2,
+    backgroundColor: '#C0C0C0',
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/slider",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "Third-party native Slider view wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, and Angular adapters.",
   "repository": {
     "type": "git",
@@ -39,6 +39,7 @@
     "src",
     "build",
     "build-ngc",
+    "codegen-specs",
     "react-native.config.cjs",
     "symbiote-slider.podspec"
   ],
@@ -48,7 +49,7 @@
   "codegenConfig": {
     "name": "RNCSlider",
     "type": "components",
-    "jsSrcsDir": "node_modules/@react-native-community/slider/src",
+    "jsSrcsDir": "codegen-specs",
     "android": {
       "javaPackageName": "com.reactnativecommunity.slider"
     },
@@ -70,7 +71,7 @@
     "react-native": ">=0.86",
     "vue": ">=3.5.0",
     "@symbiote-native/angular": "0.3.3",
-    "@symbiote-native/vue": "0.3.3",
+    "@symbiote-native/vue": "0.3.4",
     "@symbiote-native/react": "0.2.4"
   },
   "peerDependenciesMeta": {
@@ -105,10 +106,10 @@
     "@vue/runtime-core": "^3.5.13",
     "react": "19.2.3",
     "typescript": "~6.0.0",
-    "@symbiote-native/react": "0.2.4",
     "@symbiote-native/test-utils": "0.1.5",
+    "@symbiote-native/react": "0.2.4",
     "@symbiote-native/angular": "0.3.3",
-    "@symbiote-native/vue": "0.3.3"
+    "@symbiote-native/vue": "0.3.4"
   },
   "scripts": {
     "typecheck": "tsc --build",