react-native-balloon-slider

react-native-balloon-slider

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