From fc20d3830be261e7424fc2eb193d76a89128ccdf Mon Sep 17 00:00:00 2001
From: Stanislav Miklik <stanislav.miklik@gmail.com>
Date: Sun, 2 Feb 2020 15:38:56 +0100
Subject: [PATCH] update TS definitions + allow to pass Slider as prop

---
 README.md              |  7 +++++++
 index.d.ts             | 14 +++++++++++---
 package.json           |  2 +-
 src/HoloColorPicker.js | 19 ++++++++++++++++---
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 4095999..95222e3 100644
--- a/README.md
+++ b/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
diff --git a/index.d.ts b/index.d.ts
index 628a728..fb384d0 100644
--- a/index.d.ts
+++ b/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;
diff --git a/package.json b/package.json
index a89d9a1..b1cc47d 100644
--- a/package.json
+++ b/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": {
diff --git a/src/HoloColorPicker.js b/src/HoloColorPicker.js
index c696a0f..8eb86e6 100644
--- a/src/HoloColorPicker.js
+++ b/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 = ({