20 Prompts for React Native: Components, Navigation, and API Integration

Introduction

React Native remains the top choice for cross-platform mobile development in 2026. But even experienced developers hit walls — inefficient components, messy navigation, or flaky API calls. Over the past year, I've collected 20 battle-tested prompts that solve real problems in UI building, navigation flows, and backend communication. Each prompt includes a concrete example and a pro tip. No theory — just working code and strategies you can copy.

1. Component Structure: The Atomic Pattern

Prompt: "Generate a reusable button component with loading state, disabled state, and left icon support using React Native's TouchableOpacity. Include TypeScript types for props."

Example output:

import React from 'react';
import { TouchableOpacity, Text, ActivityIndicator } from 'react-native';

interface ButtonProps {
  title: string;
  onPress: () => void;
  loading?: boolean;
  disabled?: boolean;
  icon?: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({ title, onPress, loading, disabled, icon }) => (
  <TouchableOpacity
    style={[styles.button, disabled && styles.disabled]}
    onPress={onPress}
    disabled={disabled || loading}
  >
    {loading ? <ActivityIndicator color="#fff" /> : icon}
    <Text style={styles.text}>{title}</Text>
  </TouchableOpacity>
);

2. Navigation: Type-Safe Routes with React Navigation

Prompt: "Set up a type-safe stack navigator for React Navigation v7 with three screens: Home, Profile, and Settings. Use TypeScript generics to infer params."

This prompt ensures you avoid runtime errors from mismatched route names. A real case: at my previous startup, we had a bug where the profile screen expected a userId param, but the navigation link didn't pass it. Using typed navigation caught it at compile time.

3. API Integration: Error Handling with Axios

Prompt: "Create a custom useApi hook that wraps Axios with retry logic (3 attempts), exponential backoff, and network error detection. Return loading, error, data, and refetch."

Example:

import { useState, useCallback } from 'react';
import axios, { AxiosError } from 'axios';

const MAX_RETRIES = 3;

export function useApi<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchWithRetry = useCallback(async (retries = 0) => {
    setLoading(true);
    try {
      const response = await axios.get<T>(url);
      setData(response.data);
      setError(null);
    } catch (err) {
      if (retries < MAX_RETRIES) {
        setTimeout(() => fetchWithRetry(retries + 1), 1000 * Math.pow(2, retries));
      } else {
        setError((err as AxiosError).message);
      }
    } finally {
      setLoading(false);
    }
  }, [url]);

  return { data, loading, error, refetch: fetchWithRetry };
}

4. FlatList Performance: VirtualizedList Tips

Prompt: "Optimize a FlatList that renders 10,000 items: use getItemLayout, removeClippedSubviews, and keyExtractor. Show how to measure FPS with React.memo."

Key takeaway: Without these optimizations, the list janks on low-end devices. After applying, scrolling stays at 60fps even on a 2019 Android.

5. State Management: Zustand vs Context

Prompt: "Compare Zustand and React Context for a medium-sized app with 20 screens. Provide a Zustand store for user authentication with persist middleware."

Zustand is lighter and avoids re-render issues. For auth, persist the token to AsyncStorage automatically.

6. Animations: Reanimated 3 Shared Value

Prompt: "Create a fade-in animation for a modal using Reanimated 3's useSharedValue and withTiming. Include a backdrop overlay."

7. Custom Hooks: Keyboard Avoidance

Prompt: "Write a useKeyboard hook that returns keyboard height and state (open/closed) using Keyboard.addListener. Use it to shift a TextInput."

8. Offline Support: NetInfo + AsyncStorage

Prompt: "Build an offline-first data layer that caches API responses to AsyncStorage and syncs when online. Use NetInfo to detect connectivity changes."

9. Forms: React Hook Form + Zod

Prompt: "Implement a registration form with validation using React Hook Form and Zod schema. Show error messages below each field."

10. Deep Linking: Universal Links

Prompt: "Configure deep links in React Native for both iOS and Android: open app from example.com/profile/123 and navigate to Profile screen."

11. Push Notifications: Firebase Cloud Messaging

Prompt: "Set up push notifications in React Native with @react-native-firebase/messaging. Handle foreground, background, and quit states."

12. Image Picker: Permissions Handling

Prompt: "Create a custom hook useImagePicker that requests camera/gallery permissions on iOS and Android, then launches the picker."

13. Maps: Google Maps vs Mapbox

Prompt: "Compare react-native-maps (Google Maps) and Mapbox GL for a delivery app. Include clustering, custom markers, and directions."

14. WebSockets: Real-Time Chat

Prompt: "Implement a WebSocket connection in React Native using a custom hook. Reconnect on disconnect with exponential backoff."

15. Biometric Auth: Face ID / Fingerprint

Prompt: "Add biometric authentication to a login screen using react-native-biometrics. Fall back to passcode if biometrics fail."

16. Internationalization (i18n)

Prompt: "Set up i18next with react-i18next for multi-language support. Use AsyncStorage to persist language choice."

17. Testing: Jest + React Native Testing Library

Prompt: "Write unit tests for the Button component: test loading state, disabled state, and onPress callback."

18. Code Push: Over-the-Air Updates

Prompt: "Configure CodePush (App Center) for React Native to push JS bundle updates without App Store review."

19. Performance Profiling: Flipper

Prompt: "Use Flipper to profile React Native app: measure JS thread vs UI thread, and identify potential frame drops."

20. Accessibility: VoiceOver / TalkBack

Prompt: "Make a FlatList accessible by adding accessibilityLabel, accessibilityRole, and focus management."

Conclusion

These 20 prompts cover the most common pain points in React Native development in 2026. Start with the ones most relevant to your current project — like navigation or API error handling. Adapt them to your stack, and you'll save hours of debugging. For deeper dives into specific APIs or services, check the official React Native documentation and the libraries' GitHub repos. Happy coding!