{
  "id": 18144397,
  "title": "Designing a React Native app for field reps: cheap Android phones, direct sunlight, weak signal",
  "url": "https://urgent.news/2026/11/04/designing-a-react-native-app-for-field-reps-cheap-android-phones",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-04T16:12:13.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/shaoor_ahmad_f9ab22689b95/designing-a-react-native-app-for-field-reps-cheap-android-phones-direct-sunlight-weak-signal-2cp6"
  },
  "original_language": "en",
  "account": "The article discusses designing a React Native app tailored for field sales representatives using mid- and low-end Android phones, often in challenging conditions such as direct sunlight, weak signal, and varied hand usage. Drawing from Apple's Human Interface Guidelines, the team made several adjustments to ensure readability and usability in these difficult environments.\n\nKey design decisions included using a darker accent color (#0369A1) for all action and selected states to achieve better contrast (6:1) compared to iOS's iOS system blue (#007AFF), which only meets WCAG AA contrast standards on white (4.0:1). Secondary text was set to a 72% grey to improve readability against white backgrounds (5.4:1 contrast).\n\nThe size of touch targets was increased to a minimum of 52px, compared to Android's standard 48dp guideline, reducing mis-taps when field reps use gloves, pens, or walk while interacting with the app. Only one primary button per screen was used, a filled button that was 52px tall with a 12px radius. Visible controls such as a red \"✕\" for removal and a button for addition were implemented to avoid reliance on hidden gestures like swipe-to-delete.\n\nTypography played a crucial role, with the Inter font family being used to ensure consistent weight across platforms. Due to Android's handling of custom fonts, four font weights (regular, medium, semibold, and bold) were loaded individually to avoid the regular weight being ignored. Translucent bars replaced blur effects (Liquid Glass) for performance reasons, maintaining visual polish while ensuring smooth scrolling on budget devices.\n\nThe design team focused on using the team's vocabulary over designer jargon, with terms like \"choose dealer\" and \"policy\" instead of \"who paid?\" and \"scheme.\" Labels for required fields used the word \"required\" to ensure clarity. For multi-language support, an optional second line was provided under English headings and error messages, keeping the primary language first.\n\nMotion design was kept simple with short, purposeful animations and light haptics for user feedback, ensuring that the app remained responsive even when the OS's Reduce Motion setting was enabled. The payments screen serves as a reference implementation, demonstrating these design principles in action.",
  "summary": "Most mobile design advice assumes a new iPhone, indoors, on Wi-Fi. The people using our field sales app have mid- and low-end Android phones, stand in car parks and dealer shopfronts at midday, and often have one bar of signal. We still borrowed heavily from Apple's Human Interface Guidelines, because grouped lists, large titles and calm hierarchy make dense data readable. But a lot of Apple's…",
  "key_points": [
    "Darker accent color (#0369A1) ensures better contrast (6:1) for field reps.",
    "Touch targets increased to minimum 52px to reduce mis-taps with gloves or pens.",
    "Inter font family used for consistent weight across Android devices."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 2,
    "also_reported_by": [
      {
        "outlet": "TechSpot",
        "title": "Cheap Android TV boxes came with malware, and Google says the manufacturer was behind it",
        "url": "https://urgent.news/2026/11/04/cheap-android-tv-boxes-came-with-malware-and-google-says-the",
        "published": "2026-11-04T19:06:00.000Z"
      }
    ]
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}