The App: Animal Detective
Animal Detective is an educational game designed for young children to discover and learn about animals from around the world. Kids tap on animated animals to hear their sounds, exploring 9 beautifully themed worlds from the Happy Farm to the Chilly Arctic.
What started as "I'll make a simple app, how hard can it be?" turned into a 100+ animal adventure that consumed my evenings for months. Worth it? Absolutely. Underestimated? Completely.
- 9 Themed Worlds: Farm, Forest, Ocean, Desert, Arctic, Insects, Savannah, Jungle, and Birds
- Real Animal Sounds: Every animal has authentic audio (yes, I now know what a capybara sounds like at 2 AM)
- Multi-Language Support: English, Russian, and Turkish (triple the debugging fun!)
- Landscape-Only Design: Optimized for immersive play (and my sanity... more on this nightmare later)
- COPPA Compliant: Safe for children with parental gates that make adults feel slightly dumb
The Tech Stack (AKA My Dependencies Have Dependencies)
I built Animal Detective using a collection of libraries that somehow all need different versions of React Native:
- React Native + Expo (SDK 53): For cross-platform development (and cross-platform headaches)
- TypeScript: Because JavaScript wasn't giving me enough red squiggly lines
- React Navigation: Seamless screen transitions (after 3 hours of debugging why the back button yeeted my state)
- expo-audio and expo-video: For animal sounds and intro videos
- react-native-reanimated: Smooth animations that work perfectly until you look at the Android debugger
- i18next: Internationalization (turns out "Penguin" in Russian is still "Pингвин" so who knew?)
- expo-in-app-purchases + react-native-iap: Monetization, or as I like to call it, "Please Apple, let my sandbox account work just once"
The choice of Expo was crucial. It let me focus on the app experience rather than native build configurations. At least, that's what I told myself before I ended up writing custom Expo plugins anyway.
The Landscape Orientation Rabbit Hole
I wanted Animal Detective to be landscape-only. Sounds simple, right? Famous last words.
Spoiler: It took custom Expo plugins, 47 Stack Overflow tabs, three existential crises, and a configuration file that looked like I was summoning a demon:
// app.json - The "simple" approach (narrator: it wasn't)
{
"orientation": "landscape",
"ios": {
"infoPlist": {
"UISupportedInterfaceOrientations": [
"UIInterfaceOrientationLandscapeLeft",
"UIInterfaceOrientationLandscapeRight"
],
"UIRequiresFullScreen~ipad": true // iPad: "lol nice try"
}
}
}Plus TWO custom plugins (withForceLandscape and withiOSLandscapeOnly) to ensure the orientation stuck, especially on iPad, which apparently treats orientation settings as "suggestions" rather than requirements. iPad woke up and chose chaos.
Version Management: A Horror Story
One thing that tripped me up: iOS apps have multiple places where version numbers live. It's like they WANT you to forget one:
| File | What It Controls | Probability You'll Forget |
|---|---|---|
app.json |
Primary Expo config | Low (you start here) |
package.json |
npm package version | Medium (npm reminds you) |
ios/*/Info.plist |
iOS native version | HIGH (it's buried deep) |
android/app/build.gradle |
Android version | VERY HIGH (what even is Gradle?) |
Every App Store submission requires incrementing the build number. Miss one file, and you'll get rejected faster than a developer at a networking event who only talks about crypto. I created a VERSION_GUIDE.md just to keep track, and I STILL forgot once.
Asset Optimization: 500+ Files (AKA My Finder Crashed)
Animal Detective has over 500 sound files and 400+ images. My project folder looked like a zoo exploded inside a hard drive. Optimization became not just crucial, it became mandatory for my sanity:
- Images: Compressed PNGs, WebP where supported (some animals went on a diet)
- Animations: JSON-based Lottie-style animations (vector graphics = tiny file sizes = happy app store)
- Sounds: MP3 format, normalized volumes (because one whale sound at 100% volume at 2 AM would wake the neighbors)
- Backgrounds: Resolution-appropriate for each device type (iPad Pro doesn't need a 4K farm scene, but it thinks it does)
I wrote custom scripts because I'm too lazy to do things manually 900 times:
- Check image sizes across the codebase (found a 12MB PNG once, it was an elephant. Fitting, I guess.)
- Compress videos for level intros (300MB to 15MB, you're welcome, users' storage)
- Verify no missing animal assets (because nothing says "polished app" like a silent, invisible penguin)
- Organize files by level (farm_cow.mp3, farm_pig.mp3... you get the idea)