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

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

As a developer who relies on AI daily to accelerate mobile development, I’ve curated a set of battle-tested prompts that solve real problems in React Native projects. These prompts cover UI components, navigation patterns, and API handling — the three pillars of almost every mobile app. Each prompt is accompanied by a concrete example, code snippet, and a real-world case study showing the before, after, and measurable results.

1. Reusable Button Component with Variants

Problem: Every screen needs buttons — primary, secondary, disabled, icon-left. Without a reusable component, styles are duplicated and inconsistent.

Prompt: "Create a React Native Button component with props: title, variant (primary/secondary/disabled), onPress, icon (optional). Use StyleSheet.create and TypeScript."

Example usage:

import { Button } from './components/Button';

<Button title="Submit" variant="primary" onPress={handleSubmit} />
<Button title="Cancel" variant="secondary" onPress={handleCancel} disabled />

Real-world case: A fintech startup replaced 40+ button implementations with one component. Result: 30% reduction in UI bugs and consistent branding across 12 screens.

2. Dynamic Navigation Header with Back Button Customisation

Problem: Each screen needs a header with custom back action, title alignment, and optional right icons.

Prompt: "Write a React Native component for a custom navigation header using React Navigation. Accept props: title, showBack, backAction, rightElement. Use useNavigation hook."

Example:

<CustomHeader
  title="Profile"
  showBack
  backAction={() => navigation.goBack()}
  rightElement={<Icon name="settings" />}
/>

Case: An e‑commerce app needed dynamic headers for search, cart, and profile. Result: Development time for new screens dropped by 40%.

3. Pull-to-Refresh FlatList with Loading Indicator

Problem: Users expect to refresh content by pulling down. Native FlatList supports it, but handling loading state manually is error‑prone.

Prompt: "Implement a FlatList with pull-to-refresh in React Native. Use useState for refreshing state and a callback to fetch new data. Show ActivityIndicator while refreshing."

Code:

const [refreshing, setRefreshing] = useState(false);
const onRefresh = useCallback(async () => {
  setRefreshing(true);
  await fetchData();
  setRefreshing(false);
}, []);
<FlatList
  data={items}
  renderItem={...}
  refreshing={refreshing}
  onRefresh={onRefresh}
/>

Case: A social media app increased user engagement 15% after adding pull-to-refresh to the feed.

4. Form Validation with React Hook Form

Problem: Forms are a major source of bugs — validation, error messages, keyboard handling.

Prompt: "Set up a login form in React Native using React Hook Form. Include email and password fields with validation: required, email format, minLength. Display error messages below each field. Use Controller for text input."

Example:

const { control, handleSubmit, formState: { errors } } = useForm();
<Controller
  control={control}
  name="email"
  rules={{ required: true, pattern: /^\S+@\S+$/i }}
  render={({ field: { onChange, value } }) => (
    <TextInput onChangeText={onChange} value={value} />
  )}
/>
{errors.email && <Text>{errors.email.message}</Text>}

Case: A delivery app reduced form‑submission error rate by 50% and improved user retention.

5. Type‑Safe Stack Navigator with React Navigation

Problem: Without typed navigation, developers often pass wrong params or forget required props, causing runtime crashes.

Prompt: "Create a type-safe stack navigator using React Navigation and TypeScript. Define a RootStackParamList with Home and Details screens. Home expects no params; Details expects { id: string }. Use createNativeStackNavigator."

Code:

type RootStackParamList = {
  Home: undefined;
  Details: { id: string };
};
const Stack = createNativeStackNavigator<RootStackParamList>();

Case: A healthcare app team eliminated 60% of navigation‑related bugs after adopting typed navigation.

6. API Call with Loading & Error States

Problem: Every API call needs to handle loading, success, and error — leading to repeated boilerplate.

Prompt: "Write a custom hook useFetch that accepts a url and returns { data, loading, error }. Use useEffect and AbortController for cleanup. Manage state with useState and a reducer for reliability."

Example usage:

const { data, loading, error } = useFetch('https://api.example.com/users');
if (loading) return <ActivityIndicator />;
if (error) return <Text>Error: {error.message}</Text>;
return <UserList users={data} />;

Case: A news app reduced API‑related crash reports by 80% after standardising error handling across 20 screens.

7. Modal for User Input

Problem: When users need to edit a single field (e.g., profile name), a full screen transition is overkill. A modal is better.

Prompt: "Create a React Native modal component that accepts visible, onClose, children props. Use Modal from 'react-native'. Include an overlay touch to dismiss and a close button."

Example:

<InputModal
  visible={modalVisible}
  onClose={() => setModalVisible(false)}
>
  <TextInput placeholder="Enter name" />
  <Button title="Save" onPress={handleSave} />
</InputModal>

Case: A task manager app saw a 3x increase in quick edits after replacing full screens with modals.

8. Search Bar with Debounce

Problem: Immediate search on every keystroke triggers too many API calls. Debounce reduces load.

Prompt: "Implement a search bar in React Native with debounce (300ms). Use useState for input text and a custom useDebounce hook. Show results after debounce delay."

Code snippet for hook:

function useDebounce(value: string, delay: number) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  return debouncedValue;
}

Case: A recipe app reduced API calls by 70%, improving server response time and user experience.

9. Tab Navigator with Badge Counts

Problem: Notifications tab needs a badge showing unread count. React Navigation’s tab bar supports badges but configuration is non‑trivial.

Prompt: "Set up a bottom tab navigator using @react-navigation/bottom-tabs with three tabs: Home, Notifications, Profile. Show a red badge on Notifications tab with unread count. Use tabBarBadge prop."

Example:

<BottomTab.Screen
  name="Notifications"
  component={NotificationsScreen}
  options={{
    tabBarBadge: unreadCount > 0 ? unreadCount : undefined,
  }}
/>

Case: A messaging app increased notification click‑through rate by 25% after adding real‑time badges.

10. Deep Linking with React Navigation

Problem: Users expect to open a notification and land directly on the relevant screen. Deep linking requires careful configuration.

Prompt: "Configure deep linking in React Navigation using linking prop. Define a path for a Details screen: /details/:id. Handle navigation state on cold start and background to respect Android and iOS lifecycle."

Config example:

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Details: 'details/:id',
    },
  },
};

Case: A travel booking app saw a 40% increase in conversion when users opened hotel deep links from emails.

11. Custom Hook for API Calls with Retry Logic

Problem: Network failures are common on mobile. Retry logic improves reliability.

Prompt: "Create a custom hook useApi that takes a fetch function and returns { data, error, loading, retry }. Implement a retry count of 3 with exponential backoff. Use useRef to avoid stale state."

Usage:

const { data, loading, retry } = useApi(fetchUsers);
if (loading) return <Spinner />;
return <UsersList users={data} onRetry={retry} />;

Case: A ride‑sharing app reduced failed ride requests by 60% after implementing automatic retry.

12. Theme Switcher (Dark/Light Mode)

Problem: Users expect the app to respect system theme settings, and also toggle manually.

Prompt: "Implement a ThemeContext in React Native that provides colors based on theme: light or dark. Use useColorScheme to detect system preference. Persist user choice with AsyncStorage. Provide a toggle function."

Example structure:

const themes = {
  light: { background: '#fff', text: '#000' },
  dark: { background: '#000', text: '#fff' },
};

Case: A reading app increased average session duration by 20% after adding dark mode.

13. Swipeable List Item with Gesture Handler

Problem: Users want to swipe left to delete or archive items. react-native-gesture-handler makes this smooth.

Prompt: "Build a SwipeableRow component using Swipeable from react-native-gesture-handler. Render delete action on swipe left. Use Animated.View for smooth transition. Call onDelete prop after confirm."

Code snippet:

const renderRightActions = (progress, dragX) => {
  return (
    <TouchableOpacity onPress={onDelete}>
      <Text>Delete</Text>
    </TouchableOpacity>
  );
};
<Swipeable renderRightActions={renderRightActions}>
  <ListItem />
</Swipeable>

Case: A to‑do list app saw a 35% increase in completed tasks after adding swipe to delete.

14. Firebase Authentication with Context

Problem: Auth state management across screens is often scattered. A unified AuthContext simplifies it.

Prompt: "Integrate Firebase Authentication in React Native. Create an AuthProvider with signIn, signUp, signOut methods. Store user object in context. Listen to onAuthStateChanged. Protect navigation with conditional rendering."

Example provider:

const AuthContext = createContext();
export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return unsubscribe;
  }, []);
  return (
    <AuthContext.Provider value={{ user, signIn, signOut }}>
      {children}
    </AuthContext.Provider>
  );
}

Case: A social networking startup launched MVP in two weeks with pre‑configured auth, saving 40+ hours of manual state management.

Conclusion

These 14 prompts represent the core challenges I face daily in React Native development — and they’ve saved me countless hours of boilerplate code. Each prompt is a starting point; adapt them to your own project’s design system and architecture. Start using them today to build faster, more reliable mobile apps. For a more comprehensive library of prompts tailored to your stack, explore the full collection on our blog.