React Native
React Native, built the way real mobile teams build it. Learn to think in components, screens, navigation, and reusable mobile patterns as you build interfaces that stay maintainable as they grow. You'll start with components, props, state, and styling, then move through hooks, forms, lists, navigation, platform APIs, animations, data fetching, state management, and the patterns production mobile apps are built on. Every exercise is a small piece of a real mobile interface — not toy syntax drills — so you learn not just how React Native works, but how to make the design and architecture decisions good mobile engineers make every day. Finish able to build, structure, debug, and reason about React Native applications with confidence.
React Native 0.81Core Components & Styling
The layer of a React Native app that turns props into pixels using React Native core components — View, Text, Image, and Pressable — laid out with Flexbox and styled through StyleSheet.create. Styles compose through arrays and are toggled through conditions and the Pressable style callback, never rebuilt as inline objects on every render. Missing values render as safe placeholders rather than surfacing as raw null, undefined, or NaN.
Payment Transaction Row
Patient Vitals Card
Menu Dish Card
Job Application Status Card
Touchables & Press Interaction
How a React Native app responds to touch. Pressable is the core primitive — press, long press, disabled, pressed feedback through the style callback, hitSlop for larger touch targets, and android_ripple versus iOS pressed opacity for platform-appropriate feedback. Interactive elements carry accessibility roles, labels, and selected / disabled state. Controls are typically controlled — behaviour comes from props and callbacks, not from hidden internal state — and richer interactions layer hook-driven side effects like timers on top, with cleanup on release, expiry, and unmount.
Warehouse Pick Confirm
Delivery Rating Strip
Insurance Claim Line Row
Clinic Appointment Slot Board
State & Component Composition
A cluster of four assessments that check the fundamentals of React state and composition in a mobile UI — using `useState` in the right owner, driving stateless children through props / callbacks / slots, deriving every read-only value on each render rather than mirroring it into state, and updating state immutably. Each problem isolates one small business control (dispensing, allocating, reporting, signing in) so the composition and derivation choices are what pass or fail the tests, not the domain.
Pharmacy Dispense Counter
Salary Deposit Allocation
Field Service Report Section
Site Crew Sign-In
TextInput & Forms
The input layer of a React Native app. TextInput values are controlled — held on the component that owns them — and non-numeric or oversize input is filtered before it ever reaches state. Every derived value (weighted total, letter grade, refundable ceiling, character count, submit-disabled flag) is recomputed on each render rather than mirrored into a second useState. Validation runs on blur and on submit, never on every keystroke, and each rule surfaces its own message on its own field. Keyboard-driven focus chains use useRef with returnKeyType and blurOnSubmit, and KeyboardAvoidingView selects its behaviour per platform.
Course Grade Entry
Contractor Onboarding Form
Consultation Note Entry
Merchant Refund Request
Platform & Responsive Layout
The layer of a React Native app that adapts to platform and screen. Platform-branching visual properties (header height, alignment, iOS shadow vs Android elevation, keyboard type) live inside StyleSheet.create + Platform.select rather than as branches in the JSX tree, so the returned elements are the same on both platforms. Layout adapts to useWindowDimensions — column counts derived against a minimum tile width with leftover width in the gutters, compact-vs-full variants at a documented height threshold, and orientation-driven conditional rendering — without remounting on a resize. Cards hold their shape through aspectRatio rather than a fixed height, and a flexible spacer absorbs remaining vertical space so fixed-shape content cannot grow past its intent. FlatList carries a key that changes on column-count change and a getItemLayout derived from the same row height so scrollToIndex lands exactly.
Network Status Header
Delivery Slot Grid
Digital Boarding Pass
Hotel Rate Calendar
Advanced Lists & Virtualisation
The virtualisation layer of a React Native app. Long, scrollable content renders through FlatList or SectionList with getItemLayout derived from a known row height so the list can position rows without measuring — enabling initialScrollIndex, scrollToIndex, and scrollToLocation to land exactly. Rows are React.memo'd and renderItem is useCallback-memoised so an unrelated re-render does not rebuild any row, and sections and derived data are useMemo'd so their identity is stable. onViewableItemsChanged is held in a useRef so its identity never changes (RN throws otherwise) and drives sticky-header and in-view derivations from the reported viewable items. Screens navigate through prop-injected navigation and keep the list mounted behind an overlay so returning does not remount a single row.
Medication Adherence Calendar
Trade Show Session Schedule
Dealer Stock Directory
Navigation with React Navigation
The navigation layer of a React Native app built on @react-navigation. Native stacks with route params carrying the id, dynamic header options set through navigation.setOptions (title and headerRight) from screen state, and repeated push calls that stack fresh screen entries instead of collapsing to one via navigate. Bottom tabs wrap per-tab nested stacks whose position is preserved across tab switches (never opting out with unmountOnBlur), and a custom tab bar reads badge counts from a shared Context and handles the tabPress event so pressing the focused tab pops that stack to its root. Auth vs service stacks are chosen conditionally from a session held in Context — never navigated to imperatively — and role-gated screens are absent from the navigator entirely for roles that do not have them. Async work inside a screen is focus-scoped via useFocusEffect with an AbortController that cancels the in-flight request cleanly on blur / unmount, and every focus re-fetches.
Property Viewing Flow
Restaurant Manager Access
Travel Companion Hub
Courier Stop Detail
Data Fetching & Async State
The async layer of a React Native app. Requests are debounced so rapid input collapses to one call per pause, superseded requests are cancelled with AbortController, and stale responses are discarded via a monotonic sequence guard in the reducer — never a shallow "latest wins". Independent panels fetch in parallel on mount (no waterfall await) and each holds its own load / success / error state so one failure never blocks the others; retry re-fetches only the failed endpoint. Long-lived polling is a chained setTimeout inside a useEffect — one outstanding request at a time, cleared on unmount — with exponential backoff on consecutive failures up to a ceiling and a reset on success; a banner surfaces after a failure threshold and clears on recovery. Local persistence via AsyncStorage debounces writes and rehydrates on mount BEFORE the network fetch resolves, and a POST submit clears the stored draft only on success. All HTTP is injected via a fetchImpl prop so tests bypass the network entirely.
Candidate Skill Search
Account Overview Panels
Mortgage Application Progress
Restaurant Stock Count
Persistance & Offline Storage
The device-persistence layer of a React Native app. Preferences, drafts and cached responses live in AsyncStorage under versioned or prefixed keys, and are always rehydrated on mount BEFORE the network is consulted so the UI shows the stored state instantly. Writes are debounced so rapid typing collapses to one setItem call per pause; a stored payload from an earlier version is migrated to the current shape rather than discarded; corrupt JSON falls back to defaults without throwing. Batch operations use multiSet, multiGet, multiRemove and getAllKeys with a prefix filter so aggregations across many stored records stay a single round trip. A cache-and-revalidate pattern serves cached data immediately and refetches behind the customer, respecting a TTL for skipping the request entirely and a hard staleness limit past which dependent actions are blocked.
Travel Search Preferences
Exchange Rate Board Cache
Vehicle Inspection Records
Storefront Category Sorter
Animation & Gestures
The motion layer of a React Native app. A single Animated.Value drives a bar width and a colour interpolation from amber to green; Animated.timing, Animated.spring, Animated.stagger, Animated.sequence and Animated.parallel compose the transitions between states. A reducedMotion flag skips the animation and sets the final value immediately so accessibility preferences are honoured. Gestures come from PanResponder — a drag moves a marker within clamped bounds and converts the offset into a live readout; release snaps to the nearest legal target with Animated.spring; a double press returns to a recommended value. Every running composite is stoppable so a skip control jumps straight to the final state; composites are torn down on unmount so no post-unmount state update fires.
Savings Goal Progress Bar
Fare Comparison Reveal
Cinema Seat Picker
Trip Itinerary Reorder
App State & Context
The shared-state layer of a React Native app. State lives in a useReducer, exposed through split contexts — a value context for the state itself and a dispatch context for the raw dispatch function, whose identity is stable across renders so callbacks passed into memoised children never change. When one part of the state changes at a different cadence to another — a ticking clock, a search query, a shortlist — it lives in its own third context so subscribers to unrelated slices don't re-render. Derived values (totals, filtered lists, grouped sections, counts) are computed by selectors on every render, never mirrored into a second useState. Row components subscribe to only the slice they render — often through a bins-by-id map so one bin's change gives that entry a new reference while every other entry stays === identical.
Travel Booking Basket
Store Rota Board
Property Search Board
Warehouse Bin Stock Console
Render Performance & Large Lists
The virtualisation and scheduling layer of a Hard-level React Native app. Long lists render through FlatList with a fixed row height and a getItemLayout derived from that so scrollToIndex lands exactly and no measurement pass is needed. Rows are wrapped in React.memo with a custom comparator that inspects only the fields the row actually renders — a change to any other field on the item never re-renders the row. Sort and filter results are memoised so scrolling never recomputes them. Heavy aggregation waits for the navigation transition via InteractionManager.runAfterInteractions, runs in chunks that yield to the event loop, reports progress after every slice, and cancels cleanly via AbortController when parameters change or the screen leaves — no post-unmount state update ever fires. Image-heavy grids use numColumns + removeClippedSubviews and hold viewabilityConfig frozen at module scope with a useRef-backed onViewableItemsChanged whose identity never changes. Where connectivity is intermittent, outcomes are queued to AsyncStorage and drained in order with idempotency (an already-synced entry is never posted twice).