3D Product Viewer 360 Spin in React Native (Free Guide)

The fastest free way to build a 3D product viewer with 360 spin in React Native is to start from a finished design on VP0, then pick one of two technical paths. VP0 is the free iOS design library for AI builders, so you copy a near-matching viewer screen into Cursor or Claude Code and get the gallery, spin controls and add-to-cart right in one pass, then wire up the spin itself. The two paths are an image-sequence spin or a real 3D model, and most stores should choose the first.

What a 360 product viewer needs

A good viewer has a clear hero area, a draggable spin that tracks the finger one to one, an optional auto-rotate hint on first view, and obvious controls (reset, zoom, AR if you have it). It must feel instant, which is a performance problem more than a graphics problem: app day-1 retention already sits near 25%, and a viewer that stutters on the first drag is a fast way to lose the rest.

Two ways to build the spin

The image-sequence spin is pre-rendered: you export 24 to 72 frames of the product rotating, then map a horizontal pan gesture to a frame index so dragging scrubs through them. It looks photoreal, weighs little, and never drops frames because it is just images. The real 3D path loads a GLTF model and renders it with react-three-fiber on top of expo-gl, which unlocks zoom into geometry, dynamic lighting, material swaps and AR, at the cost of more weight and tuning.

Which approach to pick

Approach	Best for	Tradeoff
Image-sequence spin	Most product shots, photoreal look	No zoom into geometry or live lighting
3D model (react-three-fiber)	Zoom, lighting, configurators, AR	Heavier, needs perf tuning and a real model

A worked example

Say you sell sneakers. Export 36 frames of one shoe rotating, name them in order, and ship them with the app or a CDN. In React Native, preload all 36 into memory, then use a Reanimated pan handler that maps drag distance to a frame index on the UI thread, so the image swaps instantly with no JS round-trip. Add a subtle auto-spin on first render to signal it is interactive. Start the whole screen from a VP0 product-viewer design so the controls and layout are done before you touch the spin.

Keep it at 60 fps

Three rules keep it smooth. Preload every frame before enabling the gesture, so dragging never waits on a network or disk read. Run the gesture-to-frame mapping on the UI thread with Reanimated, not the JS thread. And cap frame resolution to the display size, since a 4K frame on a 400-point-wide view wastes memory for no visible gain. For the 3D path, the same discipline applies plus limiting polygon count and texture size. General guidance is in the React Native performance docs.

Common mistakes

The most common mistake is loading frames on demand, which makes the first spin stutter. The second is running the pan gesture on the JS thread, so it lags under fast drags. The third is reaching for a full 3D engine when an image spin would look better and ship faster. The fourth is shipping uncompressed frames, which bloats the app and memory.

Key takeaways

• A 360 viewer is a performance problem: it must track the finger at 60 fps every time.
• Use the image-sequence spin for most products; use react-three-fiber and expo-gl only for zoom, lighting or AR.
• Preload frames, drive the gesture on the UI thread, and cap resolution to the screen.
• Start the surrounding UI from a free VP0 design so you only build the spin itself.

Keep reading: for a camera and AR overlay in native code see SwiftUI camera and ARKit overlay, and for the small interactions around it see native toast notification modals.

FAQ

How do I build a 3D product viewer with 360 spin in React Native?

The fastest free way is to start from a VP0 design, then choose one of two paths: an image-sequence spin (pre-rendered frames you scrub with a pan gesture) for most product shots, or a real 3D model with react-three-fiber and expo-gl when you need zoom, lighting or AR. Drive the spin on the UI thread and preload frames so it stays at 60 fps.

Image-sequence spin or a real 3D model: which is better?

For most ecommerce, the image-sequence spin wins: it is lighter, looks photoreal, and never drops frames because it is just images. Use a real 3D model (GLTF) only when you need zoom into geometry, dynamic lighting, configurable materials or AR placement, which the image approach cannot do.

What makes a 360 viewer feel janky, and how do I fix it?

Jank comes from loading frames on demand and running the gesture on the JS thread. Fix it by preloading all frames first, mapping the pan gesture to a frame index on the UI thread with Reanimated, and capping resolution to what the screen actually shows.

Is VP0 good for building a 3D product viewer UI?

Yes. VP0 is the free iOS design library for AI builders, so you copy a near-matching product-viewer design into Cursor or Claude Code and get the surrounding UI (gallery, controls, add-to-cart) right in one pass. It does not render your 3D for you, but it removes the blank-page work around the viewer.