react-native-qa-review

React Native QA Review

Overview

Systematic review framework for React Native / Expo applications. Work through each category below. Severity levels: Critical (data loss / crash / broken UX), High (wrong behavior / user frustration), Medium (maintainability / subtle bugs), Low (polish / convention).

---

1. Architecture

• Components have single responsibility — no screens doing data fetch + business logic + rendering all in one
• Business logic extracted into custom hooks or services, not inline in JSX
• No feature code leaked into shared/common folders
• No circular imports
• Reusable UI extracted into components; same UI not rebuilt in multiple places
• File/folder structure consistent with rest of project

Red flags: 200+ line render functions, useEffect chains that call other useEffects, god-object context/store slices

---

2. Styling

• StyleSheet.create() used — no inline anonymous style objects (creates new objects every render, bypasses native optimisation)
• No hardcoded color hex values — reference theme/design token constants
• No hardcoded spacing/font-size magic numbers — use design system scale
• fontFamily explicitly set on all Text and TextInput components
• Platform-specific styles use Platform.select() or .ios.ts / .android.ts — not Platform.OS === 'ios' ? ... : ... inline in JSX
• Shadow (iOS: shadowColor/Offset/Opacity/Radius) paired with elevation (Android) on every elevated surface
• SafeAreaView or useSafeAreaInsets used on root screens — no content clipped by notch/home indicator
• No hardcoded pixel dimensions for layout that should flex

---

3. State Management

• Store selectors are granular — useStore((s) => s.field) not useStore((s) => s) (whole-store subscription triggers re-render on any mutation)
• No derived state stored — values computable from other state are not duplicated in state
• Local state initialized from store/props is re-synced when source changes (or controlled pattern used)
• After successful mutations, store/cache is updated — no stale data on subsequent screens
• Async state has loading, error, and data fields — all three handled in UI
• No useState for data that belongs in server cache (React Query / SWR)

---

4. Performance

• React.memo on components that receive stable props but re-render from parent
• useCallback on functions passed as props to memoized children
• useMemo for expensive computations, not for cheap ones (over-memoization is also a problem)
• Lists use FlatList / SectionList / FlashList — never ScrollView with .map() for lists of unknown length
• FlatList has keyExtractor returning stable, unique keys (not array index)
• FlatList has getItemLayout when item height is fixed (enables scroll-to-index and skips measurement)
• Images have explicit width/height and appropriate resizeMode — no layout thrash from late measurement
• Heavy computations (sorting, filtering large arrays) not performed inside render — moved to useMemo or background

---

5. Platform Differences

• KeyboardAvoidingView uses behavior="padding" on iOS and behavior="height" on Android
• multiline TextInput inside ScrollView has nestedScrollEnabled={true} on Android
• Font weights: verify target weights render on Android (only 400/700 guaranteed; 100/200/300/500/600/900 may fall back)
• Touchable feedback: TouchableNativeFeedback for Android material ripple where appropriate
• Android back button handled for custom navigation flows (hardware back)
• Status bar style set explicitly — not assumed from OS theme
• Date/time pickers use platform-appropriate component (not a web-style input)

---

6. Error, Loading & Empty States

• Every async operation shows a loading indicator while in-flight
• Every async operation shows an error message on failure — not just a console.error
• Error does not leave UI in broken half-state (e.g., button stuck in "loading" forever)
• Empty lists show an empty state component — not a blank screen
• try/catch or .catch() on every async function that touches network or storage
• Error boundaries wrap feature areas to contain crashes
• Success feedback not shown until API confirms success (not optimistically before checking result)

---

7. Memory Leaks

• Every useEffect that sets up a subscription, listener, or timer returns a cleanup function
• Event listeners (Keyboard, AppState, BackHandler, navigation events) are removed in cleanup
• setTimeout / setInterval cleared in cleanup
• In-flight network requests cancelled on unmount (AbortController or React Query's built-in cancellation)
• No setState called after unmount (use isMounted ref or cancel async work in cleanup)

---

8. Accessibility

• All interactive elements have accessibilityLabel (what it is) and accessibilityHint (what happens when activated)
• accessibilityRole set on custom interactive components (button, link, image, etc.)
• Touch targets are at least 44×44 points — small icons wrapped in larger Pressable if needed
• Disabled state communicated via accessibilityState={{ disabled: true }}
• Color is not the only indicator of meaning (error state uses icon + text, not just red color)
• TextInput fields have accessibilityLabel matching their visible label

---

9. Form & Keyboard Handling

• Screens with inputs inside ScrollView use KeyboardAvoidingView as outer wrapper
• ScrollView has keyboardShouldPersistTaps="handled"
• Inputs near the bottom of the screen scroll into view on focus — use scrollResponderScrollNativeHandleToKeyboard in onFocus handler (or equivalent scrollToPosition)
• returnKeyType matches context: "next" between fields, "done" or "search" on last field
• Last input in a form dismisses keyboard or submits on onSubmitEditing
• Buttons are disabled (not just visually hidden) while a form is submitting — prevents duplicate submissions

---

10. Navigation

• Deep link parameters validated before use — no direct use of raw URL params in queries or renders
• Auth guard present: protected screens check auth state before rendering content
• Navigation events (focus / blur) used to refresh stale data or cancel operations correctly
• Modal stacking doesn't break back navigation
• Android hardware back button handled in screens that need custom behavior

---

11. Type Safety

• No untyped any — use unknown with a type guard, or a proper type
• All component props explicitly typed (no implicit {} or missing interface)
• Navigation params typed (route params not accessed via untyped route.params.whatever)
• API response types defined — not inferred as any from fetch/axios
• Nullable fields guarded before access — no user.profile.name without null checks

---

12. Security

• Credentials, tokens, and sensitive user data stored in SecureStore — not AsyncStorage or MMKV
• No sensitive values logged (console.log(token), console.log(user))
• No hardcoded secrets, API keys, or credentials in source
• Deep link / URL parameters sanitised before use in queries or rendering
• maxLength set on text inputs that feed into API calls

---

13. Animation

• useNativeDriver: true on all Animated calls where possible (transform, opacity — not layout props)
• Complex gestures and animations use Reanimated 2+ (runs on UI thread, no JS bridge jank)
• Animations cancelled / stopped in useEffect cleanup to prevent updates after unmount
• Layout animations (LayoutAnimation) called before state change, not after

---

14. Consistency & Theming

• Color values come from a single theme/constants file — no duplicate hex strings across files
• Spacing uses a consistent scale (multiples of 4 or 8) — not arbitrary values per component
• Typography uses the project's defined font/weight hierarchy — no one-off font size or weight
• Component variants (primary button, secondary button, destructive) use shared components — not re-styled per screen
• Icon set is consistent — not mixing icon libraries in the same feature

---

Common Mistakes Quick Reference

Mistake	Impact	Fix
useStore((s) => s)	Re-renders on every store change	Select only needed fields
Inline style objects	GC pressure, no native caching	StyleSheet.create()
ScrollView + .map() for lists	Renders all items, OOM on large data	FlatList / FlashList
No try/catch in async handlers	Silent failures, stuck loading state	Wrap + show error UI
No useEffect cleanup	Memory leaks, stale callbacks	Always return cleanup fn
Hardcoded colors	Design drift, dark mode breakage	Theme constants
No keyboard scroll-to-input	Bottom inputs hidden behind keyboard	onFocus scroll handler
useNativeDriver: false	Janky animation on JS thread	Set to true or use Reanimated
any on API response	Type errors at runtime	Define response interface
Credentials in AsyncStorage	Accessible to other apps on rooted devices	Use SecureStore