update TS definitions + allow to pass Slider as prop

README.md

@@ -11,10 +11,13 @@ React Native implementation of color picker for both Android and iOS.
 
 ## Getting started
 Install the color picker
+
 ```
 npm install react-native-color-picker --save
 ```
+
 And use it in your application
+
 ```javascript
 import { ColorPicker } from 'react-native-color-picker'
 
@@ -25,8 +28,11 @@ const Picker = () => (
   />
 )
 ```
+
 Color picker will use space you provide. Therefore it is necessary to provide styles that will determine picker's size.
 
+For HoloPicker (`ColorPicker`) you might need to install `@react-native-community/slider` and pass it (or any other Slider compatible component) as `sliderComponent` prop if you don't want to use deprecated RN `Slider`.
+
 ## API
 
 ### Color picker type
@@ -90,6 +96,7 @@ See our examples on [Expo](https://snack.expo.io/@sodik82/react-native-color-pic
 
 ## Limitations
 * Does not work well within `ScrollView` due to touch event interference.
+* RN has deprecated `Slider` component. You need to provide Slider component as prop to overcome this. 
 * There is known [bug](https://github.com/instea/react-native-color-picker/issues/17) affecting RN 0.61 on IOS. See more info about the workaround. 
 
 ## Thanks

index.d.ts

@@ -8,13 +8,21 @@ declare module 'react-native-color-picker' {
     defaultColor: string | HsvColor;
     oldColor?: string;
     style?: object;
-    onColorSelected: (selectedColor: HsvColor) => void;
+    onColorSelected: (selectedColor: string) => void;
     onColorChange: (selectedColor: HsvColor) => void;
-    onOldColorSelected?: (oldColor: HsvColor) => void;
+    onOldColorSelected?: (oldColor: string) => void;
     hideSliders?: boolean;
   }
 
-  export const ColorPicker: React.ComponentType<IPicker>;
+  export interface SliderProps {
+    onValueChange?: (value: number) => void;
+    value?: number;
+  }
+  export interface IHoloPicker extends IPicker {
+    sliderComponent: React.Component<SliderProps>;
+  } 
+
+  export const ColorPicker: React.ComponentType<IHoloPicker>;
   export const TriangleColorPicker: React.ComponentType<IPicker>;
   export const toHsv: (color: string) => HsvColor;
   export const fromHsv: (hsv: HsvColor) => string;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-color-picker",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "Color picker for react native",
   "main": "src/index.js",
   "scripts": {

src/HoloColorPicker.js

@@ -4,6 +4,9 @@ import { TouchableOpacity, Slider, View, Image, StyleSheet, InteractionManager,
 import tinycolor from 'tinycolor2'
 import { createPanResponder } from './utils'
 
+let defaultSliderComponent = Slider
+// don't know how to load dynamically
+
 export class HoloColorPicker extends React.PureComponent {
 
   constructor(props, ctx) {
@@ -114,6 +117,14 @@ export class HoloColorPicker extends React.PureComponent {
     return rad - Math.PI - Math.PI / 2
   }
 
+  _getSlider() {
+    const component = this.props.sliderComponent || defaultSliderComponent
+    if (!component && !this.props.hideSliders) {
+      throw new Error('You need to install `@react-native-community/slider` and pass it (or any other Slider compatible component) as `sliderComponent` prop')
+    }
+    return component
+  }
+
   getColor() {
     return tinycolor(this._getColor()).toHexString()
   }
@@ -134,6 +145,7 @@ export class HoloColorPicker extends React.PureComponent {
       angle,
       isRTL: this._isRTL,
     })
+    const SliderComp = this._getSlider()
     return (
       <View style={style}>
         <View onLayout={this._onLayout} ref='pickerContainer' style={styles.pickerContainer}>
@@ -175,10 +187,10 @@ export class HoloColorPicker extends React.PureComponent {
           </View>
           }
         </View>
-        { this.props.hideSliders == true ? null :
+        { this.props.hideSliders ? null :
           <View>
-            <Slider value={s} onValueChange={this._onSValueChange} />
-            <Slider value={v} onValueChange={this._onVValueChange} />
+            <SliderComp value={s} onValueChange={this._onSValueChange} />
+            <SliderComp value={v} onValueChange={this._onVValueChange} />
           </View>
         }
       </View>
@@ -198,6 +210,7 @@ HoloColorPicker.propTypes = {
   onColorSelected: PropTypes.func,
   onOldColorSelected: PropTypes.func,
   hideSliders: PropTypes.bool,
+  sliderComponent: PropTypes.elementType,
 }
 
 const makeComputedStyles = ({