Some samples for gesture controlled, bezier based rope implementation.
There are 2 different solutions based on react-native-skia & react-native-svg
- RopeViewSkia.tsx:- Interactive Rope implementation using react-native-skia.
- RopeViewSvg.tsx:- Interactive Rope implementation using react-native-svg.
- Connect the Socket:- A demo showcasing an interactive usage of Rope view layout in an application. based on this demo.
- Two ends of the rope are controllable through gestures.
- Skia sample has Glow and Shadow effect with the rope layout to give it a more realistic feel, through cannot find similar solution for SVG implementation cause of no blur support.
- Can easily switch between Skia <---> SVG implementation, to use respective's rope view layout on a full-fledged sample.
-
@shopify/react-native-skia:- Drawing and controlling the rope layout using Skia APIs.
-
react-native-svg:- Rope layout UI using SVG APIs.
-
react-native-gesture-handler:- Track user gestures to control the rope's movement on the screen.
-
react-native-reanimated:- For ropes related animations. For skia it's only used for gesture based view movements, but for SVG all animations are controlled by reanimated.
-
react-native-vector-icons:- Google Material icons, to use in Connect the Socket demo.
-
react-native-sfsymbols:- Apple's SF Symbols (iOS only), to use in Connect the Socket demo.
-
react-native-safe-area-context:- Handle UI for iOS Safe Area.
Inspired by this original SwiftUI implementation by @robb.
- Blog Post with detail explanation for physics behind spring animations.
- This video by @wcandillon really helped me to get an idea about applying gesture interactions for individual Skia components.