From a3a57b191e8f51c823614a5cf78bf129e52f640c Mon Sep 17 00:00:00 2001 From: Ali Kazemkhanloo Date: Fri, 29 Oct 2021 00:01:40 +0330 Subject: [PATCH 1/3] update to use reanimated v2 also use current value as default for ballon --- package.json | 4 ++-- src/Slider.js | 13 +++++++------ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index ade0239..7f2df52 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-reanimated-slider", - "version": "1.0.6", + "version": "2.0.0", "description": "a reanimated slider for video players", "main": "index.js", "scripts": { @@ -29,7 +29,7 @@ }, "peerDependencies": { "react-native-gesture-handler": "^1.x.x", - "react-native-reanimated": "^1.x.x" + "react-native-reanimated": "^2.x.x" }, "dependencies": { "core-js": "2" diff --git a/src/Slider.js b/src/Slider.js index b6276ac..3840689 100644 --- a/src/Slider.js +++ b/src/Slider.js @@ -19,7 +19,7 @@ const { Clock, divide, call, - interpolate, + interpolateNode, multiply, block, or @@ -52,9 +52,10 @@ type Props = { borderColor?: string, /** * a function that gets the current value of the slider as you slide it, - * and returns a string to be used in the ballon + * and returns a string to be used inside the ballon. if not provided it will use the + * current value as integer. */ - ballon: number => string, + ballon?: number => string, /** * an AnimatedValue from `react-native-reanimated` library which is the @@ -180,7 +181,7 @@ class Slider extends React.Component { this.clamped_x = cond( eq(this.width, 0), 0, - interpolate(this.x, { + interpolateNode(this.x, { inputRange: [0, this.width], outputRange: [0, this.width], extrapolate: Extrapolate.CLAMP @@ -205,8 +206,8 @@ class Slider extends React.Component { [ call([this.value_x], x => { this.props.setBallonText - ? this.props.setBallonText(props.ballon(x[0])) - : this.ballon.current.setText(props.ballon(x[0])); + ? this.props.setBallonText(props.ballon? props.ballon(x[0]) : x[0].toFixed()) + : this.ballon.current.setText(props.ballon? props.ballon(x[0]) : x[0].toFixed()); }), cond( eq(this.gestureState, State.BEGAN), From 74bed7fbcd757faa901a5a62740ef2ab09ed5b66 Mon Sep 17 00:00:00 2001 From: Ali Kazemkhanloo Date: Fri, 29 Oct 2021 00:19:38 +0330 Subject: [PATCH 2/3] update docs --- docs/Slider.md | 43 ++++++++++++++++++++++++++++--------------- src/Slider.js | 38 +++++++++++++++++++++++++------------- 2 files changed, 53 insertions(+), 28 deletions(-) diff --git a/docs/Slider.md b/docs/Slider.md index 8e821f4..9b98382 100644 --- a/docs/Slider.md +++ b/docs/Slider.md @@ -9,47 +9,60 @@ and `react-native-gesture-handler` to be able to use it. All animated values mus ```js import Slider from 'react-native-reanimated-slider'; +import { Value } from 'react-native-reanimated'; ... +const textRef = useRef() + renderBallon=()=>( - + ) setBallonText=(text)=>{ - this.text.setNativeProps({text}) + textRef.setNativeProps({text}) } -render(){ +currentTime= new Value(10) +playableDuration= new Value(15) +seekableDuration= new Value(20) + +const slidingStart = ()=>{ + console.log('slide started') +} +const slidingComplete = (number)=>{ + console.log('slide completed' + number) +} +... return ( this.convertSecondToTime(value)} - progress={this.currentTime} + thumbTintColor="#f00" + borderColor="#0f0" + progress={currentTime} min={new Reanimated.Value(0)} - cache={this.playableDuration} - max={this.seekableDuration} - onSlidingStart={this.slidingStart} - onSlidingComplete={this.slidingComplete} + cache={playableDuration} + max={seekableDuration} + onSlidingStart={slidingStart} + onSlidingComplete={slidingComplete} // only if you want to render custom ballon for sliding - renderBallon={this.renderBallon} - setBallonText={this.setBallonText} + // renderBallon={this.renderBallon} + // setBallonText={this.setBallonText} /> ) -} ``` Props ----- -### `ballon` (required) +### `ballon` a function that gets the current value of the slider as you slide it, -and returns a string to be used in the ballon +and returns a string to be used inside the ballon. if not provided it will use the +current value as integer. type: `number => string` diff --git a/src/Slider.js b/src/Slider.js index 3840689..f145672 100644 --- a/src/Slider.js +++ b/src/Slider.js @@ -122,38 +122,50 @@ type Props = { * * ```js * import Slider from 'react-native-reanimated-slider'; + * import { Value } from 'react-native-reanimated'; * ... * + * const textRef = useRef() + * * renderBallon=()=>( * - * + * * * ) * * setBallonText=(text)=>{ - * this.text.setNativeProps({text}) + * textRef.setNativeProps({text}) * } * - * render(){ + * currentTime= new Value(10) + * playableDuration= new Value(15) + * seekableDuration= new Value(20) + * + * const slidingStart = ()=>{ + * console.log('slide started') + * } + * const slidingComplete = (number)=>{ + * console.log('slide completed' + number) + * } + * ... * return ( * this.convertSecondToTime(value)} - * progress={this.currentTime} + * thumbTintColor="#f00" + * borderColor="#0f0" + * progress={currentTime} * min={new Reanimated.Value(0)} - * cache={this.playableDuration} - * max={this.seekableDuration} - * onSlidingStart={this.slidingStart} - * onSlidingComplete={this.slidingComplete} + * cache={playableDuration} + * max={seekableDuration} + * onSlidingStart={slidingStart} + * onSlidingComplete={slidingComplete} * * // only if you want to render custom ballon for sliding - * renderBallon={this.renderBallon} - * setBallonText={this.setBallonText} + * // renderBallon={this.renderBallon} + * // setBallonText={this.setBallonText} * /> * ) - * } * ``` * * From f0bca6f28c921e543ebd3734da6bb9ec8fac3519 Mon Sep 17 00:00:00 2001 From: Ali Kazemkhanloo Date: Fri, 29 Oct 2021 00:23:58 +0330 Subject: [PATCH 3/3] update readme --- readme.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/readme.md b/readme.md index 74d1e59..3399e7c 100644 --- a/readme.md +++ b/readme.md @@ -13,11 +13,7 @@ first install and link `react-native-reanimated` and `react-native-gesture-handl ``` yarn add react-native-reanimated-slider ``` -or - -``` -npm i -s react-native-reanimated-slider -``` +if your are using `react-native-reanimated@1.x.x` install version 1. version 1 is not supported anymore. ## Usage and API reference [Main Slider](https://github.com/alikazemkhanloo/react-native-reanimated-slider/tree/master/docs/Slider.md)