react-native-awesome-slider
TypeScript icon, indicating that this package has built-in type declarations

2.5.6 • Public • Published

React Native Awesome Slider

Reanimated v2 version npm npm runs with expo

An awesome React Native Slider component powered by Reanimated v2 and react-native-gesture-handler.

Installation

First you have to follow installation instructions of Reanimated v2 and react-native-gesture-handler

If you react-native-gesture-handler version >= 2:

yarn add react-native-awesome-slider

else:

yarn add react-native-awesome-slider@1

Example usage

Basic use:

import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';

export const Example = () => {
  const progress = useSharedValue(30);
  const min = useSharedValue(0);
  const max = useSharedValue(100);
  return (
    <Slider
      style={styles.container}
      progress={progress}
      minimumValue={min}
      maximumValue={max}
    />
  );
};

Change slider theme color?

Use the Theme object.

<Slider
  theme={{
    disableMinTrackTintColor: '#fff',
    maximumTrackTintColor: '#fff',
    minimumTrackTintColor: '#000',
    cacheTrackTintColor: '#333',
    bubbleBackgroundColor: '#666',
    heartbeatColor: '#999',
  }}
/>

For more usage, please view Example.

Add pan haptic feedback?

  1. You need add haptics feedback lib to you project.
  1. Add onHapticFeedback callback to you slider component.
<Slider
  onHapticFeedback={() => {
    ReactNativeHapticFeedback.trigger('impactLight', {
      enableVibrateFallback: true,
      ignoreAndroidSystemSettings: false,
    });
  }}
/>
  1. Set haptic mode, if you open 'step' prop, you need set hapticMode=HapticModeEnum.STEP, otherwise set to hapticMode=HapticModeEnum.BOTH.

  2. ✅ Finish!

Why use this library?

  • Pure javascript slider implementations usually rely on react-native's gesture events which may inadvertently trigger 'swipe to go back' events as you pan the slider. ❌
  • Native sliders rely on state updates, which can cause performance issues. ❌

react-native-awesome-slider relies on reanimated's ShareValue ability to run code directly in the UIThread to enhance performance, and react-native-gesture-handle won't interfere with your swiping gestures. ✨

Features

  • 100% written in TypeScript.
  • 100% built upon react-native-reanimated and react-native-gesture-handler.
  • Supports Tap & Pan triggering.
  • Support for a discrete slider.
  • Support haptic feedback.
  • and more...

TODO list

  • Support step props
  • Optimize bubble & thumb
  • Rewrite using react-native-gesture-handler v2
  • Support marks props
  • Web Support

Configuration

The <Slider/> component has the following configuration properties:

Name Type Description Required Default Value
theme object The slider theme color { // Color to fill the progress in the seekbar minimumTrackTintColor: string, // Color to fill the background in the seekbar maximumTrackTintColor: string, // Color to fill the cache in the seekbar cacheTrackTintColor: string, // Color to fill the bubble backgrouundColor disableMinTrackTintColor: string, // Disabled color to fill the progress in the seekbar bubbleBackgroundColor: string // Color to fill the heartbeat animation in the seekbar heartbeatColor: string }
style ViewStyle
borderColor string Color of the border of the slider, also you can use containerStyle . transparent
bubble (number) => string Get the current value of the slider as you slide it, and returns a string to be used inside the bubble. (number) => string
progress Animated.SharedValue<number> Current value of the slider 0
cache Animated.SharedValue<number> Cache value of the slider 0
minimumValue Animated.SharedValue<number> An Animated.SharedValue from react-native-reanimated library which is the minimum value of the slider. undefined
maximumValue Animated.SharedValue<number> An Animated.SharedValue from react-native-reanimated library which is the maximum value of the slider. undefined
onSlidingStart () => void Callback called when the sliding interaction starts undefined
onValueChange (number) => void Callback called when the slider value changes undefined
onSlidingComplete (number) => void Callback called when the sliding interaction stops. The updated slider value will be passed as argument undefined
renderBubble () => React.ReactNode A custom bubble component that will be rendered while sliding. See the <Bubble/> component
setBubbleText (string) => void This function will be called while sliding and can be used to update the text in a custom bubble component. current slider value
bubbleTranslateY number Value to pass to the container of the bubble as translateY 7
renderThumb () => React.ReactNode Render custom thumb image. If you need to customize thumb, you also need to set the thumb width ReactNode
renderMark ({ index }: { index: number }) => React.ReactNode Render custom mark element. If you need to customize mark, you also need to set the mark width ReactNode
thumbWidth number Thumb elements width 15
disable boolean Disable user interaction with the slider false
disableTapEvent boolean Enable tap event change value. Defaults to `true` true
bubbleMaxWidth number The maximum width of the bubble component 100
bubbleTextStyle TextStyle Bubble text style
bubbleContainerStyle ViewStyle Bubble container text style
isScrubbing Animated.SharedValue<boolean> callback slider is scrubbing status undefined
onTap () => void A callback for when the slider is tapped.(Useful for video-player scrubbing.) undefined
thumbScaleValue Animated.SharedValue<number> Control thumb’s transform-scale animation. undefined
sliderHeight number The height of the slider component 30
containerStyle ViewStyle styles to be applied to the slider container component { width: '100%', height: 5, borderRadius: 2, borderColor: borderColor, overflow: 'hidden', borderWidth: 1, backgroundColor: maximumTrackTintColor, },
panHitSlop object pan gesture hit slop `{ top: 8, left: 0, bottom: 8, right: 0,} `
step number(integer) Step value of the slider. The value should be between 0 and maximumValue - minimumValue) undefined
steps number(integer) Count of segmented sliders. undefined
snapToStep boolean Enables or disables step snapping true
markWidth number Step mark width, if you need custom mark style, you must be fix this width 4
marksStyle ViewStyle Step mark style {width: {markWidth}, height: 4, backgroundColor: '#fff', position: 'absolute', top: 2}
onHapticFeedback function Haptic feedback callback undefined
hapticMode enum haptic feedback mode HapticModeEnum.NONE
panDirectionValue enum Current swipe direction undefined
disableTrackFollow boolean Disable track follow thumb.(Commonly used in video audio players) false
bubbleWidth number Bubble width, If you set this value, bubble positioning left & right will be clamp. 0
activeOffsetX number | number[] Range along X axis (in points) where fingers travels without activation of gesture. Moving outside of this range implies activation of gesture. undefined
activeOffsetY number | number[] Range along Y axis (in points) where fingers travels without activation of gesture. Moving outside of this range implies activation of gesture. undefined
failOffsetX number | number[] When the finger moves outside this range (in points) along X axis and gesture hasn't yet activated it will fail recognizing the gesture. Range can be given as an array or a single number undefined
failOffsetY number | number[] When the finger moves outside this range (in points) along Y axis and gesture hasn't yet activated it will fail recognizing the gesture. Range can be given as an array or a single number undefined
heartbeat boolean When 'heartbeat' is set to true, the progress bar color will animate back and forth between its current color and the color specified for the heartbeat. useful for loading state undefined

Package Sidebar

Install

npm i react-native-awesome-slider

Weekly Downloads

7,032

Version

2.5.6

License

MIT

Unpacked Size

153 kB

Total Files

45

Last publish

Collaborators

  • alantoa