Who said we can’t build games in Adalo?
Five years ago, I built a simple car collector app on Adalo: Car Collector 2021. It was fun but limited. Adalo’s native components could only take it so far. I shelved it and moved on.
Well, I picked it back up. This time, with a completely different approach.
TEST IT FROM A REAL MOBILE PHONE, not Adalo mobile previewer on PC. Many things are broken on preview such as image cards and React Native modals that go full screen. Test from your phone please!!!
The Concept
Car Gatcha Collector is a gacha-style car collecting game built entirely inside a single custom React Native component. One index.js file (~1,160 lines) handles everything: pack opening, garage, marketplace, leaderboard, missions, collections, and all animations.
The Adalo backend handles the database (users, owned cars, marketplace listings, collections) and user authentication. The component handles all the game logic, UI, and animations internally.
What’s Inside
6 pack tiers from Daily Pull (free) to Prestige (30,000 coins), each with different drop rates that scale from 84% Common down to 40% Mythic.
55+ cars across 10 themed collections: JDM Legends, Italian Classics, Rally Legends, American Muscle, Hot Hatch Heroes, French Touch, German Precision, British Royalty, Supercar Elite, Everyday Heroes.
5 rarity tiers (Common, Rare, Epic, Legendary, Mythic) each with tier-colored animations.
Pack opening animation that scales with rarity. A Common gets a gentle shake. A Mythic gets an earthquake with full-screen flash and 35 particles. The charging, shake intensity, flash brightness, and particle count all change based on what you pulled.
“Open Again” button after each pull so you can chain-open packs without going back to the shop.
Marketplace where players sell cars to each other at their own price.
Quick Sell to sell duplicates instantly to the game at base value.
Collection system where completing themed sets earns you coin rewards (5,000 to 25,000 coins).
Leaderboard ranked by completed collections, with tappable player profiles showing their full garage.
65+ missions across 3 categories (Collector, Trader, Explorer) with claimable rewards that sort automatically with ready-to-claim missions at the top.
Parallax carousel on the home screen showing your best cars.
Swipe-to-close bottom sheets using PanResponder.
Animated coin/score counters that increment in real time when you earn or spend.
“New!” and “Duplicate” badges on pack reveals so you know instantly if it’s a first pull.
Tier filters and search in both Garage and Marketplace.
Multilingual with Italian and English, auto-detected from device language.
Dark theme throughout, no gradients or shadows (Android-safe).
The Architecture
This follows my usual Adalo custom component pattern:
Single index.js file as Adalo’s component system requires. Module-level variables to survive Adalo’s frequent remounts. autosaveInput props for real-time persistence (coins, score, totalCars, etc.). useNativeDriver: true on every animation for native thread performance. No external libraries beyond what Adalo provides (React Native core, AsyncStorage, react-native-svg). All user matching by email (not username) for multi-device consistency.
The component communicates with Adalo through props (lists in, autosave values, actions out). Pack results, marketplace listings, and purchases all flow through Adalo actions that create/update/delete database records.
Current State
Right now we’re testing as a Progressive Web App with a group of friends. It works, it’s playable, and it’s fun. But the animations lag on mobile web because useNativeDriver doesn’t truly run on the native UI thread inside a WebView. It falls back to JavaScript-driven animation.
What’s Next: Native Builds
I’m about to build the Android AAB and iOS Testflight through Adalo’s build pipeline. The performance difference will be significant.
useNativeDriver: true will actually work. Animations will run on the native UI thread at 60fps instead of being bottlenecked by the JS bridge. Pack opening animations (charging, shake, flash, particle explosion) will be buttery smooth. List scrolling through 100+ cars in the garage will be instant. The parallax carousel will feel like a native app.
This is the biggest advantage of building as a React Native component rather than a web component. When it ships as a native app, you get native performance for free.
Built With
Adalo (backend, auth, database, build pipeline), React Native (via Adalo custom component), Animated API with native driver, react-native-svg for all icons, AsyncStorage for local state (claimed missions, claimed collections), PanResponder for swipe gestures.
Looking forward to sharing the Play Store and App Store links soon. Happy to answer any questions about building game-like experiences with Adalo custom components.
Some screenshots here
Eugenio, Cheip Studio
