A production-grade TikTok-style short-form video platform with built-in Solana DeFi wallet, AI-powered content discovery, and creator rewards — built with React Native, Expo SDK 53, and TypeScript.
Role: Lead Mobile Engineer | Company: VALA Labs Ltd | Platforms: iOS & Android
- What Is VALA?
- Architecture Overview
- Video Player System
- AI-Powered Content Discovery (VISION)
- Solana Crypto Wallet & DeFi
- Authentication & Security
- Real-Time Chat System
- Performance Optimization
- CI/CD & Deployment
- Project Scale
- Full Tech Stack
- Screenshots
- FAQ
- Contact & Hire Me
VALA is a cross-platform mobile app (iOS & Android) that combines short-form video social media with decentralized finance (DeFi) — built entirely with React Native and Expo SDK 53.
Think TikTok + crypto wallet in one app:
- vala.social — A vibe-first content discovery platform powered by VISION, a multimodal AI recommendation engine. It understands mood, energy, and aesthetics — not just views and keywords. Content travels across 30+ languages with auto-captions and translations.
- vala.finance — A built-in Solana wallet with token swaps, peer-to-peer tipping, and fiat-to-crypto onramp (MoonPay) so creators earn directly inside the app.
Users scroll a feed that "gets" them, discover content by vibe (hype, cozy, chaotic, calm, nostalgic), earn Sparks (in-app rewards) for engagement, and trade crypto — all without leaving the app.
┌──────────────────────────────────────────────────────┐
│ VALA Mobile App │
├──────────┬──────────┬───────────┬──────────┬─────────┤
│ Feed │ Discover │ Create │ Chat │ Profile │
│ (Video) │ (VISION) │ (Upload) │ (Stream) │ (Wallet)│
├──────────┴──────────┴───────────┴──────────┴─────────┤
│ Shared Layer │
│ ┌──────────┐ ┌──────────┐ ┌──────┐ ┌──────────────┐ │
│ │ Video │ │ Auth │ │ API │ │ State │ │
│ │ Player │ │ (Privy/ │ │Layer │ │ (Zustand + │ │
│ │ Pool │ │ Magic) │ │ │ │ React Query) │ │
│ └──────────┘ └──────────┘ └──────┘ └──────────────┘ │
├──────────────────────────────────────────────────────┤
│ Platform / Native Layer │
│ expo-video · Solana Web3 · Firebase · Sentry · EAS │
└──────────────────────────────────────────────────────┘
Production-grade vertical video feed with player pooling, HLS prefetch, and real-time performance monitoring.
Building a smooth TikTok-style video feed in React Native is one of the hardest mobile engineering challenges. Here's how this system works:
- Player Pool Architecture (
PlayerPoolV2) — A recycling pool that managesexpo-videoplayer instances to minimize memory. Only a few players exist at a time; they bind/unbind as cells enter/leave the viewport — similar to how RecyclerView works on Android. - Playback Gate — Controls when videos play based on viewport visibility, user interaction state, and app lifecycle (foreground/background). Prevents multiple videos from playing simultaneously.
- HLS Prefetch — Pre-fetches upcoming video HLS segments so playback starts instantly on swipe. Zero-delay transitions between videos.
- Background Video Upload — Users record or select a video, then navigate away while it uploads via a native background upload task. Upload progress is tracked via Zustand store.
- TTFF (Time To First Frame) Tracking — End-to-end performance pipeline measuring: player creation → status ready → first frame rendered → play called. All TTFF metrics are logged to Sentry in production.
- Stall Detection — Monitors loading stalls (>3s) and playback freezes in real-time. Auto-reports to Sentry with video ID and playback position context.
- Conditional Production Logging — ~70-80% log volume reduction in production. Critical metrics (TTFF, stalls, errors) always ship to Sentry; verbose lifecycle logs are development-only.
- Watch Event Tracking — Analytics tracking watch duration, completion rate, replay count, and engagement signals for the recommendation engine.
- Video Diagnostics — Built-in diagnostic tools for debugging playback issues on real devices.
Multimodal AI recommendation engine — content discovery by mood, not just metrics.
- Vibe Search — Natural language search powered by multimodal embeddings. Users search by feeling: "cozy rainy day anime vibes", "hype gym motivation", "nostalgic 90s aesthetic".
- Vibe Sections — Discover feed organized by mood/energy categories (hype, calm, nostalgic, chaotic, cozy) — not just "trending" or "for you".
- Trending Velocity Algorithm — Real-time trending that factors engagement acceleration and velocity, not just raw view counts. Surfaces genuinely emerging content.
- AI Comment Quality Analysis — Comment scoring powered by VISION API to surface meaningful conversations and filter noise.
- Auto-Translation (30+ Languages) — Comments and captions auto-translated across 30+ languages so content travels globally.
- CMS-Driven Discover Feed — Dynamic discover page with configurable sections, banners, and curated collections powered by VISION recommendations.
Full non-custodial wallet and trading experience embedded inside a social app.
- Solana Wallet (Privy) — Non-custodial embedded wallet with private key reveal, powered by Privy. Users get a wallet automatically on sign-up.
- Token Swap with WebSocket Price Feed — Real-time swap interface with live WebSocket-based price updates, quote previews, slippage controls, and transaction simulation.
- SOL & SPL Token Transfers — Send SOL and any SPL token with address validation, fee estimation, and transaction confirmation flow.
- In-Feed Creator Tipping — On-chain tipping where viewers tip creators directly while watching. Includes platform fee splits via custom Solana transaction instructions.
- MoonPay Fiat Onramp — Buy crypto with credit card/bank transfer directly inside the app via MoonPay SDK integration.
- Real-Time Token Portfolio — Portfolio view with animated price charts built with react-native-wagmi-charts and React Native Skia.
- Filterable Transaction History — Complete transaction history with date grouping, type filters, and transaction detail views.
- Solana dApp Store — Published and listed on the Solana Mobile dApp Store for Saga and Seeker devices.
- Privy Auth — Primary authentication with email OTP, Apple Sign-In, and WebAuthn passkey support.
- Magic SDK → Privy Migration — Engineered a seamless migration from Magic SDK to Privy without users losing access to their wallets or accounts.
- Token Refresh Service — Background JWT token refresh with exponential backoff retry logic and session persistence via
expo-secure-store. - Secure Key Storage — Private keys and sensitive tokens stored using
expo-secure-store(Keychain on iOS, EncryptedSharedPreferences on Android).
- Stream Chat (GetStream) Integration — Full-featured real-time chat with 1:1 DMs, group conversations, channels, user search, and typing indicators.
- Deep Link Routing — Chat deep links (
vala.fyi/chat/...) that resolve to the correct channel or conversation from push notifications or shared links. - Push Notifications — Firebase Cloud Messaging (FCM) on both iOS and Android with unread count badge sync and notification routing.
Techniques used to keep a video-heavy social app smooth at 60fps on mid-range devices.
- FlashList v2 — Replaced FlatList with @shopify/flash-list v2 for all lists. Proper
getItemTypefor heterogeneous lists,keyExtractorfor stable recycling, and memoized render item props. - Memory Pressure Hook — Custom
useMemoryPressurehook that monitors device memory warnings and proactively releases resources (video players, image caches). - Tab Memory Optimization — Inactive tabs release their video players and cached data to reduce memory footprint. Resources re-acquire when the tab becomes active.
- TTI Baseline Probes — Built-in performance probes measuring Time To Interactive (~250ms baseline), active video player count, and mounted feed row count.
- Bundle Size Monitoring — Automated Hermes bytecode bundle size tracking (~17.9 MB Android production bundle). Size regressions are caught before merge.
- React 19 + New Architecture — Running on React Native's New Architecture (Fabric + TurboModules) with React 19 for improved rendering performance.
- EAS Build (Multi-Environment) — Expo Application Services builds for
staging,preview,production, anddapp-store-productionprofiles. - OTA Updates (EAS Update) — Over-the-air JavaScript bundle updates with channel-based deployment:
development→preview→production. - Sentry Error Monitoring — Full error tracking with source maps, breadcrumbs, custom performance transactions, and video playback metrics.
- Automated Build + Submit Scripts — One-command build and App Store / Google Play submission scripts for both platforms.
- Solana dApp Store Deployment — Separate APK build profile and on-chain publishing for the Solana Mobile dApp Store.
| Metric | Count |
|---|---|
| Total Source Files | 800+ |
| API Modules | 140 |
| React Native Components | 293 |
| Custom React Hooks | 20+ |
| Zustand State Stores | 21 |
| App Screens / Routes | 125 |
| Utility Functions | 55 |
| Custom Expo Config Plugins | 4 |
| Native Patches | 3 |
| Category | Technology |
|---|---|
| Mobile Framework | React Native 0.79 (New Architecture) |
| Development Platform | Expo SDK 53 (Managed Workflow) |
| Language | TypeScript 5.8 (strict mode) |
| UI Library | React 19 |
| Navigation | Expo Router v5 (file-based, typed routes) |
| State Management | Zustand 5 + TanStack React Query 5 |
| Video Playback | expo-video with custom player pool |
| List Virtualization | @shopify/flash-list v2 |
| 2D Graphics & Charts | React Native Skia + wagmi-charts |
| Real-Time Chat | Stream Chat SDK (GetStream) |
| Authentication | Privy + Apple Authentication + Passkeys |
| Blockchain | Solana Web3.js + SPL Token |
| Fiat-to-Crypto | MoonPay React Native SDK |
| Push Notifications | Firebase Cloud Messaging (FCM) |
| Error Monitoring | Sentry React Native |
| CI/CD | EAS Build + EAS Update + EAS Submit |
| Form Handling | React Hook Form + Zod validation |
| Animations | React Native Reanimated 3 + Lottie |
| Design System | Custom (Gilroy + Fira Sans Condensed) |
| Package Manager | pnpm 9 |
Visit vala.social to see the app in action, or download it from the App Store / Google Play.
What tech stack is VALA built with?
VALA is built with React Native 0.79, Expo SDK 53, TypeScript 5.8, and React 19. It uses the New Architecture (Fabric renderer + TurboModules) and runs on both iOS and Android from a single codebase. The crypto features use Solana Web3.js and the video player uses expo-video with a custom player pool.
How does the TikTok-style video feed work in React Native?
The vertical video feed uses a custom Player Pool architecture. Instead of creating a new video player for every video, a small pool of expo-video players is recycled as the user scrolls. Players bind to visible cells and unbind when they scroll off-screen. Combined with HLS prefetch and a playback gate, this achieves smooth 60fps scrolling with instant playback on swipe.
How does VALA's AI recommendation engine work?
VALA uses VISION, a multimodal AI engine that analyzes what's inside each video — visuals, audio, mood, energy, aesthetic. It builds a real-time taste profile for each user based on their engagement patterns, not just follower graphs. Users can also search by vibe using natural language queries like "cozy rainy day anime vibes".
What blockchain does VALA use?
VALA uses the Solana blockchain for its crypto features. Users get a non-custodial embedded wallet (powered by Privy) on sign-up. They can swap tokens, send SOL/SPL tokens, tip creators on-chain, and buy crypto with fiat via MoonPay. The app is also published on the Solana Mobile dApp Store.
How is performance optimized for a video-heavy app?
Key optimizations include: FlashList v2 for list virtualization, a player pool that limits concurrent video instances, memory pressure monitoring that proactively releases resources, tab-level memory optimization that cleans up inactive tabs, HLS segment prefetching, and Hermes bytecode compilation. The app targets ~250ms TTI and maintains a ~17.9 MB production bundle.
Can I hire you for React Native / mobile development?
Absolutely! I'm open to freelance, contract, and full-time opportunities. Check the Contact section below for my LinkedIn, email, and other ways to reach me.
React Native · Expo · TypeScript · Solana · Web3 · DeFi · TikTok Clone · Short-Form Video · AI Recommendations · expo-video · FlashList · Zustand · React Query · Stream Chat · Firebase · Sentry · MoonPay · Privy · React Native Reanimated · React Native Skia · Lottie · EAS Build · Expo Router · Hermes · New Architecture · React 19 · iOS · Android · Mobile App · Cross-Platform
I'm a mobile engineer specializing in React Native, Expo, and Web3 mobile apps. I'd love to discuss this project, share technical insights, or explore opportunities.
| Channel | Link |
|---|---|
| 🐦 X / Twitter | @0xapp123 |
| apollo1030109@gmail.com | |
| 🌐 Portfolio | Portfolio |
| 💻 GitHub | @0xapp123 |
⭐ If you found this interesting, please star this repo! Stars help others discover this project.
This repository is a portfolio showcase of my work as a Lead Mobile Engineer at VALA Labs Ltd. No proprietary source code, API keys, or sensitive business logic is included. All information presented is based on publicly available details about the VALA product.