📱 iOS-style Control Center slider using Expo, Reanimated & Gesture Handler! 🚀
This project demonstrates a custom iOS Control Center style slider, built using react-native-reanimated and react-native-gesture-handler. The slider emulates the smooth and responsive experience found in iOS, with interactive scaling and stretchy effects to enhance user interaction.
Check out the slider in action 👇:
Android |
---|
iOS |
---|
react-native-reanimated
, making interactions smooth and natural.react-native-gesture-handler
, allowing users to drag and control the slider with precision.scaleX
and scaleY
properties adds a stretchy, elastic feel to the slider as it moves, mimicking the fluid transitions of iOS controls.Touch Scaling Animation: When the slider is pressed, a scale-up animation on the X and Y axes (scaleX
and scaleY
) is triggered. This is handled using react-native-reanimated
, adding subtle visual feedback during interaction.
Gesture Handling: react-native-gesture-handler
captures touch and drag gestures, allowing users to control the slider's position with smooth and responsive motion.
Stretchy Feel: As the slider is dragged, animated scaling creates a stretchy, dynamic effect, enhancing the overall interaction. The slider returns to its original state when the gesture ends, maintaining a smooth, fluid transition.
Blur Effect: The blurred background, implemented with Expo Blur, provides a polished, native look to the slider container, particularly on iOS.
Check out the my Twitter post: https://x.com/iamarunabh/status/1835013571203547267
Contributions are welcome! If you'd like to improve the animations, refine gesture handling, or add new features, feel free to open a pull request (PR).
Feel free to contribute or provide feedback!