· Mobile development · All posts
Same React, different runtime
React Native uses JavaScript and React patterns you already know, but it renders to native views instead of the browser. Layout, input, navigation, and permissions follow mobile rules. The first week often feels like “I know React, why is everything else hard?”—because the platform layer is new, not because you forgot how to pass props.
Shared React pitfalls still apply
- Effects and stale closures. Mobile screens mount and unmount as users navigate; dependency mistakes show up as “wrong data after I go back.”
- State ownership. Lifting state to the wrong screen or duplicating fetched data still creates impossible UI states.
- List identity. Virtualized lists are even less forgiving of unstable keys than the web; use stable IDs.
React Native-specific stumbling blocks
- Tooling and setup. Simulators, Android SDK paths, Xcode on macOS, and Metro bundler errors dominate early days. Many failures are version or path issues, not your component tree. When a configuration finally works, write it down.
- Layout with Flexbox. There is no CSS grid or document flow like the web. Flex defaults (often column) and explicit sizing matter more. Safe areas for notched devices are part of the job, not polish you add later.
- Navigation as architecture. Stacks, tabs, modals, and deep links usually live in React Navigation (or similar). Beginners underestimate how much structure sits in the navigator instead of a single screen file.
- Platform differences. iOS and Android differ in back behavior, permissions dialogs, date pickers, and keyboards. Branching with
Platformis normal, not a workaround you should eliminate. - Lists at scale. Long feeds should use
FlatList(or equivalents), not huge mapped trees of views. This is a common first performance trap. - Native modules. Camera, biometrics, or other device APIs often mean native configuration. Red build output in Xcode or Gradle can reflect native setup, not a typo in JSX.
Expo vs bare workflow
If you are starting out, a managed workflow such as Expo reduces tooling surface so you can focus on product and React. You can deepen into custom native projects once screens, navigation, and data flow feel familiar.
How to make progress
Ship one small flow end to end on a device or emulator—for example list, detail, and submit—and keep an error journal: symptom, file, smallest fix. That beats restarting from scratch every weekend.
Gratiq’s weekend-only, mentor-led model is built for learners who want that kind of momentum without doing it entirely alone.