NativeBook: Native-First React Native Component Playground

The Problem

Traditional Storybook workflows are slow because developers have to switch constantly between a web browser (to change props) and a mobile simulator (to see results).

The Solution

NativeBook is an in-app developer tool that lets you browse and test UI components directly on your mobile device via a gesture-based floating overlay.

Key Features

• In-App Explorer: Browse components without leaving the simulator.
• Dynamic Knobs: Change component states (loading, error, success) in real-time.
• Isolation Stage: A dedicated preview area with grid lines and pixel-precise measurements.
• Premium DX: Built with glassmorphism, dark mode, and smooth spring animations.

Tech Stack

• React Native & TypeScript: Core framework.
• Zustand: Lightweight state management for instant syncing.
• Animated API & PanResponder: Powers the gesture-based UI and transitions.
• Custom Registry: A zero-boilerplate function to register new components.

Technical Challenge

The team built a custom high-order provider to handle the "Preview Swap." This allows the app to switch between the main UI and the component preview smoothly using a "lagging state" system to prevent animations from cutting off during unmounting.

Built With

• react-native