# Turnrail — Fashion Shop Product Carousel & Detail Sheet for React Native and Expo

> A clothing shop's rail for React Native and Expo: garments hang on a curved rail and turn to face you as they pass the front. Open one and it flies into a detail sheet with views, zoom, colours and sizes; add it and it flies into the bag. Light and dark.

- Kind: Mobile component (Carousels)
- Price: Free
- License: MIT License. Do anything with it, keeping the copyright notice.
- Developer: UpFork
- Tags: carousel, gesture, commerce, react-native, expo, reanimated, ecommerce, clothing-store, product-detail, shopping-bag, shared-element
- npm packages: expo-font, expo-haptics, react-native-gesture-handler, react-native-reanimated, react-native-safe-area-context, react-native-svg, react-native-worklets
- Published: 2026-11-14
- Updated: 2026-11-14
- Page: https://upfork.dev/products/fashion-shop-product-carousel-react-native

## How to get it

It's a React Native component for Expo apps (Expo SDK 57), not a shadcn item: copy its folders into the app's root from its ZIP (Download source on its page) or through UpFork's MCP server (install_product), then install its packages with Expo:

```bash
npx expo install expo-font expo-haptics react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg react-native-worklets
```

It's free for everyone: an AI assistant installs it through MCP with no account, and its ZIP downloads with a free UpFork account.

Step by step, with the App.tsx that shows it and Skia's web setup: https://upfork.dev/docs/mobile.

## About

Turnrail is a clothing store's rail for your app: garments hang on hangers along a short, curved rail across the top of the screen. The piece in front faces you and can be bought right under the rail; its neighbours hang side-on, and the rest bunch at the brackets like hangers pushed aside.

- **A rail that moves like one.** Drag it 1:1 from the first pixel, flick it, tap a piece or step with the arrows: pieces turn as they pass the front, the bunches give and take, and each piece swings a little as the rail stops. Steps chain into one move, and a hand on a moving rail catches it where it is.
- **Pieces at their real lengths.** Give each garment its length in cm and a cropped jacket hangs shorter than a long coat, with soft shadows from one light.
- **Prices on swing tags.** The piece in front wears its price on a small paper tag beside its hanger, with the old price struck through and "New" or "Last sizes". Point at any other piece, with a mouse or a resting finger, and its own price unfurls under its hook; on the web the rail knows each garment by its picture's outline, so even a sliver in a bunch shows its own price.
- **Up close, the same piece.** Open one and it lifts off its hook into a sheet: front, side, back, worn and close-up views, double-tap or pinch to zoom, swipe down to close and it flies back onto its hook.
- **Buying, right there.** Colours that swap the piece on the rail, sizes in your order with stock ("Medium, 2 left"), a size guide in cm or inches, and a pill that shows your request's progress and its error if it fails.
- **A bag that never opens by itself.** An add flies into the bag button, which bumps and rolls its count. The bag has quantities up to the stock, five seconds to undo a removal, and a Checkout callback.
- **Everywhere.** Phones from 320 pt wide, landscape, and tablets with a side panel beside a rail that stays live; as one section of a scrolling page with your own bag button; light and dark; right to left; reduced motion; screen readers and the keyboard.
- **Your catalogue.** A plain data shape with pictures for 1x and 2x screens, front and side photos with a hook point each (the README says how to make them), and `fromShopifyProducts` for Storefront API products, which hang with a front-only turn.

Three demos: the whole store, the rail as one section of a scrolling page, and the rail for a shop with only front photos. The demo garments are AI-generated pictures; replace them with your own.