iOS Control Center Style Slider

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
final.mp4

iOS
Screen.Recording.2024-09-14.at.10.41.57.PM.mp4

Features

• Interactive Scaling on Touch: The slider scales up when pressed, providing responsive feedback. This effect is powered by react-native-reanimated, making interactions smooth and natural.
• Gesture-Driven Slider Movement: The slider responds to gestures using react-native-gesture-handler, allowing users to drag and control the slider with precision.
• Stretchy Slider Effect: Animating scaleX and scaleY properties adds a stretchy, elastic feel to the slider as it moves, mimicking the fluid transitions of iOS controls.
• Blurred Background: The slider container includes a blurred background using Expo Blur, which creates a native, polished appearance reminiscent of the iOS Control Center.
• Cross-Platform Support: Although inspired by iOS design, the slider works smoothly on both Android and iOS, ensuring a consistent experience across platforms.

How It Works

• 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.

Related

Check out the my Twitter post: https://x.com/iamarunabh/status/1835013571203547267

Contributions

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).

Acknowledgments

• Expo: For providing the tools that power this cross-platform project.
• Reanimated: For smooth, interactive animations.
• Gesture Handler: For managing gesture-based interactions.
• Expo Blur: For the native blur effect that enhances the UI.

---

Feel free to contribute or provide feedback!