Expo Ios Screen Scaffolder

// {file_path} — {Entity} detail screen
// Generated by expo-ios-screen-scaffolder
//
// Placeholders:
// - {ScreenName}: PascalCase screen component, e.g. TrailDetailScreen
// - {Entity}:     PascalCase singular, e.g. Trail
// - {entity}:     camelCase singular, e.g. trail
// - {entityId}:   route param name, matching the [trailId].tsx file, e.g. trailId
//
// HIG rules applied: layout-edge-to-edge, visual-semantic-colors, native-sf-symbols,
// system-share-sheet, nav-system-back
import { Stack, useLocalSearchParams } from 'expo-router';
import { ScrollView, Text, Pressable, Share, PlatformColor, StyleSheet } from 'react-native';
import { SymbolView } from 'expo-symbols';

import { use{Entity} } from '../hooks/use{Entity}';

export function {ScreenName}() {
  const { {entityId} } = useLocalSearchParams<{ {entityId}: string }>();
  const { {entity} } = use{Entity}({entityId});

  const onShare = () => {
    // TODO: replace example.app with your universal-link domain
    Share.share({ title: {entity}?.name, url: 'https://example.app/{entity}/' + {entityId} });
  };

  return (
    <>
      {/* nav-system-back stays intact — only headerRight is added, never headerLeft */}
      <Stack.Screen
        options={{
          title: {entity}?.name ?? '{Entity}',
          // system-share-sheet: present the real activity view
          headerRight: () => (
            <Pressable onPress={onShare} accessibilityRole="button" accessibilityLabel="Share">
              <SymbolView name="square.and.arrow.up" size={22} />
            </Pressable>
          ),
        }}
      />
      {/* layout-edge-to-edge: content scrolls under the translucent bar */}
      <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.container}>
        <Text style={styles.body}>{ {entity}?.description }</Text>
      </ScrollView>
    </>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: PlatformColor('systemBackground') },
  body: { padding: 16, fontSize: 17, color: PlatformColor('label') },
});

// {file_path} — create {Entity} form screen
// Generated by expo-ios-screen-scaffolder
//
// Placeholders:
// - {ScreenName}: PascalCase screen component, e.g. NewTrailScreen
// - {Entity}:     PascalCase singular, e.g. Trail
// - {entity}:     camelCase singular, e.g. trail
//
// HIG rules applied: layout-keyboard-avoidance, system-keyboard-type,
// motion-optimistic-updates, touch-haptics-on-outcome, native-system-alert
import { router } from 'expo-router';
import {
  KeyboardAvoidingView, ScrollView, TextInput, Button, Alert, PlatformColor, StyleSheet,
} from 'react-native';
import * as Haptics from 'expo-haptics';
import { useState } from 'react';

import { create{Entity} } from '../api/{entity}';

export function {ScreenName}() {
  const [name, setName] = useState('');

  const onSave = async () => {
    try {
      await create{Entity}({ name });
      // touch-haptics-on-outcome: success haptic only when the save succeeds
      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
      router.back();
    } catch {
      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
      // native-system-alert: the platform alert, not a custom modal
      Alert.alert('Could not save', 'Check your connection and try again.');
    }
  };

  return (
    // layout-keyboard-avoidance: inputs stay above the keyboard on iOS
    <KeyboardAvoidingView behavior="padding" style={styles.container}>
      <ScrollView keyboardDismissMode="interactive" contentInsetAdjustmentBehavior="automatic">
        {/* system-keyboard-type: configure keyboard, autofill, and return key per field */}
        <TextInput
          style={styles.field}
          placeholder="{Entity} name"
          value={name}
          onChangeText={setName}
          autoCapitalize="words"
          returnKeyType="done"
        />
        <Button title="Save" onPress={onSave} />
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: PlatformColor('systemBackground') },
  field: { padding: 16, fontSize: 17, color: PlatformColor('label') },
});

// {file_path} — {Entity} list screen
// Generated by expo-ios-screen-scaffolder
//
// Placeholders:
// - {ScreenName}:     PascalCase screen component, e.g. TrailsScreen
// - {Entity}:         PascalCase singular entity, e.g. Trail
// - {entity_plural}:  camelCase plural, e.g. trails
// - {Title}:          navigation bar title, e.g. Trails
// - {route_path}:     route segment pushed for a row, e.g. trails
// - {sf_symbol}:      SF Symbol for the empty state, e.g. figure.hiking
//
// HIG rules applied: nav-large-titles, motion-virtualized-lists, touch-pull-to-refresh,
// motion-empty-states, layout-content-inset-under-bars, visual-semantic-colors
import { Stack, router } from 'expo-router';
import { RefreshControl, Text, Pressable, PlatformColor, StyleSheet } from 'react-native';
import { FlashList } from '@shopify/flash-list';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { SymbolView } from 'expo-symbols';

import { use{Entity}List } from '../hooks/use{Entity}List';

export function {ScreenName}() {
  const insets = useSafeAreaInsets();
  const { {entity_plural}, isRefreshing, refresh } = use{Entity}List();

  return (
    <>
      {/* nav-large-titles: collapses on scroll and adopts the scroll-edge appearance */}
      <Stack.Screen options={{ title: '{Title}', headerLargeTitle: true }} />
      <FlashList
        data={ {entity_plural} }
        keyExtractor={(item) => item.id}
        // touch-pull-to-refresh: the native pull-down spinner
        refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={refresh} />}
        // layout-content-inset-under-bars: last row clears the tab bar and home indicator
        contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}
        contentInsetAdjustmentBehavior="automatic"
        renderItem={({ item }) => (
          <Pressable style={styles.row} onPress={() => router.push('/{route_path}/' + item.id)}>
            <Text style={styles.title}>{item.name}</Text>
          </Pressable>
        )}
        // motion-empty-states: guide the next action instead of a blank screen
        ListEmptyComponent={
          <Pressable style={styles.empty} onPress={refresh}>
            <SymbolView name="{sf_symbol}" size={40} tintColor={PlatformColor('secondaryLabel')} />
            <Text style={styles.emptyText}>No {entity_plural} yet</Text>
          </Pressable>
        }
      />
    </>
  );
}

const styles = StyleSheet.create({
  row: { paddingHorizontal: 16, paddingVertical: 12 },
  title: { fontSize: 17, color: PlatformColor('label') },
  empty: { alignItems: 'center', paddingTop: 80, gap: 8 },
  emptyText: { color: PlatformColor('secondaryLabel') },
});

// {file_path} — {Title} presented as a form sheet
// Generated by expo-ios-screen-scaffolder
//
// Placeholders:
// - {ScreenName}: PascalCase screen component, e.g. FilterTrailsScreen
// - {Title}:      navigation bar title, e.g. Filter
// - {route_name}: this route's segment, e.g. filter
//
// Register the route in the parent _layout so it presents as a sheet with detents:
//   <Stack.Screen
//     name="{route_name}"
//     options={{ presentation: 'formSheet', sheetAllowedDetents: [0.5, 1.0], sheetGrabberVisible: true }}
//   />
//
// HIG rules applied: nav-sheet-detents, nav-push-vs-present
import { Stack, router } from 'expo-router';
import { ScrollView, Button, PlatformColor, StyleSheet } from 'react-native';

export function {ScreenName}() {
  return (
    <>
      {/* nav-push-vs-present: a self-contained task gets Cancel/Done, not a back chevron */}
      <Stack.Screen
        options={{
          title: '{Title}',
          headerLeft: () => <Button title="Cancel" onPress={() => router.back()} />,
          headerRight: () => <Button title="Done" onPress={() => router.back()} />,
        }}
      />
      <ScrollView style={styles.container} contentInsetAdjustmentBehavior="automatic">
        {/* sheet content goes here */}
      </ScrollView>
    </>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: PlatformColor('systemBackground') },
});

// {file_path} — root native tab bar layout
// Generated by expo-ios-screen-scaffolder
//
// Placeholders (repeat the Trigger block once per tab):
// - {tab_name}:       route segment for the tab, e.g. trails
// - {Tab_label}:      visible label, e.g. Trails
// - {tab_sf_symbol}:  SF Symbol for the tab icon, e.g. figure.hiking
//
// Requires Expo Router native tabs (a beta API — pin your Expo SDK). The
// { NativeTabs, Icon, Label } named-import form below targets SDK 54+. On SDK 55+
// the icon may instead use the nested <NativeTabs.Trigger.Icon> form — check your SDK's docs.
//
// HIG rules applied: nav-native-tabs, native-sf-symbols
import { NativeTabs, Icon, Label } from 'expo-router/unstable-native-tabs';

export default function TabsLayout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="{tab_name}">
        <Label>{Tab_label}</Label>
        <Icon sf="{tab_sf_symbol}" />
      </NativeTabs.Trigger>
      {/* Duplicate the Trigger above for each additional tab */}
    </NativeTabs>
  );
}

// {file_path} — {Title} settings screen
// Generated by expo-ios-screen-scaffolder
//
// Placeholders:
// - {ScreenName}: PascalCase screen component, e.g. SettingsScreen
// - {Title}:      navigation bar title, e.g. Settings
//
// HIG rules applied: native-switch-toggle, visual-semantic-colors, nav-large-titles,
// layout-content-inset-under-bars
import { Stack } from 'expo-router';
import { SectionList, View, Text, Switch, PlatformColor, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useState } from 'react';

export function {ScreenName}() {
  const insets = useSafeAreaInsets();
  const [offlineEnabled, setOfflineEnabled] = useState(false);

  return (
    <>
      <Stack.Screen options={{ title: '{Title}', headerLargeTitle: true }} />
      <SectionList
        contentInsetAdjustmentBehavior="automatic"
        // layout-content-inset-under-bars: last row clears the home indicator
        contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}
        sections={[{ title: 'General', data: ['offline'] }]}
        keyExtractor={(item) => item}
        renderSectionHeader={({ section }) => <Text style={styles.header}>{section.title}</Text>}
        renderItem={() => (
          <View style={styles.row}>
            <Text style={styles.label}>Available offline</Text>
            {/* native-switch-toggle: platform Switch with correct size, haptic, and a11y trait */}
            <Switch value={offlineEnabled} onValueChange={setOfflineEnabled} />
          </View>
        )}
      />
      {/* Add more rows via the section's data, or more sections to the sections array above */}
    </>
  );
}

const styles = StyleSheet.create({
  header: {
    paddingHorizontal: 16, paddingTop: 24, paddingBottom: 8,
    color: PlatformColor('secondaryLabel'),
  },
  row: {
    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
    paddingHorizontal: 16, paddingVertical: 12,
    backgroundColor: PlatformColor('secondarySystemGroupedBackground'),
  },
  label: { fontSize: 17, color: PlatformColor('label') },
});

{
  "app_dir": "app",
  "components_dir": "components",
  "list_component": "FlashList",
  "_setup_instructions": {
    "app_dir": "Expo Router routes directory where scaffolded screens are written (default: 'app').",
    "components_dir": "Directory for shared components the screens import (default: 'components').",
    "list_component": "List component used by the list-screen template: 'FlashList' (recommended) or 'FlatList'."
  }
}

{
  "version": "0.1.0",
  "organization": "Expo iOS HIG",
  "technology": "Expo (React Native) for iOS 26",
  "discipline": "extraction",
  "type": "scaffolding",
  "date": "May 2026",
  "abstract": "Parameterized templates that scaffold HIG-compliant Expo Router screens for iOS — list, detail, form, modal sheet, native tabs layout, and settings. Each template is native-by-construction (native navigation, FlashList, safe-area insets, semantic colors via PlatformColor, SF Symbols, haptics, empty states) and cites the expo-ios-hig rules it satisfies, so generated screens pass expo-ios-hig-verify without rework. Output is TSX for Expo Router, not Swift.",
  "references": [
    "https://docs.expo.dev/router/introduction/",
    "https://docs.expo.dev/router/advanced/stack/",
    "https://docs.expo.dev/router/advanced/native-tabs/",
    "https://shopify.github.io/flash-list/docs/",
    "https://developer.apple.com/design/human-interface-guidelines/"
  ]
}