How to Prompt AI for React Native Components That Work Across iOS and Android

4. The keyboard and safe area handling

Keyboard handling and safe area insets are among the most common sources of platform-specific bugs — and both behave differently on iOS and Android:

If this component contains input fields:

- Wrap the root in KeyboardAvoidingView with:

  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}

- Use KeyboardAwareScrollView from react-native-keyboard-aware-scroll-view if the form is long enough to require scrolling

- Do not use KeyboardAvoidingView offset — it behaves unpredictably across devices

Safe area handling:

- If this is a screen component (not a reusable UI component),
  wrap content in SafeAreaView from react-native-safe-area-context

- Do not use the built-in SafeAreaView from react-native —
  it does not handle Android correctly

- Bottom insets are especially important:
  use useSafeAreaInsets() for dynamic bottom padding near navigation elements

5. The accessibility requirements

Accessibility is frequently omitted from AI-generated React Native code, producing components that work visually but fail screen reader and accessibility audits:

Accessibility requirements:

- All interactive elements must have accessibilityLabel
  (a human-readable description of the action)

- Use accessibilityRole: 'button' for touchable elements, 'image' for images, 'text' for significant text elements

- For image components with semantic meaning, add accessibilityHint

- Minimum touch target size: 44x44 points (Apple HIG) / 48x48dp (Material Design)

- ensure all touchable elements meet this requirement with minHeight/minWidth or padding rather than relying on content size

- Test with: accessibilityViewIsModal for modal components

Platform-specific component prompts

Some component types need explicit platform handling beyond the general requirements.

Modals

Generate a React Native modal component.

- iOS: Modal with transparent={true}, semi-transparent backdrop View, content centered using justifyContent: 'center'

- Android: handle hardware back button dismiss with BackHandler in useEffect

- Animation: use 'fade' (not 'slide' — behaves inconsistently on some Android versions)

- Bottom sheet patterns: use react-native-bottom-sheet, not Modal with animationType: 'slide'

Lists with performance requirements

Generate a React Native list component for displaying [X] items.

- Use FlatList, not ScrollView with mapped items (ScrollView renders all items unacceptable for lists longer than ~20)

- Implement getItemLayout if all items have the same height

- keyExtractor must use the item's unique id, not the index

- initialNumToRender: 8, maxToRenderPerBatch: 4, windowSize: 5

- removeClippedSubviews: true on Android only

  (causes rendering issues on iOS with certain component types)

Text inputs with platform handling

Generate a React Native text input component.

- autoCorrect and spellCheck: false for username/email/password fields

- returnKeyType: 'next' for all fields except last in form ('done' for last)

- iOS: textContentType for autofill ('username', 'password', 'emailAddress', 'oneTimeCode')

- Android: autoComplete for autofill ('username', 'password', 'email')

- keyboardType: 'email-address', 'numeric', 'phone-pad', or 'default' as appropriate

- secureTextEntry for password fields (disables autocorrect automatically)