Name: React Native
Availability: InStock
Author: ivangdavila

React Native Development Rules

```
FlatList
```
for any list over 10 items —
```
ScrollView
```
with
```
map
```
loads everything in memory, FlatList virtualizes
```
keyExtractor
```
must return stable unique strings — using index causes bugs on reorder and deletion
```
React.memo
```
prevents re-renders when props unchanged — wrap pure display components
```
useCallback
```
for functions passed to child components — new function reference triggers child re-render
Avoid inline styles in render — creates new object every render, extract to
```
StyleSheet.create
```

```
useState
```
is fine for component-local state — don't add Redux/Zustand for a toggle
Lift state to lowest common ancestor only — higher causes unnecessary re-renders
```
useMemo
```
for expensive computations — but don't overuse, caching has overhead
Context re-renders all consumers on any change — split contexts by update frequency
Avoid storing derived data in state — compute during render from source state

React Navigation is the standard — Expo Router for file-based routing in Expo projects
Stack screens stay mounted by default — clean up subscriptions and timers in
```
useEffect
```
cleanup
Pass serializable params only — functions and complex objects break deep linking and state persistence
```
useFocusEffect
```
for screen-specific side effects — runs on focus, not just mount
```
navigation.reset
```
for auth flows — clears back stack, prevents returning to login after sign-in

```
StyleSheet.create
```
outside component body — creates styles once, not every render
Flexbox defaults differ from web —
```
flexDirection: 'column'
```
, no
```
display: flex
```
needed
Dimensions in density-independent pixels — don't use pixel values from design tools directly
```
Platform.select
```
for platform-specific styles — cleaner than conditionals in style objects
No CSS inheritance — text styles don't cascade, each Text needs explicit styling

Expo modules cover most needs — avoid ejecting for common features like camera, location, notifications
```
expo-dev-client
```
enables native modules without full eject — best of both worlds
React Native New Architecture (Fabric, TurboModules) is opt-in — check library compatibility before enabling
Native crashes don't show in JS debugger — check Xcode/Android Studio logs

Hermes engine should be enabled — significantly faster startup and lower memory
```
InteractionManager.runAfterInteractions
```
defers heavy work — keeps animations smooth
```
useNativeDriver: true
```
for animations — runs on UI thread, not JS thread
```
console.log
```
in production kills performance — remove or use
```
__DEV__
```
guard
Flipper for debugging — network, layout, performance profiling

Use
```
resizeMode
```
appropriately —
```
cover
```
crops,
```
contain
```
letterboxes,
```
stretch
```
distorts
Prefetch images for smooth UX:
```
Image.prefetch(url)
```
before displaying
Local images need explicit dimensions — remote images can use aspect ratio if one dimension set
SVGs via
```
react-native-svg
```
— better scaling than PNGs for icons
Cache remote images with
```
react-native-fast-image
```
— default Image has no persistent cache

```
async
```
in
```
useEffect
```
directly — must define async function inside, then call it
Missing
```
key
```
warnings in lists — always use unique, stable keys
Assuming web React patterns work — no DOM, no CSS, different event system
Forgetting cleanup in
```
useEffect
```
— subscriptions, timers, listeners leak without cleanup return
Testing only on one platform — iOS and Android differ in behavior, test both regularly

Android needs explicit
```
overflow: 'hidden'
```
for border radius clipping — iOS clips by default
Shadows: iOS uses
```
shadow*
```
props, Android uses
```
elevation
```
StatusBar behavior differs — test visibility and color on both platforms
Back button is Android-only — handle with
```
BackHandler
```
or navigation listeners
Push notifications setup differs significantly — platform-specific configuration required

```
npx react-native clean
```
for unexplained build failures — clears caches and derived data
iOS:
```
cd ios && pod install
```
after adding native dependencies — often forgotten step
Android:
```
cd android && ./gradlew clean
```
for stubborn build issues
EAS Build (Expo) simplifies CI/CD — handles signing, versioning, submission
Test release builds locally before submitting — development and production behavior differ

React Native