README

react-native-balloon-slider

Demo gif

Slider with a floating balloon animation. Works on iOS, Android and the web.

Based on cuberto/balloon-picker

Try it out. Expo Snack:

https://snack.expo.io/@osamaq/react-native-balloon-slider

Installation

$ yarn add react-native-balloon-slider

Dependencies:

$ yarn add react-native-reanimated react-native-gesture-handler

RN < 0.60 users need to perform linking.

For Expo users [1] [2].

iOS only:

$ npx pod-install ios

Usage

import BalloonSlider from "react-native-balloon-slider"

const App = () => {
  const balloonSlider = useRef()

  const getSliderValue = () => {
    if (balloonSlider.current) {
      console.log(balloonSlider.current.getValue())
    }
  }

  return (
    <View style={styles.main}>
      <View style={styles.slider}>
        <BalloonSlider min={0} max={100} ref={balloonSlider} />
      </View>
      <TouchableOpacity style={styles.btn} onPress={getSliderValue}>
        <MyButton />
      </TouchableOpacity>
    </View>
  )
}

Props

interface BalloonSliderProps {
  tintColor?: string
  min: number
  max: number
}

Methods

`getValue()`

Imperative method for obtaining the current slider value.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Usage no npm install needed!