Atlas Flip

A card that lifts, grows, and flips into its details. Close it and it returns along the same path.

Built for React Native + Expo, originally created for JourneyDeck. Bring your own cards, charts, photos, and colors.

Watch the smooth, full-frame-rate video · Video file

The recording shows the original JourneyDeck implementation. The standalone demo uses fictional data and simpler styling. The looping GIF is a lower-frame-rate preview; open the video to judge motion.

Try it

Use Node 24+, then:

git clone https://github.com/drumpat01/Atlas-Flip.git
cd Atlas-Flip
npm ci
npm start

Open the QR code in an Expo Go version supporting SDK 57, or press i / a for an installed iOS simulator / Android emulator. iOS Simulator requires macOS and Xcode. No account, backend, API key, or EAS deployment is required.

The demo includes floating and full-screen cards, light/dark palettes, reverse closing, and an automatic Reduce Motion alternative.

Use it in your app

Copy src/ into your project, install the dependencies below, and wrap your app once in SafeAreaProvider from react-native-safe-area-context if it does not already have one.

npx expo install react-native-reanimated react-native-worklets react-native-safe-area-context

import { AtlasFlip } from './atlas-flip'; // wherever you copied src/

<AtlasFlip
  accessibilityLabel="Open activity details"
  style={{ width: 170, height: 230 }}
  renderFront={() => <YourCompactCard />}
  renderBack={({ close }) => <YourDetails onClose={close} />}
/>

Give both faces a filled background and flex: 1. Use fullScreen for a window-sized destination. There is no npm package to install; this is a small, copyable reference implementation.

Good to know

• Demo baseline: Expo 57, React 19.2, React Native 0.86, Reanimated 4.5.1, Worklets 0.10.1; New Architecture required. Let expo install select compatible versions for your app. Expo setup.
• Haptics are optional and injected through onStart. Only the demo imports expo-haptics.
• The full-screen variant stays in a modal; it does not replace your router or add a native back-swipe gesture.
• Original motion was accepted on an iPhone in JourneyDeck. This extracted version needs its own device validation; Android, web, and tablet rendering are not certified. Web is not a supported demo target.

For photos, lifecycle details, and navigation boundaries: Integration guide. For contributors and AI coding agents: AGENTS.md.

Check your changes

npm run typecheck
npm test
npm run export:ios

MIT for code and documentation. Demo-media terms cover the JourneyDeck recording and GIF.

Verification and dependency notes.