react-native-skia-example

Example project for debugging and showcasing purposes on react-native-skia

Getting Started

1. Clone the repository:

git clone https://github.com/your-username/react-native-skia-example.git
cd react-native-skia-example

2. Install dependencies:

npm install
# or
yarn install

3. Start the Expo development server:

npx expo start

4. Run on your device:

• Scan the QR code with Expo Go (Android)
• Scan the QR code with Camera app (iOS)
• Press 'a' for Android emulator
• Press 'i' for iOS simulator

Current Examples

• 3D Floating Spheres: Interactive 3D visualization inspired by a kinetic art installation at Berlin's Dark Matter museum. Features gesture controls for view angle adjustment and wave motion manipulation.

• Navigation Compass: Real-time compass implementation showing cardinal directions and distance to nearby generated points of interest.

• Maze Runner: Physics-based ball maze game demonstrating Skia's gameloop capabilities (Note: Android performance optimization in progress).

• Flappy Bird Clone: Classic game recreation showcasing smooth animation and collision detection using Skia's gameloop.

• iOS Springboard: Experimental implementation of iOS-style home screen with draggable app icons and grid snapping.

• Canvas Mount Benchmark: Performance demonstration of simultaneous canvas mounting and management.

• Backdrop Blur Effects: Implementation of dynamic blur effects on images using overlay badges.

• Canvas Scaling Demo: Technical demonstration of canvas scaling properties and behaviors.

• View-to-Canvas Renderer: Example of converting React Native views to canvas elements using snapshot functionality.