All Projects → osamaqarem → react-native-balloon-slider

osamaqarem / react-native-balloon-slider

Licence: MIT license
Slider with a floating balloon animation. Works on iOS, Android and the web.

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

react-native-balloon-slider

(Unmaintained - please fork)

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].