wix/react-native-interactable
React Native Interactable
react-native-interactable is a gesture physics library and interaction framework for React Native. It provides an animated gesture engine and a physics-based UI toolkit designed to create complex touch-based components such as swipeable rows and draggable cards.
The project distinguishes itself through the simulation of physical properties, including spring tension, surface friction, and gravitational forces. It allows for the creation of gravity wells that attract or repel views and integrates simulated springs to pull elements toward specific coordinates with adjustable damping.
The framework covers a broad range of interaction capabilities, including coordinate snapping, boundary entry detection, and movement range restrictions with configurable bounce effects. It also enables the synchronization of real-time view movement with animated properties to drive changes in opacity, scale, or rotation.
Features
- UI Physics Coordinators - Calculates view coordinates using simulated spring tension, damping, and gravitational forces to mimic real-world movement.
- Gesture Interaction Frameworks - Implements a high-performance engine that maps real-time touch gestures to animated interface properties.
- Animated Gesture Event Mappings - Maps real-time view movement deltas to animated values for synchronized interface transitions.
- Interaction Frameworks - System for creating complex touch-based components like swipeable rows and draggable cards using high-performance animations.
- Gesture Physics Libraries - Provides high-performance draggable and swipeable interface elements in React Native using physics-based movement.
- Gesture Physics Extensions - Adds spring physics, friction, and gravitational forces to draggable views within React Native.
- Spring Physics Configurations - Provides simulated springs that pull elements toward specific coordinates with adjustable tension and damping.
- Physics-Based Animations - Implements interface elements that respond to touch using simulated gravity, springs, and friction.
- Interactive Motion Drivers - Binds real-time draggable view coordinates to animation drivers for controlling opacity, scale, and rotation.
- Movement Boundary Constraints - Restricts view movement within defined rectangular areas and implements bounce effects when boundaries are exceeded.
- Physics-Based UI Toolkits - Provides a comprehensive set of tools for simulating tension, damping, and boundary bounce for mobile interfaces.
- Interaction Coordinate Snapping - Forces views to align with specific target coordinates after a gesture ends to create locked UI states.
- Touch Coordinate Deltas - Tracks touch coordinate differences to apply physics-based friction and resistance logic.
- Physics-Driven View Rendering - Supports rendering views that interact dynamically using simulated spring physics, gravity, and friction.
- UI Gravitational Simulations - Enables the creation of gravity wells that attract or repel views within specific influence areas.
- UI Surface Friction Simulations - Simulates physical resistance within specific screen regions to increase movement difficulty for views.
- Interactive Navigation Components - Enables development of non-standard navigation components like draggable cards and swipeable rows with precise snapping.
- Screen Boundary Triggers - Triggers events when a view's center point enters or exits predefined screen boundary regions.
- Programmatic Position and Size - Enables the programmatic manipulation of view coordinates and velocities via imperative commands.
- Reactive Animation Bindings - Links real-time view movement to other animation values to create reactive and dynamic mobile user interfaces.
- Movement Range Restrictions - Allows setting hard horizontal and vertical movement boundaries with configurable bounce effects.
- Animation Response Mappings - Maps view movement deltas to animated values so other interface elements react in real-time.
- View Property Animators - Synchronizes view movement to animated values to drive the scale, opacity, or rotation of elements.
- Animation - High-performance interactable views.
