Loading page
by embr
Swipeable card deck interface for React Native with tab-based navigation, built with Expo Router and TypeScript. Features gesture-driven discovery cards, match management, and real-time messaging with customizable dark theme styling. Includes imperative handle patterns for programmatic card control and safe area compensation across iOS, Android, and web platforms. Licensed under Tetrees License.
Mobile 3D12 is a React Native dating app interface built with Expo Router and TypeScript. It provides a complete tab-based navigation system with card swiping discovery, matches management, messaging, and user profiles. The app features a dark theme design with smooth interactions and platform-specific optimizations for iOS, Android, and web.
npm install
# or
yarn install
# iOS
npx expo run:ios
# Android
npx expo run:android
# Web
npx expo run:web
app/(tabs)/
├── _layout.tsx # Tab navigation configuration
├── index.tsx # Discover screen with card deck
├── matches.tsx # Matches and conversations
├── messages.tsx # Searchable message list
└── profile.tsx # User profile (referenced)
components/
├── CardDeck.tsx # Swipeable card component
├── icons/ # Lucide icon wrappers
└── ...
data/
├── profiles.ts # Profile data and getProfile()
├── matches.ts # Match data (MATCHES array)
└── messages.ts # Message data and getConversation()
constants/
└── theme.ts # Colors, spacing, typography
CardDeck - Manages swipeable profile cards with:
onSwipe(profile, direction) - Callback for swipe gestures (left/right/up)onTap(profile) - Callback for card taponEmpty() - Callback when deck exhaustedswipeLeft(), swipeRight(), swipeUp()SwipeActions - Action button row with callbacks:
onRewind(), onReject(), onLike(), onSuperLike(), onBoost()Tab Navigation - Configured with:
#ff4458 (pink)#666 (gray)#0a0a0aThe app expects three data sources:
// profiles.ts
export const PROFILES: Profile[] = [...]
export function getProfile(id: string): Profile | undefined { ... }
// matches.ts
export const MATCHES: Match[] = [...]
// messages.ts
export function getConversation(profileId: string): Message[] { ... }
TAB_BAR_HEIGHT + insets.bottom padding to prevent content overlapTetrees License
Spin up an isolated sandbox and run it server-side — no local setup.
The sandbox audition completed and the detected runnable path passed.
This React, React Native mobile app completed archive review. Structure, dependency manifests, documentation, functional source, and common risk patterns were checked by the Tetrees verification pipeline; runtime phases are stated separately.
Deterministic AVCP artifact review
Pipeline avcp-2026-08-04.1 · SHA-256 053f589f88f48595…
This version-scoped review deterministically inspects the submitted archive for structure, dependencies, documentation, functional source, and common malicious or high-risk signals. Build and test phases are reported as passed only after an isolated sandbox audition. It is not a guarantee of perfect security.
Reviewed Aug 4, 2026
The full install guide and integration prompts unlock after purchase.
Push this product straight into your AI IDE, web builder or cloud IDE.
Connect Tetrees to a compatible AI IDE, list products you own, and request the verified ZIP without exposing seller upload controls.
12 ratings
Saved me a ton of time. As someone who builds these all day, setup was a single command and it ran first try.
This is a keeper. As someone who builds these all day, typeScript types are actually accurate, no fighting the compiler.
Genuinely impressed. Picked up "Swipe Dating App Template" for a client app — Handles the edge cases I usually have to patch myself. Docking half a star only because I wanted a couple more examples.
Rock solid so far. Dropped this mobile template straight into the app; the README covered every config I needed. Will definitely check their other products.
Clean and well thought out. Used this mobile template to build my app and it cut days off the build. Will definitely check their other products.
This is a keeper. Zero mystery dependencies, everything is documented, and examples matched the actual API, which is rare. Support answered my question fast.
Great starting point. Picked up "Swipe Dating App Template" for a client app — No spaghetti — the folder layout is sane. No regrets.
Clean and well thought out. Picked up this mobile template for a client app — TypeScript types are actually accurate, no fighting the compiler. Support answered my question fast.
Better than I expected. As someone who builds these all day, the code is readable and the structure makes sense. Support answered my question fast.
Saved me a ton of time. Dropped this mobile template straight into the app; the README covered every config I needed. Minor tweaks needed for my use case but nothing broke.
Sign in to join the discussion
Loading discussion…