Feat/rearchitecture area bar

example/src/App.tsx

@@ -7,7 +7,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { enableScreens } from 'react-native-screens';
 import { ExampleMenuScreen } from './components/ExampleMenuScreen';
 import { ExampleScreen } from './screens/ExampleScreen';
-import { titleByKey } from './data';
+import { navigationByKey, titleByKey } from './data';
 import type { RootStackParamList } from './types';
 
 enableScreens();
@@ -55,6 +55,7 @@ export default function App() {
                 headerTransparent: true,
                 headerLargeTitleEnabled: true,
                 headerBackButtonDisplayMode: 'minimal',
+                ...navigationByKey[route.params.key],
                 headerTintColor: DynamicColorIOS({
                   light: 'black',
                   dark: 'white',

example/src/components/ExampleMenuScreen.tsx

@@ -1,7 +1,7 @@
 import {
-  DynamicColorIOS,
+  FlatList,
+  PlatformColor,
   Pressable,
-  ScrollView,
   StyleSheet,
   Text,
   View,
@@ -11,76 +11,93 @@ import { exampleList } from '../data';
 
 export function ExampleMenuScreen({ navigation }: { navigation: any }) {
   return (
-    <ScrollView style={styles.menuScrollView}>
-      {exampleList.map((item) => (
+    <FlatList
+      data={exampleList}
+      keyExtractor={(item) => item.key}
+      style={styles.menuList}
+      contentContainerStyle={styles.menuContent}
+      renderItem={({ item }) => (
         <Pressable
-          key={item.key}
           onPress={() => navigation.push('Example', { key: item.key })}
-          style={styles.menuItem}
+          style={({ pressed }) => [
+            styles.menuItem,
+            pressed && styles.menuItemPressed,
+          ]}
         >
-          <View
-            style={[styles.menuIconWrap, { borderColor: `${item.tint}33` }]}
-          >
-            <SFSymbolView
-              name={item.symbol}
-              size={18}
-              tintColor={item.tint}
-              weight={SFSymbolWeight.REGULAR}
-            />
-          </View>
+          <SFSymbolView
+            name={item.symbol}
+            size={24}
+            tintColor="#007AFF"
+            weight={SFSymbolWeight.REGULAR}
+          />
           <View style={styles.menuTextColumn}>
             <Text style={styles.menuTitle}>{item.title}</Text>
             <Text style={styles.menuSubtitle}>{item.subtitle}</Text>
           </View>
-          <Text style={styles.menuChevron}>›</Text>
+          <View style={styles.menuChevronWrap}>
+            <SFSymbolView
+              name="chevron.right"
+              size={13}
+              tintColor="tertiaryLabel"
+              weight={SFSymbolWeight.REGULAR}
+            />
+          </View>
         </Pressable>
-      ))}
-    </ScrollView>
+      )}
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  menuScrollView: {
+  menuList: {
     flex: 1,
-    backgroundColor: DynamicColorIOS({ light: '#f2f2f7', dark: '#000000' }),
+    backgroundColor: PlatformColor('systemBackground'),
+  },
+  menuContent: {
+    paddingBottom: 24,
   },
   menuItem: {
-    minHeight: 72,
+    minHeight: 78,
     paddingHorizontal: 16,
-    paddingVertical: 12,
+    paddingVertical: 14,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: DynamicColorIOS({ light: '#d1d1d6', dark: '#2c2c2e' }),
-    backgroundColor: DynamicColorIOS({ light: '#ffffff', dark: '#1c1c1e' }),
+    borderBottomColor: PlatformColor('separator'),
+    backgroundColor: PlatformColor('systemBackground'),
     flexDirection: 'row',
     alignItems: 'center',
   },
+  menuItemPressed: {
+    opacity: 0.72,
+  },
   menuIconWrap: {
-    width: 30,
-    height: 30,
-    marginRight: 14,
+    width: 40,
+    height: 40,
+    marginRight: 16,
     alignItems: 'center',
     justifyContent: 'center',
     borderWidth: 1,
-    borderRadius: 8,
-    backgroundColor: DynamicColorIOS({ light: '#f8f8f8', dark: '#2a2a2d' }),
+    borderRadius: 12,
   },
   menuTextColumn: {
     flex: 1,
+    paddingRight: 12,
+    paddingLeft: 16,
   },
   menuTitle: {
     fontSize: 17,
+    lineHeight: 22,
     fontWeight: '600',
-    color: DynamicColorIOS({ light: '#111111', dark: '#f5f5f5' }),
+    color: PlatformColor('label'),
   },
   menuSubtitle: {
-    marginTop: 2,
-    fontSize: 12,
-    color: DynamicColorIOS({ light: '#6d6d72', dark: '#8e8e93' }),
+    marginTop: 1,
+    fontSize: 13,
+    lineHeight: 18,
+    fontWeight: '400',
+    color: PlatformColor('secondaryLabel'),
   },
-  menuChevron: {
-    marginLeft: 12,
-    fontSize: 24,
-    lineHeight: 24,
-    color: DynamicColorIOS({ light: '#c7c7cc', dark: '#636366' }),
+  menuChevronWrap: {
+    width: 24,
+    alignItems: 'flex-end',
   },
 });

example/src/data.ts

@@ -1,74 +1,127 @@
-import type { ExampleKey } from './types';
+import type { ExampleKey, ExampleNavigationConfig } from './types';
 
 export const exampleList: Array<{
   key: ExampleKey;
   title: string;
   subtitle: string;
   symbol: string;
-  tint: string;
+  navigation?: ExampleNavigationConfig;
 }> = [
   {
     key: 'appStore',
     title: 'App Store Listing',
     subtitle: 'Segmented control top bar',
     symbol: 'bag',
-    tint: '#2563eb',
+    navigation: {
+      title: 'App Store Listing',
+      headerTransparent: true,
+      headerLargeTitleEnabled: false,
+      headerShadowVisible: false,
+      headerBackButtonDisplayMode: 'minimal',
+    },
   },
   {
     key: 'pullRequests',
     title: 'Pull Requests',
     subtitle: 'Filter chips with large title',
     symbol: 'arrow.triangle.pull',
-    tint: '#16a34a',
+    navigation: {
+      title: 'Pull Requests',
+      headerTransparent: true,
+      headerLargeTitleEnabled: true,
+      headerShadowVisible: false,
+      headerBackButtonDisplayMode: 'minimal',
+    },
   },
   {
     key: 'prDetail',
     title: 'PR Detail',
     subtitle: 'Review banner + action buttons',
     symbol: 'text.page.badge.magnifyingglass',
-    tint: '#7c3aed',
+    navigation: {
+      title: 'PR Detail',
+      headerTransparent: true,
+      headerLargeTitleEnabled: true,
+      headerShadowVisible: false,
+      headerBackButtonDisplayMode: 'minimal',
+    },
   },
   {
     key: 'transitionShowcase',
     title: 'Transition Showcase',
     subtitle: 'Top and bottom bars over color blocks',
     symbol: 'paintpalette',
-    tint: '#db2777',
+    navigation: {
+      title: 'Transition Showcase',
+      headerTransparent: true,
+      headerLargeTitleEnabled: true,
+      headerShadowVisible: false,
+      headerBackButtonDisplayMode: 'minimal',
+    },
   },
   {
     key: 'toolbar',
     title: 'Toolbar',
     subtitle: 'Bottom edge bar emphasis',
     symbol: 'hammer',
-    tint: '#d97706',
+    navigation: {
+      title: 'Toolbar',
+      headerTransparent: true,
+      headerLargeTitleEnabled: true,
+      headerShadowVisible: false,
+      headerBackButtonDisplayMode: 'minimal',
+    },
   },
   {
     key: 'searchBar',
     title: 'Search Bar',
     subtitle: 'Search-like screen with segmented top bar',
     symbol: 'magnifyingglass',
-    tint: '#0891b2',
+    navigation: {
+      title: 'Search Bar',
+      headerTransparent: true,
+      headerLargeTitleEnabled: true,
+      headerShadowVisible: false,
+      headerBackButtonDisplayMode: 'minimal',
+    },
   },
   {
     key: 'tabAccessory',
     title: 'Tab Accessory',
     subtitle: 'Large bottom accessory-style bar',
     symbol: 'music.note.list',
-    tint: '#ea580c',
+    navigation: {
+      title: 'Tab Accessory',
+      headerTransparent: true,
+      headerLargeTitleEnabled: true,
+      headerShadowVisible: false,
+      headerBackButtonDisplayMode: 'minimal',
+    },
   },
   {
     key: 'calendar',
     title: 'Calendar',
     subtitle: 'Week selector with stronger top bar',
     symbol: 'calendar',
-    tint: '#dc2626',
+    navigation: {
+      title: 'Calendar',
+      headerTransparent: true,
+      headerLargeTitleEnabled: true,
+      headerShadowVisible: false,
+      headerBackButtonDisplayMode: 'minimal',
+    },
   },
 ];
 
 export const titleByKey: Record<ExampleKey, string> = Object.fromEntries(
   exampleList.map((item) => [item.key, item.title])
 ) as Record<ExampleKey, string>;
 
+export const navigationByKey: Record<ExampleKey, ExampleNavigationConfig> =
+  Object.fromEntries(
+    exampleList.map((item) => [item.key, item.navigation ?? {}])
+  ) as Record<ExampleKey, ExampleNavigationConfig>;
+
 export const appColors = [
   '#4fd1c5',
   '#68d391',

example/src/types.ts

@@ -8,6 +8,14 @@ export type ExampleKey =
   | 'tabAccessory'
   | 'calendar';
 
+export type ExampleNavigationConfig = {
+  title?: string;
+  headerTransparent?: boolean;
+  headerLargeTitleEnabled?: boolean;
+  headerShadowVisible?: boolean;
+  headerBackButtonDisplayMode?: 'default' | 'generic' | 'minimal';
+};
+
 export type RootStackParamList = {
   Home: undefined;
   Example: { key: ExampleKey };