mobile-design

Wrap list items in React.memo, memoize renderItem with useCallback, use a stable keyExtractor with item IDs instead of indexes, and provide getItemLayout for fixed-height items. Never use ScrollView with map for long lists since it renders all items at once.

Choose React Native with Expo when you need OTA updates and have a web team familiar with React. Choose Flutter for pixel-perfect identical UI across platforms. Choose native SwiftUI or Kotlin when you need maximum performance or deep platform integration.

iOS requires a minimum of 44pt by 44pt and Android requires 48dp by 48dp for touch targets. Maintain at least 8-12px spacing between adjacent targets to prevent accidental taps, and place primary actions in the thumb zone at the bottom of the screen.

Never store tokens in AsyncStorage since it is plain text and accessible on rooted devices. Use SecureStore on Expo, Keychain on iOS, or EncryptedSharedPreferences on Android. Keep short-lived access tokens in memory and refresh tokens in secure storage.

Animations lag when useNativeDriver is false, forcing work onto the JS thread. Set useNativeDriver to true and only animate transform and opacity properties. For animations requiring other properties, use Reanimated 3 which runs on the UI thread.

Use a tab bar for 3-5 top-level destinations of equal importance that users switch between frequently. Use drawer navigation when you have more than 5 destinations or less frequently accessed sections, since drawer items are hidden and less discoverable.