React Native Deep Dive Roadmap

React Native is React for mobile — you write React components and they render as native iOS/Android views. You need React fundamentals first: JSX, props, state, useState/useEffect/useCallback/useMemo hooks, and component composition. Strong JavaScript knowledge matters: closures, async/await, array methods, destructuring, and optional chaining. TypeScript is strongly recommended for React Native projects. Basic understanding of how mobile apps work (bundle IDs, provisioning, app stores) helps but isn't required. If you haven't used React, build a small web app with React first.

Two paths: Expo (recommended for most apps) and React Native CLI (bare workflow, full native access). Expo Go is the fastest start — npx create-expo-app, scan QR code, see your app on a real device in minutes without Xcode or Android Studio. Expo SDK wraps native APIs (camera, location, notifications, sensors) as JavaScript modules. EAS (Expo Application Services) builds signed binaries in the cloud — no Mac required for iOS. React Native CLI requires Android Studio (emulator) and Xcode (iOS — macOS only). Choose Expo unless you know you need a native module not in Expo's ecosystem.

React Native components map to native views — there is no HTML or CSS. Core components: View (like div), Text (required for all text — no naked strings), Image, TextInput, ScrollView, FlatList (virtualized list — required for long lists, not ScrollView), SectionList (grouped data). Touchables and pressables: TouchableOpacity (fades on press), Pressable (flexible, supports onLongPress, style as function). SafeAreaView and the safe area insets (iPhone notch). KeyboardAvoidingView (prevent keyboard from covering inputs). Platform.OS and Platform.select for platform-specific code. StatusBar control.

React Native uses a subset of CSS delivered as JavaScript objects — no stylesheets or class names. StyleSheet.create() groups styles and provides type checking and optimization. Flexbox is the only layout system (flexDirection defaults to column unlike web). Understand: flexDirection, justifyContent, alignItems, flex, flexWrap, and gap. Dimensions API for screen size (Dimensions.get('window')). useWindowDimensions hook for responsive updates. No box model with rem/em — everything is density-independent pixels. Platform-specific styles with Platform.select. Styled components and NativeWind (Tailwind for React Native) are popular alternatives to inline StyleSheet.

React Navigation is the standard navigation library. Learn the three core navigators: Stack Navigator (pushes screens onto a stack — native-feeling back gesture, header), Tab Navigator (bottom tab bar — Expo Router uses this), and Drawer Navigator. Compose them (tabs with a stack inside each tab). Pass params between screens (navigation.navigate('Profile', { userId: '123' })), read with route.params. useNavigation() hook to navigate from any component without prop-drilling. Headers — custom title components, right buttons. Deep linking configuration. TypeScript types for routes (createNativeStackNavigator with typed params). Expo Router wraps React Navigation with file-based routing.

useState + useContext is enough for small apps. For larger apps, Zustand is the recommended choice — lightweight (1kb), no boilerplate, no providers required, works seamlessly with React Native and async storage for persistence. Learn: create a store (create with state + actions), use the store in components (useStore()), selective subscriptions (useStore(state => state.cart) — no re-render on unrelated changes), persist middleware (persist store to AsyncStorage), and devtools middleware. Redux Toolkit is the alternative for teams already invested in Redux. TanStack Query (React Query) for server state (cache, refetch, background sync).

React Native includes the Fetch API (same as browser). Axios adds interceptors, automatic JSON parsing, and cleaner error handling. TanStack Query (React Query) is the modern approach — useQuery for GET requests (caching, refetch on focus/reconnect, stale-while-revalidate), useMutation for POST/PUT/DELETE (optimistic updates, rollback on error), useInfiniteQuery for paginated lists (infinite scroll). Configure the QueryClient with sensible defaults (staleTime: 60000, retry: 2). Add an axios interceptor to attach auth tokens from the Zustand store. Use mock service worker (msw) for API mocking in development.

React Native has several local storage options. AsyncStorage — key-value, asynchronous, good for small amounts of data (settings, tokens). MMKV (react-native-mmkv) — 10-100x faster than AsyncStorage, synchronous reads, excellent for Zustand persist middleware. Expo SecureStore / react-native-keychain — platform keychain/keystore for sensitive data (auth tokens, passwords). WatermelonDB — high-performance SQLite with observable queries for complex relational data and offline-first sync. Expo SQLite — simpler SQLite wrapper. MMKV + SecureStore covers 90% of use cases; reach for WatermelonDB only for complex relational data.

Smooth animations are essential for a native feel. React Native's built-in Animated API runs on the JS thread (janky under load). Reanimated 3 runs on the UI thread — truly smooth 60/120fps. Learn: useSharedValue (animatable value), useAnimatedStyle (derive animated styles), withTiming, withSpring, withRepeat, useAnimatedScrollHandler. React Native Gesture Handler runs gestures natively — PanGestureHandler, PinchGestureHandler, LongPressGestureHandler. Combine for swipe-to-delete (pan + animated position + scale snap), pull-to-refresh (scroll position + interpolation), and shared element transitions (react-native-navigation shared elements or Expo Router).

React Native Gesture Handler replaces the JS thread gesture system with native gesture recognisers. Core gestures: TapGesture, PanGesture (drag), PinchGesture (zoom), LongPressGesture, FlingGesture. Compose with Gesture.Simultaneous() or Gesture.Exclusive(). Use with Reanimated: useAnimatedStyle + shared values updated via worklets for 60 fps UI. GestureDetector wraps the target view. Deep linking: link a URL like myapp://profile/123 to a specific screen. Expo Linking — parseURL to extract params. React Navigation linking config — map URL patterns to routes. Universal links (iOS) and App Links (Android) — verified domain-to-app links that open in the app rather than the browser. expo-linking and the Linking API for programmatic navigation.

Push notifications require permission, a push token, and a server. Expo Notifications is the simplest path — request permissions, get an Expo push token, send via Expo Push API (no APNS/FCM complexity). For direct APNs/FCM integration, use Notifee (rich notifications, channels, badges) or Firebase Messaging. Handle three notification states: foreground (app visible — show in-app UI), background (app backgrounded — handled by OS), killed (notification launches app). notification.request.content.data carries your custom payload for deep linking. Deep linking from notification data — navigate to the right screen on tap.

Write platform-specific logic using Platform.OS checks (ios/android/web) and Platform.select() for inline branching. Use platform-specific file extensions (.ios.tsx, .android.tsx) for larger divergences. Handle platform differences in keyboard behavior (KeyboardAvoidingView), safe areas (react-native-safe-area-context), status bar styling, and permission models.

React Native testing uses Jest as the runner. React Native Testing Library (RNTL) for component tests — render, screen.getByText/getByRole, fireEvent.press, waitFor for async. Test component behavior (what it renders and how it responds to interaction), not implementation details. Mock native modules with jest-expo preset (all Expo modules pre-mocked). Detox for end-to-end tests on a real emulator — install/launch app, interact with elements by testID, screenshot assertions. Maestro is a simpler E2E alternative with YAML-based flow scripts. Focus on RNTL for unit/component tests, Maestro for critical user flows.

Extend React Native with custom native modules — write Objective-C/Swift (iOS) or Java/Kotlin (Android) and expose to JavaScript via the bridge. Understand the New Architecture: JSI enables synchronous native calls without JSON serialization, TurboModules replace the legacy bridge. Create native UI components wrapping platform views. Leverage high-performance native libraries: react-native-mmkv, react-native-reanimated.

React Native has a JS thread and a UI thread — work on the JS thread can block animation. Key performance rules: use Reanimated (UI thread animations), use FlatList with keyExtractor + getItemLayout + initialNumToRender + maxToRenderPerBatch (not ScrollView for long lists), memoize expensive components with React.memo, useMemo for expensive derived state, useCallback for stable callbacks. Hermes JavaScript engine (default in modern RN — faster startup, lower memory). FlipperPlugin and the React DevTools Profiler for identifying re-renders. New Architecture (JSI + Fabric + TurboModules) removes the bridge bottleneck — enabled by default in RN 0.74+.

Shipping a React Native app. EAS Build — cloud builds for both platforms from any OS (eas build --platform all), app signing managed by Expo, output is a signed .ipa and .aab. EAS Submit — submit to App Store and Play Store from the CLI. EAS Update — over-the-air JavaScript updates without App Store review (update the JS bundle, not native code). App Store requirements: privacy manifest, App Tracking Transparency (for analytics), screenshots for every device, review guidelines compliance. Sentry for crash reporting (@sentry/react-native). App versioning strategy — semver for version, increment buildNumber/versionCode per build. CI with GitHub Actions + EAS.