# Back button/navigation uses platform conventions

- **Pattern:** `ab-001967` (`mobile-ux-patterns.platform-conventions.back-button-convention`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001967
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001967)

## Why it matters

iOS users swipe from the left edge to go back without looking — it is the most frequent navigation gesture in the OS. Replacing it with a custom back button forces users to reach up to the top-left corner one-handed, which is physically uncomfortable on phones above 6 inches and drives session abandonment. On Android, a broken hardware back button is an Android Vitals crash-class signal and directly lowers Play Store visibility.

## Severity rationale

High because navigation is the most-used control in the app and breaking it degrades every session.

## Remediation

Use React Navigation's native stack — it wires up iOS swipe-back and Android hardware back for free. Do not disable `gestureEnabled` without a documented reason:

```tsx
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
<Stack.Navigator screenOptions={{ gestureEnabled: true }}>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
```

If you use a custom navigator, add a `BackHandler` listener on Android.

## Detection

- **ID:** `back-button-convention`
- **Severity:** `high`
- **What to look for:** Check the navigation library setup (cite the actual library and version). On iOS, verify swipe-back gesture is enabled (`gestureEnabled: true` or React Navigation default). On Android, verify hardware back button handling. Enumerate all screens and check back navigation consistency.
- **Pass criteria:** iOS uses swipe-back gesture (React Navigation default) or visible back button in top-left on at least 100% of navigable screens. Android hardware/on-screen back button works correctly. Back navigation is consistent across all screens.
- **Fail criteria:** iOS has no swipe-back and relies on custom back buttons on any screen, or Android back button does not work on any screen. Back navigation is broken or inconsistent across screens.
- **Skip (N/A) when:** The app is single-screen with no navigation stack (no route pushing or screen transitions).
- **Detail on fail:** Quote the navigation configuration. `"iOS app has custom back buttons instead of swipe-back gesture — users must tap a button instead of using familiar gesture."` or `"Android back button pops screen correctly but does not close the app from root navigation."`
- **Cross-reference:** For navigation accessibility (screen reader announcements on route changes), the Accessibility Fundamentals audit covers focus management during navigation.
- **Remediation:** Use React Navigation, which handles platform conventions automatically:

  ```tsx
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';

  // iOS: automatic swipe-back gesture
  // Android: hardware back button support
  const Stack = createNativeStackNavigator();

  export default function Navigation() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Detail" component={DetailScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
  ```

  For custom back button on iOS (if needed):

  ```tsx
  <Stack.Screen
    name="Detail"
    component={DetailScreen}
    options={{
      headerBackTitle: 'Back',
      headerBackTitleVisible: true,
    }}
  />
  ```

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001967