Skip to content

v0.3.0 — Add property picker, init CLI, undo/redo, persistence, auto-scroll

Choose a tag to compare

@dgutierrezd dgutierrezd released this 05 Apr 02:21

Five features delivered in one release:

✨ + Add property picker

A searchable modal listing ~80 React Native style properties across 11 groups (Layout, Flex, Spacing, Sizing, Position, Background, Border, Shadow, Typography, Transform, Visibility). Tap a property to insert it with a sensible default — the AST engine handles the upsert.

🚀 npx rn-studio init

Zero-config bootstrap. Patches babel.config.js to register the plugin (dev-only gated), adds the studio script to package.json, and prints the App.tsx snippet. Idempotent.

↶ ↷ Undo / Redo

50-deep server-side edit stack. Every AST rewrite captures before/after snapshots. New WebSocket messages UNDO, REDO, STACK_STATE keep client buttons in sync. ↶ ↷ buttons in the inspector panel header.

💾 State persistence

Selection survives Cmd+R and Fast Refresh via AsyncStorage. On mount, walks the React DevTools fiber roots to re-select the previously inspected component automatically.

📜 Auto-scroll on select

When you tap a component hidden behind the 60% inspector panel, rn-studio walks the fiber tree to find the nearest ScrollView / FlatList / SectionList ancestor and scrolls it so the component lands in the top 12% of the screen — fully visible above the panel. No-op if already visible.

Install

```bash
npm install rn-studio@0.3.0
npx rn-studio init
```