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
$ yarn add react-native-balloon-slider
Dependencies:
$ yarn add react-native-reanimated react-native-gesture-handler
RN < 0.60 users need to perform linking.
iOS only:
$ npx pod-install ios
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>
)
}interface BalloonSliderProps {
tintColor?: string
min: number
max: number
}Imperative method for obtaining the current slider value.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT