React Native Assignments — Build Native Apps. Faster.
Go from “Hello, React Native” to production-grade apps with navigation, data, offline-first, performance, and a11y. Each topic-wise set includes 20 Basic, 20 Intermediate, and 10 Advanced hands-on questions so learners can practice deliberately and level up fast.
Why practice with these assignments?
- Move beyond theory—set up CLI & Expo, run on Android/iOS/devices, and ship working screens.
- Master the essentials: core components, layouts, forms, lists, and navigation with React Navigation.
- Build real app muscles: styling/theming, API/auth/offline caching, device features (camera, maps, notifications), and custom UI.
- Think like a pro: measure performance, ensure accessibility & i18n, and debug/profile with Flipper/Sentry.
How it works
- Open any assignment and solve in order: Basic → Intermediate → Advanced.
- Use React Native CLI and/or Expo; run on emulator/simulator and at least one physical device.
- Verify each step (UI renders, navigation flows, API responses, caching behavior, performance metrics).
- Keep a brief “what I learned” note—syntax, decisions, trade-offs, and gotchas.
What you’ll achieve
- Environment & platform fluency: CLI vs Expo, Android/iOS runners, Fast Refresh, project structure.
- UI fundamentals: core components, styles, Flexbox layouts, lists/forms, responsive patterns.
- Routing at scale: stacks, tabs, drawers, deep links, nested navigators, guarded flows.
- Design systems: theming, tokens, dark mode, adaptive layouts, accessible spacing/typography.
- Data layer mastery: REST/headers/auth, pagination, retries, react-query caching, offline SWR.
- Reusable components: containers/presentational, compound/HOC/render-props, third-party UI libs.
- Device integrations: camera/gallery, maps/geolocation, storage (AsyncStorage/MMKV/SQLite), notifications.
- Performance toolkit: memoization, FlatList tuning, code-splitting, image strategy.
- Accessibility & i18n: screen-reader roles/labels, focus management, RTL, locale formatting.
- Diagnostics & resilience: Flipper/Debugger, error boundaries, structured logs, Sentry.
Browse the Assignments
- Assignment 1 — Intro & Setup (CLI + Expo, run everywhere, folders, Fast Refresh).
- Assignment 2 — Core Components & Layouts (Text, Image, inputs, Flexbox, Scroll/Flat/SectionList).
- Assignment 3 — Navigation with React Navigation (stack/tab/drawer, deep linking, transitions).
- Assignment 4 — Styling & Theming (tokens, dark mode, responsive/accessible UI).
- Assignment 5 — APIs, Auth, Caching & Offline (Axios/fetch, react-query, persistence, uploads).
- Assignment 6 — Custom Components & UI Design (design system, compound/HOC, libraries).
- Assignment 7 — Device Features & Integrations (camera, maps, storage, notifications, background tasks).
- Assignment 8 — Performance Optimization (memo, callbacks, list tuning, lazy load, image pipeline).
- Assignment 9 — Accessibility & Internationalization (labels/roles, live regions, RTL, i18n).
- Assignment 10 — Debugging, Profiling & Error Handling (Flipper/Debugger, Error Boundaries, Sentry).
Tips for success
- Start simple: Expo for speed, then add CLI-only features as needed; test on both Android & iOS early.
- Treat navigation as a system: centralize route types/params and test deep links.
- Make UI consistent: adopt theme tokens (colors/spacing/type) + dark mode from the outset.
- Build a resilient data layer: retries, react-query cache, background refresh, offline fallbacks.
- Use device APIs thoughtfully—wrap permissions & storage with safe utilities.
- Measure, then optimize: memoize rows/handlers, tune FlatList, lazy-load heavy bits, and compare metrics.
- Bake in a11y & i18n: labels/roles, focus, live regions, pluralization & RTL flips.
- Keep observability on: Flipper + structured logs + Error Boundaries + Sentry with source maps.
Ready to build real confidence in React Native? Pick a set below and start solving!
FAQs
Q1. Should I use React Native CLI or Expo for these tasks?
Both are supported. Start with Expo for velocity and device testing, then use CLI where native folders or custom configs are required. You’ll practice both in Assignment 1.
Q2. What’s the minimum I need installed before starting?
Install Node.js, a recent React Native toolchain, Android Studio (AVD), Xcode (for iOS), and/or Expo Go. Assignment 1 includes verifying emulators/simulators and running on physical devices.
Q3. How do I structure components for reuse?
Adopt presentational vs container components and expand into compound, HOC, and render-props patterns. The Custom Components assignment builds a small design system.
Q4. FlatList or ScrollView—when to use which?
Use FlatList/SectionList for large or virtualized lists (with keys, getItemLayout, memoized rows). ScrollView is fine for small, static content. You’ll compare performance directly.
Q5. How do I handle auth tokens and caching safely?
Centralize an API client, attach Authorization headers, and cache with react-query + AsyncStorage/MMKV. Add retries, backoff strategies, and offline fallbacks.
Q6. What’s the right approach to theming and dark mode?
Define design tokens (colors, spacing, typography), support system Appearance, and allow manual override with Context. Animate theme changes for smoother UX.
Q7. How should I wire navigation in a real app?
Compose Stack + Tab + Drawer navigators, add guards for auth/roles, configure deep linking for Android/iOS, and use custom transitions when needed.
Q8. How do I integrate camera, maps, and notifications?
Use vetted libraries, request permissions with a unified helper, store images and metadata, and route notifications properly to screens.
Q9. What are the quickest wins for performance?
Memoize rows/handlers, move dynamic styles into StyleSheet, add keyExtractor and getItemLayout, lazy-load heavy modules, and optimize images with caching, WebP, or FastImage.
Q10. How do I debug reliably and capture crashes?
Use React Native Debugger or Flipper for state, network, and performance monitoring. Add Error Boundaries, structured logging, and Sentry with source maps for crash reporting.