Guide: Mobile app screens

• Make each screen 390 by 844, with relative flex size-full flex-col overflow-hidden on the root.
• Do not draw a status bar: no time such as "9:41", no signal, Wi-Fi or battery icons. Do not keep an empty band for one at the top either: no pt-[59px] on the root and no empty spacer. The content starts at the top.
• Keep 34 px at the bottom for the home indicator.
• Build a screen from top to bottom:
  1. A navigation bar of 44 px, or a large title, with pt-3 or pt-4.
  2. The content, with flex-1.
  3. A tab bar, when the app has one: 83 px with the home indicator.
• Make touch targets 44 by 44 px or larger. Keep 16 to 20 px of padding on the sides. Make list rows 44 to 64 px high, with 24 to 32 px between groups.
• Use the iOS type sizes: large title 34 bold, title 28, headline 17 semibold, body 17, callout 16, subhead 15, footnote 13, caption 12.
• Make these components first: NavBar, ListRow, TabItem, Button and Input. Then build screens from instances.
• Put screens in a row, 100 px apart: await FindEmptySpace({ width: 390, height: 844, nodeId: previousFrame, padding: 100 }).
• For dark mode, use tokens, and place a second frame with modes: { theme: 'dark' }. Do not make a second component.
• For Android, use frames of 412 by 915, and Material habits: a top app bar of 64 px and a navigation bar of 80 px.

See the complete recipe in layout.md.

For an iOS app built with Expo and @expo/ui, use the expo-swiftui template instead. See expo-swiftui.md.