* Version changed to 2.0.1

 * Rest props are passed to root component now

Author: githuboftigran

README.md

@@ -25,6 +25,9 @@ You can find the version 1 [here](https://github.com/githuboftigran/rn-range-sli
 
 RangeSlider uses react hooks, so this component doesn't work with React Native versions below 0.59.0
 
+You can find basic implementation of needed components (Thumb, Rail, RailSelected, Label, Notch) [here](https://github.com/githuboftigran/rn-widgets-demo).
+
+
 ```
 ...
 
@@ -63,7 +66,6 @@ const handleValueChange = useCallback((low, high) => {
 
 ### Properties
 
-
 | Name |      Description      | Type | Default Value |
 | --- | --- | --- | :-------------: |
 | `min` |  Minimum value of slider | number | _**required**_ |
@@ -81,6 +83,8 @@ const handleValueChange = useCallback((low, high) => {
 | `renderNotch` | Should render the notch below the label (above the thumbs).<br/>Classic notch is a small triangle below the label.<br/>If `allowLabelOverflow` is not set to true, the notch will continue moving with thumb even if the label has already reached the edge of the component and can't move further.| `() => Node` | `undefined` |
 | `onValueChanged` | Will be called when a value was changed.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` |
 
+All the other props (e.g. style) will be passed to root container component.
+
 ## A special section about permanent labels.
 
 The label of active thumb is a hint for a user. It's not showing selected values permanently.

hooks.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useRef, useMemo } from 'react';
-import {Animated} from 'react-native';
-import {clamp} from './helpers';
+import { Animated } from 'react-native';
+import { clamp } from './helpers';
 import styles from './styles';
 import FollowerContainer from './LabelContainer';
 

index.js

@@ -11,7 +11,6 @@ const noop = () => {};
 
 const Slider = (
   {
-    style,
     min,
     max,
     step,
@@ -26,6 +25,7 @@ const Slider = (
     renderNotch,
     renderRail,
     renderRailSelected,
+    ...restProps
   }
 ) => {
   const { inPropsRef, setLow, setHigh } = useLowHigh(lowProp, disableRange ? max : highProp, min, max, step);
@@ -103,70 +103,70 @@ const Slider = (
   const labelContainerProps = useLabelContainerProps(floatingLabel);
 
   const { panHandlers } = useMemo(() => PanResponder.create({
-      onStartShouldSetPanResponder: trueFunc,
-      onStartShouldSetPanResponderCapture: trueFunc,
-      onMoveShouldSetPanResponder: trueFunc,
-      onMoveShouldSetPanResponderCapture: trueFunc,
-      onPanResponderTerminationRequest: trueFunc,
-      onPanResponderTerminate: trueFunc,
-      onShouldBlockNativeResponder: trueFunc,
-
-      onPanResponderGrant: ({ nativeEvent }, gestureState) => {
-        const { numberActiveTouches } = gestureState;
-        if (numberActiveTouches > 1) {
+    onStartShouldSetPanResponder: trueFunc,
+    onStartShouldSetPanResponderCapture: trueFunc,
+    onMoveShouldSetPanResponder: trueFunc,
+    onMoveShouldSetPanResponderCapture: trueFunc,
+    onPanResponderTerminationRequest: trueFunc,
+    onPanResponderTerminate: trueFunc,
+    onShouldBlockNativeResponder: trueFunc,
+
+    onPanResponderGrant: ({ nativeEvent }, gestureState) => {
+      const { numberActiveTouches } = gestureState;
+      if (numberActiveTouches > 1) {
+        return;
+      }
+      setPressed(true);
+      const { current: lowThumbX } = lowThumbXRef;
+      const { current: highThumbX } = highThumbXRef;
+      const { locationX: downX, pageX } = nativeEvent;
+      const containerX = pageX - downX;
+
+      const { low, high, min, max } = inPropsRef.current;
+      const containerWidth = containerWidthRef.current;
+
+      const lowPosition = thumbWidth / 2 + (low - min) / (max - min) * (containerWidth - thumbWidth);
+      const highPosition = thumbWidth / 2 + (high - min) / (max - min) * (containerWidth - thumbWidth);
+
+      const isLow = disableRange || isLowCloser(downX, lowPosition, highPosition);
+      gestureStateRef.current.isLow = isLow;
+
+      const handlePositionChange = positionInView => {
+        const { low, high, min, max, step } = inPropsRef.current;
+        const minValue = isLow ? min : low;
+        const maxValue = isLow ? high : max;
+        const value = clamp(getValueForPosition(positionInView, containerWidth, thumbWidth, min, max, step), minValue, maxValue);
+        if (gestureStateRef.current.lastValue === value) {
           return;
         }
-        setPressed(true);
-        const { current: lowThumbX } = lowThumbXRef;
-        const { current: highThumbX } = highThumbXRef;
-        const { locationX: downX, pageX } = nativeEvent;
-        const containerX = pageX - downX;
-
-        const { low, high, min, max } = inPropsRef.current;
-        const containerWidth = containerWidthRef.current;
-
-        const lowPosition = thumbWidth / 2 + (low - min) / (max - min) * (containerWidth - thumbWidth);
-        const highPosition = thumbWidth / 2 + (high - min) / (max - min) * (containerWidth - thumbWidth);
-
-        const isLow = disableRange || isLowCloser(downX, lowPosition, highPosition);
-        gestureStateRef.current.isLow = isLow;
-
-        const handlePositionChange = positionInView => {
-          const { low, high, min, max, step } = inPropsRef.current;
-          const minValue = isLow ? min : low;
-          const maxValue = isLow ? high : max;
-          const value = clamp(getValueForPosition(positionInView, containerWidth, thumbWidth, min, max, step), minValue, maxValue);
-          if (gestureStateRef.current.lastValue === value) {
-            return;
-          }
-          const availableSpace = containerWidth - thumbWidth;
-          const absolutePosition = (value - min) / (max - min) * availableSpace;
-          gestureStateRef.current.lastValue = value;
-          gestureStateRef.current.lastPosition = absolutePosition + thumbWidth / 2;
-          (isLow ? lowThumbX : highThumbX).setValue(absolutePosition);
-          onValueChanged(isLow ? value : low, isLow ? high : value);
-          (isLow ? setLow : setHigh)(value);
-          labelUpdate && labelUpdate(gestureStateRef.current.lastPosition, value);
-          notchUpdate && notchUpdate(gestureStateRef.current.lastPosition, value);
-          updateSelectedRail();
-        };
-        handlePositionChange(downX);
-        pointerX.removeAllListeners();
-        pointerX.addListener(({ value: pointerPosition }) => {
-          const positionInView = pointerPosition - containerX;
-          handlePositionChange(positionInView);
-        });
-      },
-
-      onPanResponderMove: Animated.event([null, { moveX: pointerX }], { useNativeDriver: false }),
-
-      onPanResponderRelease: () => {
-        setPressed(false);
-      },
-    }), [pointerX, inPropsRef, thumbWidth, disableRange, onValueChanged, setLow, setHigh, labelUpdate, notchUpdate, updateSelectedRail]);
+        const availableSpace = containerWidth - thumbWidth;
+        const absolutePosition = (value - min) / (max - min) * availableSpace;
+        gestureStateRef.current.lastValue = value;
+        gestureStateRef.current.lastPosition = absolutePosition + thumbWidth / 2;
+        (isLow ? lowThumbX : highThumbX).setValue(absolutePosition);
+        onValueChanged(isLow ? value : low, isLow ? high : value);
+        (isLow ? setLow : setHigh)(value);
+        labelUpdate && labelUpdate(gestureStateRef.current.lastPosition, value);
+        notchUpdate && notchUpdate(gestureStateRef.current.lastPosition, value);
+        updateSelectedRail();
+      };
+      handlePositionChange(downX);
+      pointerX.removeAllListeners();
+      pointerX.addListener(({ value: pointerPosition }) => {
+        const positionInView = pointerPosition - containerX;
+        handlePositionChange(positionInView);
+      });
+    },
+
+    onPanResponderMove: Animated.event([null, { moveX: pointerX }], { useNativeDriver: false }),
+
+    onPanResponderRelease: () => {
+      setPressed(false);
+    },
+  }), [pointerX, inPropsRef, thumbWidth, disableRange, onValueChanged, setLow, setHigh, labelUpdate, notchUpdate, updateSelectedRail]);
 
   return (
-    <View style={style}>
+    <View {...restProps}>
       <View {...labelContainerProps}>
         {labelView}
         {notchView}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-range-slider",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "author": "Tigran Sahakyan <mail.of.tigran@gmail.com>",
   "description": "A highly optimized pure JS implementation of Range Slider for React Native",
   "homepage": "https://github.com/githuboftigran/rn-range-slider",