React Native Practice

A reusable transaction row for a retail banking account activity screen. Formats an integer amount in minor currency units into a signed two-decimal string, applies a distinct debit / credit / zero style based on sign, and layers a muted "pending" style over the base amount style through a conditional style array — never an inline style object at render time.

A reusable vitals card for a hospital ward observations screen. Lays out the patient header as a row where the name flexes and the bed number pins to the right, renders the three vitals as equal-width columns, prints a dash for any reading not yet taken (never showing null, undefined, or NaN), and names the recording clinician in a footer.

A reusable dish card for a restaurant menu screen. Renders a bundled photo with resizeMode "cover" and a fixed aspectRatio (falling back to a bundled placeholder when the photo prop is absent), nests the description inside the name so it inherits the outer text style while carrying its own, formats the price from minor units, renders one badge per dietary tag, and dims — never hides — an unavailable dish.

Build a warehouse picking control with quantity adjustment, short-pick handling, and confirmation interactions.

Create a delivery rating component with accessible star selection and conditional follow-up feedback.

Build an interactive insurance claim row with lifecycle-aware actions and derived customer contribution.

A pharmacist's control that builds a prescribed quantity from the pack sizes actually stocked. Derives the dispensed total, units still owed, and whether the prescription can be met exactly from the packs on hand — flagging over-dispense separately from owing.

An employee's control for splitting net pay across several linked accounts. Nudging one percentage stepper redistributes the delta across the others in proportion, with a documented rounding rule so two identical sessions produce the same numbers.

A reusable collapsible section shell for the field engineer's report screens. Owns its own expanded/collapsed `useState`, unmounts children on collapse rather than hiding them, exposes a title bar with a live child-count badge plus optional `action`, `footer`, and `empty` slots, and composes children opaquely without inspecting or cloning them.

A tutor's grade entry screen. A controlled numeric TextInput per assessment component holds its value as a string so a cleared field stays empty rather than becoming zero; non-numeric characters never reach state. The weighted total and letter grade update live from the entered marks and their weightings and are derived on every render — never mirrored into state. Save is blocked with its own message on any empty or over-max field, a mark exactly at maxMark is accepted, and a total narrowly below a grade boundary warns for moderation without blocking.

A staffing agency's onboarding form. Four controlled inputs — full name, payroll reference, assignment end date (YYYY-MM-DD), right-to-work expiry — validated only on blur or on submit, never on every keystroke. Assignment end must land within a fixed horizon from today; right-to-work expiry must be on or after the assignment end. Each rule surfaces its own message on its own field, submit unlocks only when every field is valid, and a corrected field clears its own message without touching any other field's.

A clinician's consultation note screen. Four fields chain together so pressing "next" on the keyboard moves focus down through useRef refs with blurOnSubmit false, and the last field blurs the keyboard instead. The multiline notes area uses numberOfLines and textAlignVertical for top-aligned long text, shows a live character count against the record limit, and hard-caps entry at the limit — including on a paste. KeyboardAvoidingView selects padding on iOS and height on Android so the keyboard never occludes the notes area.

A telecoms operator's service status header. A list of open incidents collapses to one headline state by severity precedence (any outage wins over any degradation, both win over all-clear); only the winning severity's count is shown, and an empty array renders the all-clear state. The header's height, title alignment and iOS-shadow-vs-Android-elevation live inside a single StyleSheet.create block using Platform.select — the JSX tree is identical on both platforms. A last-checked label reads relative below a documented age threshold and switches to an absolute clock time above it, derived from a passed _now_ so tests can exercise the switch without mocking the clock.

A grocery delivery slot picker where whole tiles fit the width without ever being stretched past their maximum. Column count is derived from useWindowDimensions().width against a minimum tile width; leftover width lands in the gutters rather than in the tiles, and the derived tile width is capped at a documented maximum. The grid renders through FlatList's numColumns with a key that changes when the column count changes so React re-creates the list cleanly on reflow — no tile is dropped or duplicated. Per-slot state (full / scarce / ok) derives from capacity against a scarcity threshold; a surcharge chip renders only when non-zero; a price column renders only in landscape.

A digital boarding pass a passenger holds up at the gate — readable on a small phone or a large one. The pass card holds a fixed aspectRatio (never a fixed height) so its shape is the same at every screen size; a boarding-group strip highlights the passenger's own group and dims groups already called; a flexible spacer between the card and the footer keeps the footer pinned above the safe-area inset without ever letting the card grow. useWindowDimensions switches to a compact layout below a documented height threshold — the card shrinks but keeps the aspect ratio, and the group strip collapses to a single line.

A chronic-care adherence calendar. A full year of dosing days scrolls through a virtualised FlatList opened on today via initialScrollIndex, getItemLayout is derived from a fixed row height so scrollToIndex lands exactly on any date, and a sticky month header follows the topmost viewable day via onViewableItemsChanged held in a useRef. Rows are React.memo'd; tapping a day opens a detail sheet listing that day's doses due, taken and missed — without re-rendering any other row in the list.

A conference schedule screen for a trade-show app. Sessions are grouped by hall in a SectionList with sticky section headers via a memoised sections array built from buildSections, jump-to-hall chips call scrollToLocation with the section index looked up from sectionIndexForHall, and an in-session banner names the first viewable session via firstViewableSession. The onViewableItemsChanged callback is held in a useRef so its identity never changes across unrelated re-renders — React Native throws otherwise.

An estate-agent property viewing flow. Native Stack.Navigator with Listings → Property → RoomNote screens, route params carrying the listing reference, a dynamic header title set via navigation.setOptions once findPropertyByRef resolves, a header-right publish control disabled until the property loads, repeated navigation.push calls that stack a fresh RoomNote for every room the agent walks into (nextRoomNumber increments the counter), and a one-shot navigation.popToTop back to the listings queue.

A restaurant service app where floor staff and managers see different screens depending on session and role. RootNavigator reads a session from SessionContext and picks a stack via pickStackFor — auth stack when null, server stack for role 'server', manager stack for role 'manager'. Manager-only routes are registered only in the manager stack — hasRoute reflects the same lookup — so a server never has the Voids & Discounts route at all. Sign-in dispatches signIn({ role }); sign-out clears the session and by conditional render unmounts the service stack entirely, leaving no back entry.

A travel companion hub screen. Bottom Tab.Navigator with Itinerary, Bookings and Expenses, each wrapping its own nested native Stack.Navigator, a custom HubTabBar that reads badge counts from CountsContext via computeBadges (and hides zero counts), and press behaviour that emits a tabPress event before navigating — pressing a non-focused tab navigates to it, pressing the focused tab pops that tab's nested stack to root. Inactive tabs preserve their nested stack state across switches — Tab.Navigator's default behaviour, never opted out of with unmountOnBlur.

The talent pool search a recruiter uses to shortlist candidates against a live vacancy. A controlled TextInput debounces requests to /api/candidates?q=, shouldSearch gates against the minimum query length, buildSearchUrl encodes and appends filter params, and each fired request carries a monotonically-increasing seq — searchReducer discards any success or error whose seq is older than the current one (stale-response guard). AbortController cancels the previous in-flight request on every new fire, and filter changes trigger exactly one further request with the current query. Loading / hint / error+retry / loaded (with empty variant) render one at a time.

The overview screen of a retail banking app that loads several independent panels at once. On mount, App dispatches load for every panel in PANELS and fires fetchImpl for each in parallel — no await between them. Each panel is held in its own panelReducer slot so one failing endpoint renders panel-error-<key> + a retry Pressable while the other two render loaded. Retry re-fetches only that endpoint. The header total is derived on every render via sumAvailable(state) — never mirrored into state — and recomputes as balances resolves. buildEndpointUrl joins base + endpoint without duplicate slashes; the base URL is injected via the apiUrl prop.

The screen an applicant watches while a submitted mortgage application is assessed. On mount StatusScreen fires the initial request and chains subsequent polls via setTimeout — one outstanding request at a time. On success dispatch payload, reset consecutiveFailures to 0, clear the banner, schedule the next poll at baseIntervalMs (or stop when isDecided). On failure increment consecutiveFailures, set the banner at failureThreshold, and schedule the next poll at nextIntervalMs(consecutiveFailures, baseIntervalMs, ceilingIntervalMs) — exponential backoff capped at the ceiling, reset on any success. Unmount clears the scheduled timeout so no further requests fire; pressing Stop polling halts further requests immediately. stageSummary derives the three-stage view (creditCheck / valuation / underwriting) from the payload with 'pending' defaults for missing keys.

A traveller's search preferences screen in a flight booking app. Cabin class, baggage requirement, party composition and preferred airports are persisted to AsyncStorage under a versioned key. On mount the app hydrates and renders defaults until hydration completes, migrating a stored v1 payload into the v2 shape rather than discarding it. A reset clears the key and returns to defaults; corrupt JSON falls back to defaults without throwing. A matching-fares summary derives from the current preferences.

The rate board in a currency app that serves cached rates instantly and revalidates behind the customer. The fetched rate set is cached in AsyncStorage alongside a timestamp; on mount the cache renders immediately when present, then revalidates. Requests are skipped entirely inside the TTL; a "rates as at <time>" label shows until revalidation completes; the convert action is blocked past a hard staleness limit. Force-refresh always requests and rewrites the cache; a failed revalidation keeps the cached rates and leaves the staleness label showing. Data comes from the platform's hosted read-only JSON API over fetch with the base URL injected through configuration.

A fleet inspector's screen for recording defect grades across a depot with no connection. One record per vehicle is stored under a prefixed AsyncStorage key. Batch writes and reads use multiSet and multiGet; getAllKeys with a prefix filter lists them and ignores unrelated keys. A depot summary aggregates defect grades across all stored records; clearing a vehicle's record uses multiRemove and updates the summary. A rejected batch leaves no half-written record behind.

A savings goal progress indicator in a personal finance app. A single Animated.Value drives the bar width and a colour ramp from amber to green as the goal is approached, both derived from the same interpolated value. Logged contributions animate to the new position with Animated.timing; withdrawals animate back down. A reducedMotion prop skips the animation and sets the value immediately with no intermediate frames. The colour interpolation is not driven natively so the ramp keeps working under all render modes.

The results reveal on a fare comparison screen. Fare options reveal with Animated.stagger over per-row values; the best-value badge runs an Animated.sequence (scale up, then settle); dearer rows fade together with Animated.parallel. A skip control stops every running animation and jumps every value to its final state. Animations are stopped on unmount so no post-unmount state update fires.

The seat picker a customer drags across the auditorium plan to choose where to sit. A PanResponder moves a marker within bounds, clamping at the edges and converting the offset into section / row / seat number shown live. Release snaps to the nearest available seat with Animated.spring — never onto a taken seat; a double press returns to the recommended seat. The responder is granted only on the plan and releases cleanly on gesture end.

The basket a traveller taps through while assembling a trip from flights, rooms and extras. A basket context backed by a reducer handles add item, change quantity, apply option (fare class, board type) and remove line; taxes, fees and totals are computed by selectors rather than stored. Removing a line requires a reason recorded against it — an empty reason returns the previous state unchanged. The product grid does not re-render when only the basket changes

The rota board in a retail store manager's app where a ticking clock does not re-render the whole board. App state is split into separate value and dispatch contexts; the trading-hour clock lives in a third context of its own so shift rows subscribe only to what they use. Memoised consumers ensure a clock tick re-renders the clock strip alone; dispatching a shift assignment re-renders the affected row and nothing else. An interval ticks the clock every second and is torn down on unmount.

The search board in a property app where typing in the search bar does not re-render every listing on screen. App state is split into value and dispatch contexts, and the search query lives in a third context of its own so listing rows subscribe only to the listing they render. Callback identities taken from the dispatch context stay stable across parent re-renders, so a keystroke re-renders the query bar and the result-count header alone. Data comes from the platform's hosted read-only JSON API over fetch, with the base URL injected through configuration so tests can point at a seeded instance.

The settlement ledger in a merchant payments app holding a quarter of transactions that stays smooth while the merchant scrolls, sorts and adjusts. FlatList virtualises with getItemLayout and a fixed row height; memoised rows use a custom comparator examining only the fields they render (id, merchant, brand, last4, net, status, onOpen); sort and filter results are memoised so scrolling never recomputes them. Adjusting a line replaces only that row's reference. Data comes from the platform's hosted read-only JSON API over fetch reading orders, with the base URL injected through configuration.

The loss ratio report in an insurance portfolio app aggregating a large claims dataset without blocking the screen transition or the touch response. Aggregation is deferred until after the navigation transition with InteractionManager.runAfterInteractions, chunked so each slice yields to the event loop, and rendered as a progressive skeleton that fills in as portions complete. Outstanding chunks cancel via AbortController when the parameters change or the screen is left; leaving cancels the remainder and produces no post-unmount state update. The final ratios equal a direct computation over the fixture.

The imagery library a merchandiser browses, rendering hundreds of bundled product shots without exhausting memory. A FlatList grid uses numColumns and removeClippedSubviews, showing a placeholder that swaps to the image only once the item becomes viewable via onViewableItemsChanged held in a useRef so its identity never changes across re-renders. viewabilityConfig is frozen at module scope; rows are memoised so a scroll direction change does not remount them; images use fixed dimensions and an explicit resizeMode. Once revealed, a tile stays revealed even after scrolling out.