Claude Merch
nativebook
storybook in your ios simulator
Core trick
Floating in-app overlay registers components through a zero-boilerplate function and swaps the main UI with a lagging-state provider for previews.
Tags
Built with
react-native
Description
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.
README excerpt
This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). # Getting Started > **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding. ## Step 1: Start Metro First, you will need to run **Metro**, the JavaScript build tool for React Native. To start the Metro dev server, run the following command from the root of your React Native project: ```sh # Using npm npm start # OR using Yarn yarn start ``` ## Step 2: Build and run your app With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app: ### Android ```sh # Using npm npm run android # OR using Yarn yarn android ``` ### iOS For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps). The first time you create a new project, run the Ruby bundler to install CocoaPods itself: ```sh bundle install ``` Then, and every time you update your native dependencies, run: ```sh bundle exec pod install ``` For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). ```sh # Using npm npm run ios # OR using Yarn yarn ios ``` If everything is set up correctly, you should see your n