Feat: Interactive Component Previews with Phone Frame

[0x2e73]

Add Interactive React Native Component Previews with iPhone Frame

Description

Implement interactive component previews that render React Native components directly in the browser using react-native-web, displayed within a realistic iPhone frame. This will replace the current video-based previews with fully interactive, touchable component demonstrations.

Goals

• Replace static video previews with interactive React Native component previews
• Display previews within a realistic iPhone frame (375x812px) with notch, status bar, and home indicator
• Components should be fully interactive (clickable buttons, scrollable content, etc.)
• Preview should work directly in the browser without requiring any external server or playground
• Support all component variants, sizes, and states

Dependencies

• react-native-web - Render React Native components in browser
• react-native-safe-area-context - Safe area handling
• react-native-gesture-handler - Gesture support
• nativewind - Tailwind CSS for React Native

Notes

I already have a sample if you want to see it..

Tell me what you think @theoribbi <3

[theoribbi]

Hey @0x2e73, love the idea. If you check the Playground repo, that’s where the video was made, and this app will be available on the App Store and Play Store too (currently in TestFlight). So it would be great if this playground manage ios, android and web preview.

I think that if you fix all the theming and make all component dependencies 100% web compatible, it could be a really great idea. When it’s done, I’ll deploy it to Vercel.

[impressivewebs]

Not sure if this is related to this open issue, but none of the "video" demos are working in the docs site. For example:

https://www.nativeui.io/docs/components/drawer

The video previews don't load for me.

Example video URL:

https://xbu6gsnzqpqao6cm.public.blob.vercel-storage.com/ui/drawer.mp4

[theoribbi]

Hey @impressivewebs,

It was an issue about Vercel blobs (usage exceeded), i've just done the migration to another provider, the video should now be available.

This issue is still in progress.

Thank you for the report :)