react-native-awesome-slider icon indicating copy to clipboard operation
react-native-awesome-slider copied to clipboard

verified publisher icon alantoa
→

Metadata

🚀 An anwesome <Slider/> that supports various features haptic, lottie, animation, ballon, etc.

trafficstars
`JSThread` to `JSThread`, `UIThread` to `UIThread`.

React Native Awesome Slider

Reanimated v2 version npm npm runs with expo

Typescript 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',
  }}
/>

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-gusture-handle.
  • Supports Tap & Pan triggering.
  • Support for discrete slider.
  • Support haptic feedback.
  • and more...

TODO list

  • ~~Support step props~~
  • ~~Optimize bubble & thumb~~
  • Add RTL support
  • Rewrite using react-native-gesture-handle v2
  • Support marks props

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 }
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
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 Step value of the slider. The value should be between 0 and maximumValue - minimumValue) ❌ undefined
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

← Metadata

218
Stars
26
Forks
Watchers

Owner

verified publisher icon alantoa

Metadata

🚀 An anwesome <Slider/> that supports various features haptic, lottie, animation, ballon, etc.

Back