Tab bar icon sizes and labels follow platform guidelines

Sub-20pt tab bar icons are below the WCAG 2.2 SC 2.5.5 target-size threshold (44x44pt minimum) and the Apple HIG 49pt tab bar height — users with average thumb size mis-tap, and users with motor impairments cannot hit the target at all. Missing labels force users to memorize pictographs, which harms first-session discoverability and is specifically flagged by Google Play's user experience quality signals.

Set explicit icon sizes of at least 24pt, show labels on every tab, and set platform-appropriate tab bar heights in @react-navigation/bottom-tabs:

<Tab.Navigator screenOptions={{
  tabBarIconStyle: { width: 24, height: 24 },
  tabBarStyle: { height: Platform.OS === 'ios' ? 83 : 56 },
  tabBarShowLabel: true,
}}>
  <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: 'Home' }} />
</Tab.Navigator>

• ID: mobile-ux-patterns.platform-conventions.tab-bar-guidelines

• Severity: low

• What to look for: If the app has a tab bar, enumerate all tab items. For each, check icon size (should be at least 24pt), label visibility, and overall tab bar height. Quote the actual tabBarStyle height and icon size values.

• Pass criteria: Tab bar icons are at least 24pt (ideally 24-30pt), labels are visible and readable, tab bar height is at least 49pt on iOS and at least 56pt on Android. All tab items have both icon and label.

• Fail criteria: Tab bar icons are under 20pt, labels are missing or unreadable, or tab bar height is under 49pt on iOS or under 56pt on Android.

• Skip (N/A) when: App has no tab bar navigation (uses only stack navigation or single-screen layout).

• Detail on fail: Quote the actual dimensions. "Tab bar icons are 16pt — below the 24pt minimum — making them hard to read and tap." or "Tab labels are hidden, reducing discoverability of tab functions."

• Remediation: Configure tab bar with appropriate sizes:

  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  
  const Tab = createBottomTabNavigator();
  
  <Tab.Navigator
    screenOptions={{
      tabBarActiveTintColor: '#007AFF',
      tabBarInactiveTintColor: '#8E8E93',
      tabBarIconStyle: { width: 24, height: 24 },  // Adequate icon size
      tabBarStyle: { height: Platform.OS === 'ios' ? 83 : 56 },  // Platform-appropriate height
    }}
  >
    <Tab.Screen
      name="Home"
      component={HomeScreen}
      options={{
        tabBarIcon: ({ color, size }) => <Icon name="home" color={color} size={size} />,
        tabBarLabel: 'Home',  // Always show label
      }}
    />
  </Tab.Navigator>