Ballon slider - Reanimated, Gestures, Sensors and Math

Description

Custom React Native slider animation using React Native Reanimated, React Native Gesture Handler, Rotation sensor via `useAnimatedSensor` and finally Math.atan2 to calculate the angle of the ballon. The angle is calculated using physics based animation via `withSpring` where we naturally delay the new position of the ballon and get the angle between previous `x,y` and new springified `x,y` knob positions. NOTE: The `y` is always fixed, because the ballon `y` position never changes.

Installation

bunx @animatereactnative/cli@latest add ballon-slider-reanimated-gestures-sensors-and-math

npx @animatereactnative/cli@latest add ballon-slider-reanimated-gestures-sensors-and-math

yarn @animatereactnative/cli@latest add ballon-slider-reanimated-gestures-sensors-and-math

pnpm dlx @animatereactnative/cli@latest add ballon-slider-reanimated-gestures-sensors-and-math

Preview

Dependencies

PackageVersion
react-native-gesture-handler~2.28.0
react-native-reanimated~4.1.0

To install these dependencies, you can use the following command:

bun add react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

npm install react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

yarn install react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

pnpm install react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0"

Source code