[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-expo-expo-native-ui":3,"mdc--aoi2su-key":37,"related-repo-expo-expo-native-ui":2414,"related-org-expo-expo-native-ui":2517},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"expo-native-ui","build native user interfaces with Expo","Framework (OSS). Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, animations, visual effects, gradients, storage, and responsive layout. For routing and navigation, use the expo-router skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"expo","Expo","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fexpo.png",[12,16,17,20,23],{"name":13,"slug":14,"type":15},"React Native","react-native","tag",{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},"Mobile","mobile",{"name":21,"slug":22,"type":15},"UI Components","ui-components",{"name":24,"slug":25,"type":15},"Design","design",2190,"https:\u002F\u002Fgithub.com\u002Fexpo\u002Fskills","2026-07-24T05:36:48.163465","MIT",111,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],"A collection of AI agent skills for working with Expo projects and Expo Application Services","https:\u002F\u002Fgithub.com\u002Fexpo\u002Fskills\u002Ftree\u002FHEAD\u002Fplugins\u002Fexpo\u002Fskills\u002Fexpo-native-ui","---\nname: expo-native-ui\ndescription: Framework (OSS). Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, animations, visual effects, gradients, storage, and responsive layout. For routing and navigation, use the expo-router skill.\nversion: 1.1.1\nlicense: MIT\n---\n\n# Expo Native UI Guidelines\n\nFor routes, links, stacks, tabs, modals, sheets, and headers, use the `expo-router` skill.\n\n## References\n\nConsult these resources as needed:\n\n```\nreferences\u002F\n  animations.md          Reanimated: entering, exiting, layout, scroll-driven, gestures\n  controls.md            Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker\n  gradients.md           CSS gradients via experimental_backgroundImage (New Arch only)\n  icons.md               SF Symbols via expo-image (sf: source), names, animations, weights\n  media.md               Camera, audio, video, and file saving\n  storage.md             SQLite, AsyncStorage, SecureStore\n  visual-effects.md      Blur (expo-blur) and liquid glass (expo-glass-effect)\n  webgpu-three.md        3D graphics, games, GPU visualizations with WebGPU and Three.js\n```\n\n## Running the App\n\n**CRITICAL: Always try Expo Go first before creating custom builds.**\n\nMost Expo apps work in Expo Go without any custom native code. Before running `npx expo run:ios` or `npx expo run:android`:\n\n1. **Start with Expo Go**: Run `npx expo start` and scan the QR code with Expo Go\n2. **Check if features work**: Test your app thoroughly in Expo Go\n3. **Only create custom builds when required** - see below\n\n### When Custom Builds Are Required\n\nYou need `npx expo run:ios\u002Fandroid` or `eas build` ONLY when using:\n\n- **Local Expo modules** (custom native code in `modules\u002F`)\n- **Apple targets** (widgets, app clips, extensions via `@bacons\u002Fapple-targets`)\n- **Third-party native modules** not included in Expo Go\n- **Custom native configuration** that can't be expressed in `app.json`\n\n### When Expo Go Works\n\nExpo Go supports a huge range of features out of the box:\n\n- All `expo-*` packages (camera, location, notifications, etc.)\n- Expo Router navigation\n- Most UI libraries (reanimated, gesture handler, etc.)\n- Push notifications, deep links, and more\n\n**If you're unsure, try Expo Go first.** Creating custom builds adds complexity, slower iteration, and requires Xcode\u002FAndroid Studio setup.\n\n## Code Style\n\n- Be cautious of unterminated strings. Ensure nested backticks are escaped; never forget to escape quotes correctly.\n- Always use import statements at the top of the file.\n- Always use kebab-case for file names, e.g. `comment-card.tsx`\n- Never use special characters in file names\n- Configure tsconfig.json with path aliases, and prefer aliases over relative imports for refactors.\n\n## Library Preferences\n\n- Never use modules removed from React Native such as Picker, WebView, SafeAreaView, or AsyncStorage\n- Never use legacy expo-permissions\n- `expo-audio` not `expo-av`\n- `expo-video` not `expo-av`\n- `expo-image` with `source=\"sf:name\"` for SF Symbols, not `expo-symbols` or `@expo\u002Fvector-icons`\n- `react-native-safe-area-context` not react-native SafeAreaView\n- `process.env.EXPO_OS` not `Platform.OS`\n- `React.use` not `React.useContext`\n- `expo-image` Image component instead of intrinsic element `img`\n- `expo-glass-effect` for liquid glass backdrops\n- `Color` from `expo-router` for native semantic colors, not raw `PlatformColor` (type-safe, auto-adapts to light\u002Fdark)\n- In SDK 56+, never import from `@react-navigation\u002F*` directly — use `expo-router\u002Freact-navigation` instead (covers `@react-navigation\u002Fnative`, `\u002Fcore`, `\u002Felements`, `\u002Frouters`)\n\n## Responsiveness\n\n- Always wrap root component in a scroll view for responsiveness\n- Use `\u003CScrollView contentInsetAdjustmentBehavior=\"automatic\" \u002F>` instead of `\u003CSafeAreaView>` for smarter safe area insets\n- `contentInsetAdjustmentBehavior=\"automatic\"` should be applied to FlatList and SectionList as well\n- Use flexbox instead of Dimensions API\n- ALWAYS prefer `useWindowDimensions` over `Dimensions.get()` to measure screen size\n\n## Behavior\n\n- Use expo-haptics conditionally on iOS to make more delightful experiences\n- Use views with built-in haptics like `\u003CSwitch \u002F>` from React Native and `@react-native-community\u002Fdatetimepicker`\n- When a route belongs to a Stack, its first child should almost always be a ScrollView with `contentInsetAdjustmentBehavior=\"automatic\"` set\n- When adding a `ScrollView` to the page it should almost always be the first component inside the route component\n- Use the `\u003CText selectable \u002F>` prop on text containing data that could be copied\n- Consider formatting large numbers like 1.4M or 38k\n- Never use intrinsic elements like 'img' or 'div' unless in a webview or Expo DOM component\n\n# Styling\n\nFollow Apple Human Interface Guidelines.\n\n## General Styling Rules\n\n- Prefer flex gap over margin and padding styles\n- Prefer padding over margin where possible\n- Always account for safe area, either with stack headers, tabs, or ScrollView\u002FFlatList `contentInsetAdjustmentBehavior=\"automatic\"`\n- Ensure both top and bottom safe area insets are accounted for\n- Inline styles not StyleSheet.create unless reusing styles is faster\n- Add entering and exiting animations for state changes\n- Use `{ borderCurve: 'continuous' }` for rounded corners unless creating a capsule shape\n- ALWAYS use a navigation stack title instead of a custom text element on the page\n- When padding a ScrollView, use `contentContainerStyle` padding and gap instead of padding on the ScrollView itself (reduces clipping)\n- CSS and Tailwind are not supported - use inline styles\n\n## Colors\n\nUse the `Color` API from `expo-router` for native semantic colors. It is a type-safe wrapper over `PlatformColor` that exposes iOS UIKit colors through `Color.ios.*` and Android Material 3 colors through `Color.android.material.*` (static) or `Color.android.dynamic.*` (adapts to the user's wallpaper on Android 12+). These resolve on-device and automatically adapt to light\u002Fdark mode and accessibility settings, so you no longer maintain separate light\u002Fdark hex tables or a `colors.web.ts` file.\n\n`Color` is platform-specific, so wrap each value in `Platform.select` with a `default` hex fallback for web. Centralize the palette in `theme\u002Fcolors.ts` and import `colors` everywhere:\n\n```tsx\n\u002F\u002F theme\u002Fcolors.ts\nimport { Platform } from \"react-native\";\nimport { Color } from \"expo-router\";\n\nexport const colors = {\n  label: Platform.select({\n    ios: Color.ios.label,\n    android: Color.android.dynamic.onSurface,\n    default: \"#000000\",\n  })!,\n  secondaryLabel: Platform.select({\n    ios: Color.ios.secondaryLabel,\n    android: Color.android.dynamic.onSurfaceVariant,\n    default: \"#3c3c43\",\n  })!,\n  separator: Platform.select({\n    ios: Color.ios.separator,\n    android: Color.android.dynamic.outlineVariant,\n    default: \"#c6c6c8\",\n  })!,\n  systemBackground: Platform.select({\n    ios: Color.ios.systemBackground,\n    android: Color.android.dynamic.surface,\n    default: \"#ffffff\",\n  })!,\n  systemBlue: Platform.select({\n    ios: Color.ios.systemBlue,\n    android: Color.android.dynamic.primary,\n    default: \"#007aff\",\n  })!,\n};\n```\n\n```tsx\nimport { colors } from \"@\u002Ftheme\u002Fcolors\";\n\n\u003CView style={{ backgroundColor: colors.systemBackground }}>\n  \u003CText style={{ color: colors.label }}>Title\u003C\u002FText>\n\u003C\u002FView>;\n```\n\n- iOS re-resolves these colors automatically when the system theme changes. On Android, call `useColorScheme()` inside any component that renders them so it re-renders when the theme flips (required when React Compiler memoizes the component).\n- Don't pass `Color` \u002F `PlatformColor` values into Reanimated styles — use static colors there (see `references\u002Fanimations.md`).\n- `Platform.select({...})!` returns `string | OpaqueColorValue`. Most React Native style props accept `ColorValue` (`string | OpaqueColorValue`) so this works fine. But some third-party props only accept `string` (e.g. `tintColor` on `expo-image`). Cast when needed: `colors.label as string`.\n\n## Text Styling\n\n- Add the `selectable` prop to every `\u003CText\u002F>` element displaying important data or error messages\n- Counters should use `{ fontVariant: 'tabular-nums' }` for alignment\n\n## Shadows\n\nUse CSS `boxShadow` style prop. NEVER use legacy React Native shadow or elevation styles.\n\n```tsx\n\u003CView style={{ boxShadow: \"0 1px 2px rgba(0, 0, 0, 0.05)\" }} \u002F>\n```\n\n'inset' shadows are supported.\n\n## Submitting Feedback\nIf you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:\n```bash\nnpx --yes submit-expo-feedback@latest --category skills --subject \"expo-native-ui\" \"\u003Cactionable feedback>\"\n```\nOnly submit when you have something specific and actionable to report. Include as much relevant context as possible.\n",{"data":38,"body":40},{"name":4,"description":6,"version":39,"license":29},"1.1.1",{"type":41,"children":42},"root",[43,52,67,74,79,91,97,106,127,170,177,197,262,268,273,304,314,320,354,360,583,589,655,661,736,742,747,753,826,832,889,930,1908,2097,2204,2210,2247,2253,2266,2319,2324,2330,2335,2403,2408],{"type":44,"tag":45,"props":46,"children":48},"element","h1",{"id":47},"expo-native-ui-guidelines",[49],{"type":50,"value":51},"text","Expo Native UI Guidelines",{"type":44,"tag":53,"props":54,"children":55},"p",{},[56,58,65],{"type":50,"value":57},"For routes, links, stacks, tabs, modals, sheets, and headers, use the ",{"type":44,"tag":59,"props":60,"children":62},"code",{"className":61},[],[63],{"type":50,"value":64},"expo-router",{"type":50,"value":66}," skill.",{"type":44,"tag":68,"props":69,"children":71},"h2",{"id":70},"references",[72],{"type":50,"value":73},"References",{"type":44,"tag":53,"props":75,"children":76},{},[77],{"type":50,"value":78},"Consult these resources as needed:",{"type":44,"tag":80,"props":81,"children":85},"pre",{"className":82,"code":84,"language":50},[83],"language-text","references\u002F\n  animations.md          Reanimated: entering, exiting, layout, scroll-driven, gestures\n  controls.md            Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker\n  gradients.md           CSS gradients via experimental_backgroundImage (New Arch only)\n  icons.md               SF Symbols via expo-image (sf: source), names, animations, weights\n  media.md               Camera, audio, video, and file saving\n  storage.md             SQLite, AsyncStorage, SecureStore\n  visual-effects.md      Blur (expo-blur) and liquid glass (expo-glass-effect)\n  webgpu-three.md        3D graphics, games, GPU visualizations with WebGPU and Three.js\n",[86],{"type":44,"tag":59,"props":87,"children":89},{"__ignoreMap":88},"",[90],{"type":50,"value":84},{"type":44,"tag":68,"props":92,"children":94},{"id":93},"running-the-app",[95],{"type":50,"value":96},"Running the App",{"type":44,"tag":53,"props":98,"children":99},{},[100],{"type":44,"tag":101,"props":102,"children":103},"strong",{},[104],{"type":50,"value":105},"CRITICAL: Always try Expo Go first before creating custom builds.",{"type":44,"tag":53,"props":107,"children":108},{},[109,111,117,119,125],{"type":50,"value":110},"Most Expo apps work in Expo Go without any custom native code. Before running ",{"type":44,"tag":59,"props":112,"children":114},{"className":113},[],[115],{"type":50,"value":116},"npx expo run:ios",{"type":50,"value":118}," or ",{"type":44,"tag":59,"props":120,"children":122},{"className":121},[],[123],{"type":50,"value":124},"npx expo run:android",{"type":50,"value":126},":",{"type":44,"tag":128,"props":129,"children":130},"ol",{},[131,150,160],{"type":44,"tag":132,"props":133,"children":134},"li",{},[135,140,142,148],{"type":44,"tag":101,"props":136,"children":137},{},[138],{"type":50,"value":139},"Start with Expo Go",{"type":50,"value":141},": Run ",{"type":44,"tag":59,"props":143,"children":145},{"className":144},[],[146],{"type":50,"value":147},"npx expo start",{"type":50,"value":149}," and scan the QR code with Expo Go",{"type":44,"tag":132,"props":151,"children":152},{},[153,158],{"type":44,"tag":101,"props":154,"children":155},{},[156],{"type":50,"value":157},"Check if features work",{"type":50,"value":159},": Test your app thoroughly in Expo Go",{"type":44,"tag":132,"props":161,"children":162},{},[163,168],{"type":44,"tag":101,"props":164,"children":165},{},[166],{"type":50,"value":167},"Only create custom builds when required",{"type":50,"value":169}," - see below",{"type":44,"tag":171,"props":172,"children":174},"h3",{"id":173},"when-custom-builds-are-required",[175],{"type":50,"value":176},"When Custom Builds Are Required",{"type":44,"tag":53,"props":178,"children":179},{},[180,182,188,189,195],{"type":50,"value":181},"You need ",{"type":44,"tag":59,"props":183,"children":185},{"className":184},[],[186],{"type":50,"value":187},"npx expo run:ios\u002Fandroid",{"type":50,"value":118},{"type":44,"tag":59,"props":190,"children":192},{"className":191},[],[193],{"type":50,"value":194},"eas build",{"type":50,"value":196}," ONLY when using:",{"type":44,"tag":198,"props":199,"children":200},"ul",{},[201,219,236,246],{"type":44,"tag":132,"props":202,"children":203},{},[204,209,211,217],{"type":44,"tag":101,"props":205,"children":206},{},[207],{"type":50,"value":208},"Local Expo modules",{"type":50,"value":210}," (custom native code in ",{"type":44,"tag":59,"props":212,"children":214},{"className":213},[],[215],{"type":50,"value":216},"modules\u002F",{"type":50,"value":218},")",{"type":44,"tag":132,"props":220,"children":221},{},[222,227,229,235],{"type":44,"tag":101,"props":223,"children":224},{},[225],{"type":50,"value":226},"Apple targets",{"type":50,"value":228}," (widgets, app clips, extensions via ",{"type":44,"tag":59,"props":230,"children":232},{"className":231},[],[233],{"type":50,"value":234},"@bacons\u002Fapple-targets",{"type":50,"value":218},{"type":44,"tag":132,"props":237,"children":238},{},[239,244],{"type":44,"tag":101,"props":240,"children":241},{},[242],{"type":50,"value":243},"Third-party native modules",{"type":50,"value":245}," not included in Expo Go",{"type":44,"tag":132,"props":247,"children":248},{},[249,254,256],{"type":44,"tag":101,"props":250,"children":251},{},[252],{"type":50,"value":253},"Custom native configuration",{"type":50,"value":255}," that can't be expressed in ",{"type":44,"tag":59,"props":257,"children":259},{"className":258},[],[260],{"type":50,"value":261},"app.json",{"type":44,"tag":171,"props":263,"children":265},{"id":264},"when-expo-go-works",[266],{"type":50,"value":267},"When Expo Go Works",{"type":44,"tag":53,"props":269,"children":270},{},[271],{"type":50,"value":272},"Expo Go supports a huge range of features out of the box:",{"type":44,"tag":198,"props":274,"children":275},{},[276,289,294,299],{"type":44,"tag":132,"props":277,"children":278},{},[279,281,287],{"type":50,"value":280},"All ",{"type":44,"tag":59,"props":282,"children":284},{"className":283},[],[285],{"type":50,"value":286},"expo-*",{"type":50,"value":288}," packages (camera, location, notifications, etc.)",{"type":44,"tag":132,"props":290,"children":291},{},[292],{"type":50,"value":293},"Expo Router navigation",{"type":44,"tag":132,"props":295,"children":296},{},[297],{"type":50,"value":298},"Most UI libraries (reanimated, gesture handler, etc.)",{"type":44,"tag":132,"props":300,"children":301},{},[302],{"type":50,"value":303},"Push notifications, deep links, and more",{"type":44,"tag":53,"props":305,"children":306},{},[307,312],{"type":44,"tag":101,"props":308,"children":309},{},[310],{"type":50,"value":311},"If you're unsure, try Expo Go first.",{"type":50,"value":313}," Creating custom builds adds complexity, slower iteration, and requires Xcode\u002FAndroid Studio setup.",{"type":44,"tag":68,"props":315,"children":317},{"id":316},"code-style",[318],{"type":50,"value":319},"Code Style",{"type":44,"tag":198,"props":321,"children":322},{},[323,328,333,344,349],{"type":44,"tag":132,"props":324,"children":325},{},[326],{"type":50,"value":327},"Be cautious of unterminated strings. Ensure nested backticks are escaped; never forget to escape quotes correctly.",{"type":44,"tag":132,"props":329,"children":330},{},[331],{"type":50,"value":332},"Always use import statements at the top of the file.",{"type":44,"tag":132,"props":334,"children":335},{},[336,338],{"type":50,"value":337},"Always use kebab-case for file names, e.g. ",{"type":44,"tag":59,"props":339,"children":341},{"className":340},[],[342],{"type":50,"value":343},"comment-card.tsx",{"type":44,"tag":132,"props":345,"children":346},{},[347],{"type":50,"value":348},"Never use special characters in file names",{"type":44,"tag":132,"props":350,"children":351},{},[352],{"type":50,"value":353},"Configure tsconfig.json with path aliases, and prefer aliases over relative imports for refactors.",{"type":44,"tag":68,"props":355,"children":357},{"id":356},"library-preferences",[358],{"type":50,"value":359},"Library Preferences",{"type":44,"tag":198,"props":361,"children":362},{},[363,368,373,390,405,437,448,464,480,496,507,533],{"type":44,"tag":132,"props":364,"children":365},{},[366],{"type":50,"value":367},"Never use modules removed from React Native such as Picker, WebView, SafeAreaView, or AsyncStorage",{"type":44,"tag":132,"props":369,"children":370},{},[371],{"type":50,"value":372},"Never use legacy expo-permissions",{"type":44,"tag":132,"props":374,"children":375},{},[376,382,384],{"type":44,"tag":59,"props":377,"children":379},{"className":378},[],[380],{"type":50,"value":381},"expo-audio",{"type":50,"value":383}," not ",{"type":44,"tag":59,"props":385,"children":387},{"className":386},[],[388],{"type":50,"value":389},"expo-av",{"type":44,"tag":132,"props":391,"children":392},{},[393,399,400],{"type":44,"tag":59,"props":394,"children":396},{"className":395},[],[397],{"type":50,"value":398},"expo-video",{"type":50,"value":383},{"type":44,"tag":59,"props":401,"children":403},{"className":402},[],[404],{"type":50,"value":389},{"type":44,"tag":132,"props":406,"children":407},{},[408,414,416,422,424,430,431],{"type":44,"tag":59,"props":409,"children":411},{"className":410},[],[412],{"type":50,"value":413},"expo-image",{"type":50,"value":415}," with ",{"type":44,"tag":59,"props":417,"children":419},{"className":418},[],[420],{"type":50,"value":421},"source=\"sf:name\"",{"type":50,"value":423}," for SF Symbols, not ",{"type":44,"tag":59,"props":425,"children":427},{"className":426},[],[428],{"type":50,"value":429},"expo-symbols",{"type":50,"value":118},{"type":44,"tag":59,"props":432,"children":434},{"className":433},[],[435],{"type":50,"value":436},"@expo\u002Fvector-icons",{"type":44,"tag":132,"props":438,"children":439},{},[440,446],{"type":44,"tag":59,"props":441,"children":443},{"className":442},[],[444],{"type":50,"value":445},"react-native-safe-area-context",{"type":50,"value":447}," not react-native SafeAreaView",{"type":44,"tag":132,"props":449,"children":450},{},[451,457,458],{"type":44,"tag":59,"props":452,"children":454},{"className":453},[],[455],{"type":50,"value":456},"process.env.EXPO_OS",{"type":50,"value":383},{"type":44,"tag":59,"props":459,"children":461},{"className":460},[],[462],{"type":50,"value":463},"Platform.OS",{"type":44,"tag":132,"props":465,"children":466},{},[467,473,474],{"type":44,"tag":59,"props":468,"children":470},{"className":469},[],[471],{"type":50,"value":472},"React.use",{"type":50,"value":383},{"type":44,"tag":59,"props":475,"children":477},{"className":476},[],[478],{"type":50,"value":479},"React.useContext",{"type":44,"tag":132,"props":481,"children":482},{},[483,488,490],{"type":44,"tag":59,"props":484,"children":486},{"className":485},[],[487],{"type":50,"value":413},{"type":50,"value":489}," Image component instead of intrinsic element ",{"type":44,"tag":59,"props":491,"children":493},{"className":492},[],[494],{"type":50,"value":495},"img",{"type":44,"tag":132,"props":497,"children":498},{},[499,505],{"type":44,"tag":59,"props":500,"children":502},{"className":501},[],[503],{"type":50,"value":504},"expo-glass-effect",{"type":50,"value":506}," for liquid glass backdrops",{"type":44,"tag":132,"props":508,"children":509},{},[510,516,518,523,525,531],{"type":44,"tag":59,"props":511,"children":513},{"className":512},[],[514],{"type":50,"value":515},"Color",{"type":50,"value":517}," from ",{"type":44,"tag":59,"props":519,"children":521},{"className":520},[],[522],{"type":50,"value":64},{"type":50,"value":524}," for native semantic colors, not raw ",{"type":44,"tag":59,"props":526,"children":528},{"className":527},[],[529],{"type":50,"value":530},"PlatformColor",{"type":50,"value":532}," (type-safe, auto-adapts to light\u002Fdark)",{"type":44,"tag":132,"props":534,"children":535},{},[536,538,544,546,552,554,560,562,568,569,575,576,582],{"type":50,"value":537},"In SDK 56+, never import from ",{"type":44,"tag":59,"props":539,"children":541},{"className":540},[],[542],{"type":50,"value":543},"@react-navigation\u002F*",{"type":50,"value":545}," directly — use ",{"type":44,"tag":59,"props":547,"children":549},{"className":548},[],[550],{"type":50,"value":551},"expo-router\u002Freact-navigation",{"type":50,"value":553}," instead (covers ",{"type":44,"tag":59,"props":555,"children":557},{"className":556},[],[558],{"type":50,"value":559},"@react-navigation\u002Fnative",{"type":50,"value":561},", ",{"type":44,"tag":59,"props":563,"children":565},{"className":564},[],[566],{"type":50,"value":567},"\u002Fcore",{"type":50,"value":561},{"type":44,"tag":59,"props":570,"children":572},{"className":571},[],[573],{"type":50,"value":574},"\u002Felements",{"type":50,"value":561},{"type":44,"tag":59,"props":577,"children":579},{"className":578},[],[580],{"type":50,"value":581},"\u002Frouters",{"type":50,"value":218},{"type":44,"tag":68,"props":584,"children":586},{"id":585},"responsiveness",[587],{"type":50,"value":588},"Responsiveness",{"type":44,"tag":198,"props":590,"children":591},{},[592,597,618,629,634],{"type":44,"tag":132,"props":593,"children":594},{},[595],{"type":50,"value":596},"Always wrap root component in a scroll view for responsiveness",{"type":44,"tag":132,"props":598,"children":599},{},[600,602,608,610,616],{"type":50,"value":601},"Use ",{"type":44,"tag":59,"props":603,"children":605},{"className":604},[],[606],{"type":50,"value":607},"\u003CScrollView contentInsetAdjustmentBehavior=\"automatic\" \u002F>",{"type":50,"value":609}," instead of ",{"type":44,"tag":59,"props":611,"children":613},{"className":612},[],[614],{"type":50,"value":615},"\u003CSafeAreaView>",{"type":50,"value":617}," for smarter safe area insets",{"type":44,"tag":132,"props":619,"children":620},{},[621,627],{"type":44,"tag":59,"props":622,"children":624},{"className":623},[],[625],{"type":50,"value":626},"contentInsetAdjustmentBehavior=\"automatic\"",{"type":50,"value":628}," should be applied to FlatList and SectionList as well",{"type":44,"tag":132,"props":630,"children":631},{},[632],{"type":50,"value":633},"Use flexbox instead of Dimensions API",{"type":44,"tag":132,"props":635,"children":636},{},[637,639,645,647,653],{"type":50,"value":638},"ALWAYS prefer ",{"type":44,"tag":59,"props":640,"children":642},{"className":641},[],[643],{"type":50,"value":644},"useWindowDimensions",{"type":50,"value":646}," over ",{"type":44,"tag":59,"props":648,"children":650},{"className":649},[],[651],{"type":50,"value":652},"Dimensions.get()",{"type":50,"value":654}," to measure screen size",{"type":44,"tag":68,"props":656,"children":658},{"id":657},"behavior",[659],{"type":50,"value":660},"Behavior",{"type":44,"tag":198,"props":662,"children":663},{},[664,669,688,700,713,726,731],{"type":44,"tag":132,"props":665,"children":666},{},[667],{"type":50,"value":668},"Use expo-haptics conditionally on iOS to make more delightful experiences",{"type":44,"tag":132,"props":670,"children":671},{},[672,674,680,682],{"type":50,"value":673},"Use views with built-in haptics like ",{"type":44,"tag":59,"props":675,"children":677},{"className":676},[],[678],{"type":50,"value":679},"\u003CSwitch \u002F>",{"type":50,"value":681}," from React Native and ",{"type":44,"tag":59,"props":683,"children":685},{"className":684},[],[686],{"type":50,"value":687},"@react-native-community\u002Fdatetimepicker",{"type":44,"tag":132,"props":689,"children":690},{},[691,693,698],{"type":50,"value":692},"When a route belongs to a Stack, its first child should almost always be a ScrollView with ",{"type":44,"tag":59,"props":694,"children":696},{"className":695},[],[697],{"type":50,"value":626},{"type":50,"value":699}," set",{"type":44,"tag":132,"props":701,"children":702},{},[703,705,711],{"type":50,"value":704},"When adding a ",{"type":44,"tag":59,"props":706,"children":708},{"className":707},[],[709],{"type":50,"value":710},"ScrollView",{"type":50,"value":712}," to the page it should almost always be the first component inside the route component",{"type":44,"tag":132,"props":714,"children":715},{},[716,718,724],{"type":50,"value":717},"Use the ",{"type":44,"tag":59,"props":719,"children":721},{"className":720},[],[722],{"type":50,"value":723},"\u003CText selectable \u002F>",{"type":50,"value":725}," prop on text containing data that could be copied",{"type":44,"tag":132,"props":727,"children":728},{},[729],{"type":50,"value":730},"Consider formatting large numbers like 1.4M or 38k",{"type":44,"tag":132,"props":732,"children":733},{},[734],{"type":50,"value":735},"Never use intrinsic elements like 'img' or 'div' unless in a webview or Expo DOM component",{"type":44,"tag":45,"props":737,"children":739},{"id":738},"styling",[740],{"type":50,"value":741},"Styling",{"type":44,"tag":53,"props":743,"children":744},{},[745],{"type":50,"value":746},"Follow Apple Human Interface Guidelines.",{"type":44,"tag":68,"props":748,"children":750},{"id":749},"general-styling-rules",[751],{"type":50,"value":752},"General Styling Rules",{"type":44,"tag":198,"props":754,"children":755},{},[756,761,766,776,781,786,791,803,808,821],{"type":44,"tag":132,"props":757,"children":758},{},[759],{"type":50,"value":760},"Prefer flex gap over margin and padding styles",{"type":44,"tag":132,"props":762,"children":763},{},[764],{"type":50,"value":765},"Prefer padding over margin where possible",{"type":44,"tag":132,"props":767,"children":768},{},[769,771],{"type":50,"value":770},"Always account for safe area, either with stack headers, tabs, or ScrollView\u002FFlatList ",{"type":44,"tag":59,"props":772,"children":774},{"className":773},[],[775],{"type":50,"value":626},{"type":44,"tag":132,"props":777,"children":778},{},[779],{"type":50,"value":780},"Ensure both top and bottom safe area insets are accounted for",{"type":44,"tag":132,"props":782,"children":783},{},[784],{"type":50,"value":785},"Inline styles not StyleSheet.create unless reusing styles is faster",{"type":44,"tag":132,"props":787,"children":788},{},[789],{"type":50,"value":790},"Add entering and exiting animations for state changes",{"type":44,"tag":132,"props":792,"children":793},{},[794,795,801],{"type":50,"value":601},{"type":44,"tag":59,"props":796,"children":798},{"className":797},[],[799],{"type":50,"value":800},"{ borderCurve: 'continuous' }",{"type":50,"value":802}," for rounded corners unless creating a capsule shape",{"type":44,"tag":132,"props":804,"children":805},{},[806],{"type":50,"value":807},"ALWAYS use a navigation stack title instead of a custom text element on the page",{"type":44,"tag":132,"props":809,"children":810},{},[811,813,819],{"type":50,"value":812},"When padding a ScrollView, use ",{"type":44,"tag":59,"props":814,"children":816},{"className":815},[],[817],{"type":50,"value":818},"contentContainerStyle",{"type":50,"value":820}," padding and gap instead of padding on the ScrollView itself (reduces clipping)",{"type":44,"tag":132,"props":822,"children":823},{},[824],{"type":50,"value":825},"CSS and Tailwind are not supported - use inline styles",{"type":44,"tag":68,"props":827,"children":829},{"id":828},"colors",[830],{"type":50,"value":831},"Colors",{"type":44,"tag":53,"props":833,"children":834},{},[835,836,841,843,848,850,855,857,863,865,871,873,879,881,887],{"type":50,"value":717},{"type":44,"tag":59,"props":837,"children":839},{"className":838},[],[840],{"type":50,"value":515},{"type":50,"value":842}," API from ",{"type":44,"tag":59,"props":844,"children":846},{"className":845},[],[847],{"type":50,"value":64},{"type":50,"value":849}," for native semantic colors. It is a type-safe wrapper over ",{"type":44,"tag":59,"props":851,"children":853},{"className":852},[],[854],{"type":50,"value":530},{"type":50,"value":856}," that exposes iOS UIKit colors through ",{"type":44,"tag":59,"props":858,"children":860},{"className":859},[],[861],{"type":50,"value":862},"Color.ios.*",{"type":50,"value":864}," and Android Material 3 colors through ",{"type":44,"tag":59,"props":866,"children":868},{"className":867},[],[869],{"type":50,"value":870},"Color.android.material.*",{"type":50,"value":872}," (static) or ",{"type":44,"tag":59,"props":874,"children":876},{"className":875},[],[877],{"type":50,"value":878},"Color.android.dynamic.*",{"type":50,"value":880}," (adapts to the user's wallpaper on Android 12+). These resolve on-device and automatically adapt to light\u002Fdark mode and accessibility settings, so you no longer maintain separate light\u002Fdark hex tables or a ",{"type":44,"tag":59,"props":882,"children":884},{"className":883},[],[885],{"type":50,"value":886},"colors.web.ts",{"type":50,"value":888}," file.",{"type":44,"tag":53,"props":890,"children":891},{},[892,897,899,905,907,913,915,921,923,928],{"type":44,"tag":59,"props":893,"children":895},{"className":894},[],[896],{"type":50,"value":515},{"type":50,"value":898}," is platform-specific, so wrap each value in ",{"type":44,"tag":59,"props":900,"children":902},{"className":901},[],[903],{"type":50,"value":904},"Platform.select",{"type":50,"value":906}," with a ",{"type":44,"tag":59,"props":908,"children":910},{"className":909},[],[911],{"type":50,"value":912},"default",{"type":50,"value":914}," hex fallback for web. Centralize the palette in ",{"type":44,"tag":59,"props":916,"children":918},{"className":917},[],[919],{"type":50,"value":920},"theme\u002Fcolors.ts",{"type":50,"value":922}," and import ",{"type":44,"tag":59,"props":924,"children":926},{"className":925},[],[927],{"type":50,"value":828},{"type":50,"value":929}," everywhere:",{"type":44,"tag":80,"props":931,"children":935},{"className":932,"code":933,"language":934,"meta":88,"style":88},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F theme\u002Fcolors.ts\nimport { Platform } from \"react-native\";\nimport { Color } from \"expo-router\";\n\nexport const colors = {\n  label: Platform.select({\n    ios: Color.ios.label,\n    android: Color.android.dynamic.onSurface,\n    default: \"#000000\",\n  })!,\n  secondaryLabel: Platform.select({\n    ios: Color.ios.secondaryLabel,\n    android: Color.android.dynamic.onSurfaceVariant,\n    default: \"#3c3c43\",\n  })!,\n  separator: Platform.select({\n    ios: Color.ios.separator,\n    android: Color.android.dynamic.outlineVariant,\n    default: \"#c6c6c8\",\n  })!,\n  systemBackground: Platform.select({\n    ios: Color.ios.systemBackground,\n    android: Color.android.dynamic.surface,\n    default: \"#ffffff\",\n  })!,\n  systemBlue: Platform.select({\n    ios: Color.ios.systemBlue,\n    android: Color.android.dynamic.primary,\n    default: \"#007aff\",\n  })!,\n};\n","tsx",[936],{"type":44,"tag":59,"props":937,"children":938},{"__ignoreMap":88},[939,951,1003,1044,1054,1084,1123,1163,1211,1241,1259,1292,1329,1374,1403,1419,1452,1489,1534,1563,1579,1612,1649,1694,1723,1739,1772,1809,1854,1883,1899],{"type":44,"tag":940,"props":941,"children":944},"span",{"class":942,"line":943},"line",1,[945],{"type":44,"tag":940,"props":946,"children":948},{"style":947},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[949],{"type":50,"value":950},"\u002F\u002F theme\u002Fcolors.ts\n",{"type":44,"tag":940,"props":952,"children":954},{"class":942,"line":953},2,[955,961,967,973,978,983,988,993,998],{"type":44,"tag":940,"props":956,"children":958},{"style":957},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[959],{"type":50,"value":960},"import",{"type":44,"tag":940,"props":962,"children":964},{"style":963},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[965],{"type":50,"value":966}," {",{"type":44,"tag":940,"props":968,"children":970},{"style":969},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[971],{"type":50,"value":972}," Platform",{"type":44,"tag":940,"props":974,"children":975},{"style":963},[976],{"type":50,"value":977}," }",{"type":44,"tag":940,"props":979,"children":980},{"style":957},[981],{"type":50,"value":982}," from",{"type":44,"tag":940,"props":984,"children":985},{"style":963},[986],{"type":50,"value":987}," \"",{"type":44,"tag":940,"props":989,"children":991},{"style":990},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[992],{"type":50,"value":14},{"type":44,"tag":940,"props":994,"children":995},{"style":963},[996],{"type":50,"value":997},"\"",{"type":44,"tag":940,"props":999,"children":1000},{"style":963},[1001],{"type":50,"value":1002},";\n",{"type":44,"tag":940,"props":1004,"children":1006},{"class":942,"line":1005},3,[1007,1011,1015,1020,1024,1028,1032,1036,1040],{"type":44,"tag":940,"props":1008,"children":1009},{"style":957},[1010],{"type":50,"value":960},{"type":44,"tag":940,"props":1012,"children":1013},{"style":963},[1014],{"type":50,"value":966},{"type":44,"tag":940,"props":1016,"children":1017},{"style":969},[1018],{"type":50,"value":1019}," Color",{"type":44,"tag":940,"props":1021,"children":1022},{"style":963},[1023],{"type":50,"value":977},{"type":44,"tag":940,"props":1025,"children":1026},{"style":957},[1027],{"type":50,"value":982},{"type":44,"tag":940,"props":1029,"children":1030},{"style":963},[1031],{"type":50,"value":987},{"type":44,"tag":940,"props":1033,"children":1034},{"style":990},[1035],{"type":50,"value":64},{"type":44,"tag":940,"props":1037,"children":1038},{"style":963},[1039],{"type":50,"value":997},{"type":44,"tag":940,"props":1041,"children":1042},{"style":963},[1043],{"type":50,"value":1002},{"type":44,"tag":940,"props":1045,"children":1047},{"class":942,"line":1046},4,[1048],{"type":44,"tag":940,"props":1049,"children":1051},{"emptyLinePlaceholder":1050},true,[1052],{"type":50,"value":1053},"\n",{"type":44,"tag":940,"props":1055,"children":1057},{"class":942,"line":1056},5,[1058,1063,1069,1074,1079],{"type":44,"tag":940,"props":1059,"children":1060},{"style":957},[1061],{"type":50,"value":1062},"export",{"type":44,"tag":940,"props":1064,"children":1066},{"style":1065},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1067],{"type":50,"value":1068}," const",{"type":44,"tag":940,"props":1070,"children":1071},{"style":969},[1072],{"type":50,"value":1073}," colors ",{"type":44,"tag":940,"props":1075,"children":1076},{"style":963},[1077],{"type":50,"value":1078},"=",{"type":44,"tag":940,"props":1080,"children":1081},{"style":963},[1082],{"type":50,"value":1083}," {\n",{"type":44,"tag":940,"props":1085,"children":1087},{"class":942,"line":1086},6,[1088,1094,1098,1102,1107,1113,1118],{"type":44,"tag":940,"props":1089,"children":1091},{"style":1090},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1092],{"type":50,"value":1093},"  label",{"type":44,"tag":940,"props":1095,"children":1096},{"style":963},[1097],{"type":50,"value":126},{"type":44,"tag":940,"props":1099,"children":1100},{"style":969},[1101],{"type":50,"value":972},{"type":44,"tag":940,"props":1103,"children":1104},{"style":963},[1105],{"type":50,"value":1106},".",{"type":44,"tag":940,"props":1108,"children":1110},{"style":1109},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1111],{"type":50,"value":1112},"select",{"type":44,"tag":940,"props":1114,"children":1115},{"style":969},[1116],{"type":50,"value":1117},"(",{"type":44,"tag":940,"props":1119,"children":1120},{"style":963},[1121],{"type":50,"value":1122},"{\n",{"type":44,"tag":940,"props":1124,"children":1126},{"class":942,"line":1125},7,[1127,1132,1136,1140,1144,1149,1153,1158],{"type":44,"tag":940,"props":1128,"children":1129},{"style":1090},[1130],{"type":50,"value":1131},"    ios",{"type":44,"tag":940,"props":1133,"children":1134},{"style":963},[1135],{"type":50,"value":126},{"type":44,"tag":940,"props":1137,"children":1138},{"style":969},[1139],{"type":50,"value":1019},{"type":44,"tag":940,"props":1141,"children":1142},{"style":963},[1143],{"type":50,"value":1106},{"type":44,"tag":940,"props":1145,"children":1146},{"style":969},[1147],{"type":50,"value":1148},"ios",{"type":44,"tag":940,"props":1150,"children":1151},{"style":963},[1152],{"type":50,"value":1106},{"type":44,"tag":940,"props":1154,"children":1155},{"style":969},[1156],{"type":50,"value":1157},"label",{"type":44,"tag":940,"props":1159,"children":1160},{"style":963},[1161],{"type":50,"value":1162},",\n",{"type":44,"tag":940,"props":1164,"children":1166},{"class":942,"line":1165},8,[1167,1172,1176,1180,1184,1189,1193,1198,1202,1207],{"type":44,"tag":940,"props":1168,"children":1169},{"style":1090},[1170],{"type":50,"value":1171},"    android",{"type":44,"tag":940,"props":1173,"children":1174},{"style":963},[1175],{"type":50,"value":126},{"type":44,"tag":940,"props":1177,"children":1178},{"style":969},[1179],{"type":50,"value":1019},{"type":44,"tag":940,"props":1181,"children":1182},{"style":963},[1183],{"type":50,"value":1106},{"type":44,"tag":940,"props":1185,"children":1186},{"style":969},[1187],{"type":50,"value":1188},"android",{"type":44,"tag":940,"props":1190,"children":1191},{"style":963},[1192],{"type":50,"value":1106},{"type":44,"tag":940,"props":1194,"children":1195},{"style":969},[1196],{"type":50,"value":1197},"dynamic",{"type":44,"tag":940,"props":1199,"children":1200},{"style":963},[1201],{"type":50,"value":1106},{"type":44,"tag":940,"props":1203,"children":1204},{"style":969},[1205],{"type":50,"value":1206},"onSurface",{"type":44,"tag":940,"props":1208,"children":1209},{"style":963},[1210],{"type":50,"value":1162},{"type":44,"tag":940,"props":1212,"children":1214},{"class":942,"line":1213},9,[1215,1220,1224,1228,1233,1237],{"type":44,"tag":940,"props":1216,"children":1217},{"style":1090},[1218],{"type":50,"value":1219},"    default",{"type":44,"tag":940,"props":1221,"children":1222},{"style":963},[1223],{"type":50,"value":126},{"type":44,"tag":940,"props":1225,"children":1226},{"style":963},[1227],{"type":50,"value":987},{"type":44,"tag":940,"props":1229,"children":1230},{"style":990},[1231],{"type":50,"value":1232},"#000000",{"type":44,"tag":940,"props":1234,"children":1235},{"style":963},[1236],{"type":50,"value":997},{"type":44,"tag":940,"props":1238,"children":1239},{"style":963},[1240],{"type":50,"value":1162},{"type":44,"tag":940,"props":1242,"children":1244},{"class":942,"line":1243},10,[1245,1250,1254],{"type":44,"tag":940,"props":1246,"children":1247},{"style":963},[1248],{"type":50,"value":1249},"  }",{"type":44,"tag":940,"props":1251,"children":1252},{"style":969},[1253],{"type":50,"value":218},{"type":44,"tag":940,"props":1255,"children":1256},{"style":963},[1257],{"type":50,"value":1258},"!,\n",{"type":44,"tag":940,"props":1260,"children":1262},{"class":942,"line":1261},11,[1263,1268,1272,1276,1280,1284,1288],{"type":44,"tag":940,"props":1264,"children":1265},{"style":1090},[1266],{"type":50,"value":1267},"  secondaryLabel",{"type":44,"tag":940,"props":1269,"children":1270},{"style":963},[1271],{"type":50,"value":126},{"type":44,"tag":940,"props":1273,"children":1274},{"style":969},[1275],{"type":50,"value":972},{"type":44,"tag":940,"props":1277,"children":1278},{"style":963},[1279],{"type":50,"value":1106},{"type":44,"tag":940,"props":1281,"children":1282},{"style":1109},[1283],{"type":50,"value":1112},{"type":44,"tag":940,"props":1285,"children":1286},{"style":969},[1287],{"type":50,"value":1117},{"type":44,"tag":940,"props":1289,"children":1290},{"style":963},[1291],{"type":50,"value":1122},{"type":44,"tag":940,"props":1293,"children":1295},{"class":942,"line":1294},12,[1296,1300,1304,1308,1312,1316,1320,1325],{"type":44,"tag":940,"props":1297,"children":1298},{"style":1090},[1299],{"type":50,"value":1131},{"type":44,"tag":940,"props":1301,"children":1302},{"style":963},[1303],{"type":50,"value":126},{"type":44,"tag":940,"props":1305,"children":1306},{"style":969},[1307],{"type":50,"value":1019},{"type":44,"tag":940,"props":1309,"children":1310},{"style":963},[1311],{"type":50,"value":1106},{"type":44,"tag":940,"props":1313,"children":1314},{"style":969},[1315],{"type":50,"value":1148},{"type":44,"tag":940,"props":1317,"children":1318},{"style":963},[1319],{"type":50,"value":1106},{"type":44,"tag":940,"props":1321,"children":1322},{"style":969},[1323],{"type":50,"value":1324},"secondaryLabel",{"type":44,"tag":940,"props":1326,"children":1327},{"style":963},[1328],{"type":50,"value":1162},{"type":44,"tag":940,"props":1330,"children":1332},{"class":942,"line":1331},13,[1333,1337,1341,1345,1349,1353,1357,1361,1365,1370],{"type":44,"tag":940,"props":1334,"children":1335},{"style":1090},[1336],{"type":50,"value":1171},{"type":44,"tag":940,"props":1338,"children":1339},{"style":963},[1340],{"type":50,"value":126},{"type":44,"tag":940,"props":1342,"children":1343},{"style":969},[1344],{"type":50,"value":1019},{"type":44,"tag":940,"props":1346,"children":1347},{"style":963},[1348],{"type":50,"value":1106},{"type":44,"tag":940,"props":1350,"children":1351},{"style":969},[1352],{"type":50,"value":1188},{"type":44,"tag":940,"props":1354,"children":1355},{"style":963},[1356],{"type":50,"value":1106},{"type":44,"tag":940,"props":1358,"children":1359},{"style":969},[1360],{"type":50,"value":1197},{"type":44,"tag":940,"props":1362,"children":1363},{"style":963},[1364],{"type":50,"value":1106},{"type":44,"tag":940,"props":1366,"children":1367},{"style":969},[1368],{"type":50,"value":1369},"onSurfaceVariant",{"type":44,"tag":940,"props":1371,"children":1372},{"style":963},[1373],{"type":50,"value":1162},{"type":44,"tag":940,"props":1375,"children":1377},{"class":942,"line":1376},14,[1378,1382,1386,1390,1395,1399],{"type":44,"tag":940,"props":1379,"children":1380},{"style":1090},[1381],{"type":50,"value":1219},{"type":44,"tag":940,"props":1383,"children":1384},{"style":963},[1385],{"type":50,"value":126},{"type":44,"tag":940,"props":1387,"children":1388},{"style":963},[1389],{"type":50,"value":987},{"type":44,"tag":940,"props":1391,"children":1392},{"style":990},[1393],{"type":50,"value":1394},"#3c3c43",{"type":44,"tag":940,"props":1396,"children":1397},{"style":963},[1398],{"type":50,"value":997},{"type":44,"tag":940,"props":1400,"children":1401},{"style":963},[1402],{"type":50,"value":1162},{"type":44,"tag":940,"props":1404,"children":1406},{"class":942,"line":1405},15,[1407,1411,1415],{"type":44,"tag":940,"props":1408,"children":1409},{"style":963},[1410],{"type":50,"value":1249},{"type":44,"tag":940,"props":1412,"children":1413},{"style":969},[1414],{"type":50,"value":218},{"type":44,"tag":940,"props":1416,"children":1417},{"style":963},[1418],{"type":50,"value":1258},{"type":44,"tag":940,"props":1420,"children":1422},{"class":942,"line":1421},16,[1423,1428,1432,1436,1440,1444,1448],{"type":44,"tag":940,"props":1424,"children":1425},{"style":1090},[1426],{"type":50,"value":1427},"  separator",{"type":44,"tag":940,"props":1429,"children":1430},{"style":963},[1431],{"type":50,"value":126},{"type":44,"tag":940,"props":1433,"children":1434},{"style":969},[1435],{"type":50,"value":972},{"type":44,"tag":940,"props":1437,"children":1438},{"style":963},[1439],{"type":50,"value":1106},{"type":44,"tag":940,"props":1441,"children":1442},{"style":1109},[1443],{"type":50,"value":1112},{"type":44,"tag":940,"props":1445,"children":1446},{"style":969},[1447],{"type":50,"value":1117},{"type":44,"tag":940,"props":1449,"children":1450},{"style":963},[1451],{"type":50,"value":1122},{"type":44,"tag":940,"props":1453,"children":1455},{"class":942,"line":1454},17,[1456,1460,1464,1468,1472,1476,1480,1485],{"type":44,"tag":940,"props":1457,"children":1458},{"style":1090},[1459],{"type":50,"value":1131},{"type":44,"tag":940,"props":1461,"children":1462},{"style":963},[1463],{"type":50,"value":126},{"type":44,"tag":940,"props":1465,"children":1466},{"style":969},[1467],{"type":50,"value":1019},{"type":44,"tag":940,"props":1469,"children":1470},{"style":963},[1471],{"type":50,"value":1106},{"type":44,"tag":940,"props":1473,"children":1474},{"style":969},[1475],{"type":50,"value":1148},{"type":44,"tag":940,"props":1477,"children":1478},{"style":963},[1479],{"type":50,"value":1106},{"type":44,"tag":940,"props":1481,"children":1482},{"style":969},[1483],{"type":50,"value":1484},"separator",{"type":44,"tag":940,"props":1486,"children":1487},{"style":963},[1488],{"type":50,"value":1162},{"type":44,"tag":940,"props":1490,"children":1492},{"class":942,"line":1491},18,[1493,1497,1501,1505,1509,1513,1517,1521,1525,1530],{"type":44,"tag":940,"props":1494,"children":1495},{"style":1090},[1496],{"type":50,"value":1171},{"type":44,"tag":940,"props":1498,"children":1499},{"style":963},[1500],{"type":50,"value":126},{"type":44,"tag":940,"props":1502,"children":1503},{"style":969},[1504],{"type":50,"value":1019},{"type":44,"tag":940,"props":1506,"children":1507},{"style":963},[1508],{"type":50,"value":1106},{"type":44,"tag":940,"props":1510,"children":1511},{"style":969},[1512],{"type":50,"value":1188},{"type":44,"tag":940,"props":1514,"children":1515},{"style":963},[1516],{"type":50,"value":1106},{"type":44,"tag":940,"props":1518,"children":1519},{"style":969},[1520],{"type":50,"value":1197},{"type":44,"tag":940,"props":1522,"children":1523},{"style":963},[1524],{"type":50,"value":1106},{"type":44,"tag":940,"props":1526,"children":1527},{"style":969},[1528],{"type":50,"value":1529},"outlineVariant",{"type":44,"tag":940,"props":1531,"children":1532},{"style":963},[1533],{"type":50,"value":1162},{"type":44,"tag":940,"props":1535,"children":1537},{"class":942,"line":1536},19,[1538,1542,1546,1550,1555,1559],{"type":44,"tag":940,"props":1539,"children":1540},{"style":1090},[1541],{"type":50,"value":1219},{"type":44,"tag":940,"props":1543,"children":1544},{"style":963},[1545],{"type":50,"value":126},{"type":44,"tag":940,"props":1547,"children":1548},{"style":963},[1549],{"type":50,"value":987},{"type":44,"tag":940,"props":1551,"children":1552},{"style":990},[1553],{"type":50,"value":1554},"#c6c6c8",{"type":44,"tag":940,"props":1556,"children":1557},{"style":963},[1558],{"type":50,"value":997},{"type":44,"tag":940,"props":1560,"children":1561},{"style":963},[1562],{"type":50,"value":1162},{"type":44,"tag":940,"props":1564,"children":1566},{"class":942,"line":1565},20,[1567,1571,1575],{"type":44,"tag":940,"props":1568,"children":1569},{"style":963},[1570],{"type":50,"value":1249},{"type":44,"tag":940,"props":1572,"children":1573},{"style":969},[1574],{"type":50,"value":218},{"type":44,"tag":940,"props":1576,"children":1577},{"style":963},[1578],{"type":50,"value":1258},{"type":44,"tag":940,"props":1580,"children":1582},{"class":942,"line":1581},21,[1583,1588,1592,1596,1600,1604,1608],{"type":44,"tag":940,"props":1584,"children":1585},{"style":1090},[1586],{"type":50,"value":1587},"  systemBackground",{"type":44,"tag":940,"props":1589,"children":1590},{"style":963},[1591],{"type":50,"value":126},{"type":44,"tag":940,"props":1593,"children":1594},{"style":969},[1595],{"type":50,"value":972},{"type":44,"tag":940,"props":1597,"children":1598},{"style":963},[1599],{"type":50,"value":1106},{"type":44,"tag":940,"props":1601,"children":1602},{"style":1109},[1603],{"type":50,"value":1112},{"type":44,"tag":940,"props":1605,"children":1606},{"style":969},[1607],{"type":50,"value":1117},{"type":44,"tag":940,"props":1609,"children":1610},{"style":963},[1611],{"type":50,"value":1122},{"type":44,"tag":940,"props":1613,"children":1615},{"class":942,"line":1614},22,[1616,1620,1624,1628,1632,1636,1640,1645],{"type":44,"tag":940,"props":1617,"children":1618},{"style":1090},[1619],{"type":50,"value":1131},{"type":44,"tag":940,"props":1621,"children":1622},{"style":963},[1623],{"type":50,"value":126},{"type":44,"tag":940,"props":1625,"children":1626},{"style":969},[1627],{"type":50,"value":1019},{"type":44,"tag":940,"props":1629,"children":1630},{"style":963},[1631],{"type":50,"value":1106},{"type":44,"tag":940,"props":1633,"children":1634},{"style":969},[1635],{"type":50,"value":1148},{"type":44,"tag":940,"props":1637,"children":1638},{"style":963},[1639],{"type":50,"value":1106},{"type":44,"tag":940,"props":1641,"children":1642},{"style":969},[1643],{"type":50,"value":1644},"systemBackground",{"type":44,"tag":940,"props":1646,"children":1647},{"style":963},[1648],{"type":50,"value":1162},{"type":44,"tag":940,"props":1650,"children":1652},{"class":942,"line":1651},23,[1653,1657,1661,1665,1669,1673,1677,1681,1685,1690],{"type":44,"tag":940,"props":1654,"children":1655},{"style":1090},[1656],{"type":50,"value":1171},{"type":44,"tag":940,"props":1658,"children":1659},{"style":963},[1660],{"type":50,"value":126},{"type":44,"tag":940,"props":1662,"children":1663},{"style":969},[1664],{"type":50,"value":1019},{"type":44,"tag":940,"props":1666,"children":1667},{"style":963},[1668],{"type":50,"value":1106},{"type":44,"tag":940,"props":1670,"children":1671},{"style":969},[1672],{"type":50,"value":1188},{"type":44,"tag":940,"props":1674,"children":1675},{"style":963},[1676],{"type":50,"value":1106},{"type":44,"tag":940,"props":1678,"children":1679},{"style":969},[1680],{"type":50,"value":1197},{"type":44,"tag":940,"props":1682,"children":1683},{"style":963},[1684],{"type":50,"value":1106},{"type":44,"tag":940,"props":1686,"children":1687},{"style":969},[1688],{"type":50,"value":1689},"surface",{"type":44,"tag":940,"props":1691,"children":1692},{"style":963},[1693],{"type":50,"value":1162},{"type":44,"tag":940,"props":1695,"children":1697},{"class":942,"line":1696},24,[1698,1702,1706,1710,1715,1719],{"type":44,"tag":940,"props":1699,"children":1700},{"style":1090},[1701],{"type":50,"value":1219},{"type":44,"tag":940,"props":1703,"children":1704},{"style":963},[1705],{"type":50,"value":126},{"type":44,"tag":940,"props":1707,"children":1708},{"style":963},[1709],{"type":50,"value":987},{"type":44,"tag":940,"props":1711,"children":1712},{"style":990},[1713],{"type":50,"value":1714},"#ffffff",{"type":44,"tag":940,"props":1716,"children":1717},{"style":963},[1718],{"type":50,"value":997},{"type":44,"tag":940,"props":1720,"children":1721},{"style":963},[1722],{"type":50,"value":1162},{"type":44,"tag":940,"props":1724,"children":1726},{"class":942,"line":1725},25,[1727,1731,1735],{"type":44,"tag":940,"props":1728,"children":1729},{"style":963},[1730],{"type":50,"value":1249},{"type":44,"tag":940,"props":1732,"children":1733},{"style":969},[1734],{"type":50,"value":218},{"type":44,"tag":940,"props":1736,"children":1737},{"style":963},[1738],{"type":50,"value":1258},{"type":44,"tag":940,"props":1740,"children":1742},{"class":942,"line":1741},26,[1743,1748,1752,1756,1760,1764,1768],{"type":44,"tag":940,"props":1744,"children":1745},{"style":1090},[1746],{"type":50,"value":1747},"  systemBlue",{"type":44,"tag":940,"props":1749,"children":1750},{"style":963},[1751],{"type":50,"value":126},{"type":44,"tag":940,"props":1753,"children":1754},{"style":969},[1755],{"type":50,"value":972},{"type":44,"tag":940,"props":1757,"children":1758},{"style":963},[1759],{"type":50,"value":1106},{"type":44,"tag":940,"props":1761,"children":1762},{"style":1109},[1763],{"type":50,"value":1112},{"type":44,"tag":940,"props":1765,"children":1766},{"style":969},[1767],{"type":50,"value":1117},{"type":44,"tag":940,"props":1769,"children":1770},{"style":963},[1771],{"type":50,"value":1122},{"type":44,"tag":940,"props":1773,"children":1775},{"class":942,"line":1774},27,[1776,1780,1784,1788,1792,1796,1800,1805],{"type":44,"tag":940,"props":1777,"children":1778},{"style":1090},[1779],{"type":50,"value":1131},{"type":44,"tag":940,"props":1781,"children":1782},{"style":963},[1783],{"type":50,"value":126},{"type":44,"tag":940,"props":1785,"children":1786},{"style":969},[1787],{"type":50,"value":1019},{"type":44,"tag":940,"props":1789,"children":1790},{"style":963},[1791],{"type":50,"value":1106},{"type":44,"tag":940,"props":1793,"children":1794},{"style":969},[1795],{"type":50,"value":1148},{"type":44,"tag":940,"props":1797,"children":1798},{"style":963},[1799],{"type":50,"value":1106},{"type":44,"tag":940,"props":1801,"children":1802},{"style":969},[1803],{"type":50,"value":1804},"systemBlue",{"type":44,"tag":940,"props":1806,"children":1807},{"style":963},[1808],{"type":50,"value":1162},{"type":44,"tag":940,"props":1810,"children":1812},{"class":942,"line":1811},28,[1813,1817,1821,1825,1829,1833,1837,1841,1845,1850],{"type":44,"tag":940,"props":1814,"children":1815},{"style":1090},[1816],{"type":50,"value":1171},{"type":44,"tag":940,"props":1818,"children":1819},{"style":963},[1820],{"type":50,"value":126},{"type":44,"tag":940,"props":1822,"children":1823},{"style":969},[1824],{"type":50,"value":1019},{"type":44,"tag":940,"props":1826,"children":1827},{"style":963},[1828],{"type":50,"value":1106},{"type":44,"tag":940,"props":1830,"children":1831},{"style":969},[1832],{"type":50,"value":1188},{"type":44,"tag":940,"props":1834,"children":1835},{"style":963},[1836],{"type":50,"value":1106},{"type":44,"tag":940,"props":1838,"children":1839},{"style":969},[1840],{"type":50,"value":1197},{"type":44,"tag":940,"props":1842,"children":1843},{"style":963},[1844],{"type":50,"value":1106},{"type":44,"tag":940,"props":1846,"children":1847},{"style":969},[1848],{"type":50,"value":1849},"primary",{"type":44,"tag":940,"props":1851,"children":1852},{"style":963},[1853],{"type":50,"value":1162},{"type":44,"tag":940,"props":1855,"children":1857},{"class":942,"line":1856},29,[1858,1862,1866,1870,1875,1879],{"type":44,"tag":940,"props":1859,"children":1860},{"style":1090},[1861],{"type":50,"value":1219},{"type":44,"tag":940,"props":1863,"children":1864},{"style":963},[1865],{"type":50,"value":126},{"type":44,"tag":940,"props":1867,"children":1868},{"style":963},[1869],{"type":50,"value":987},{"type":44,"tag":940,"props":1871,"children":1872},{"style":990},[1873],{"type":50,"value":1874},"#007aff",{"type":44,"tag":940,"props":1876,"children":1877},{"style":963},[1878],{"type":50,"value":997},{"type":44,"tag":940,"props":1880,"children":1881},{"style":963},[1882],{"type":50,"value":1162},{"type":44,"tag":940,"props":1884,"children":1886},{"class":942,"line":1885},30,[1887,1891,1895],{"type":44,"tag":940,"props":1888,"children":1889},{"style":963},[1890],{"type":50,"value":1249},{"type":44,"tag":940,"props":1892,"children":1893},{"style":969},[1894],{"type":50,"value":218},{"type":44,"tag":940,"props":1896,"children":1897},{"style":963},[1898],{"type":50,"value":1258},{"type":44,"tag":940,"props":1900,"children":1902},{"class":942,"line":1901},31,[1903],{"type":44,"tag":940,"props":1904,"children":1905},{"style":963},[1906],{"type":50,"value":1907},"};\n",{"type":44,"tag":80,"props":1909,"children":1911},{"className":932,"code":1910,"language":934,"meta":88,"style":88},"import { colors } from \"@\u002Ftheme\u002Fcolors\";\n\n\u003CView style={{ backgroundColor: colors.systemBackground }}>\n  \u003CText style={{ color: colors.label }}>Title\u003C\u002FText>\n\u003C\u002FView>;\n",[1912],{"type":44,"tag":59,"props":1913,"children":1914},{"__ignoreMap":88},[1915,1956,1963,2014,2081],{"type":44,"tag":940,"props":1916,"children":1917},{"class":942,"line":943},[1918,1922,1926,1931,1935,1939,1943,1948,1952],{"type":44,"tag":940,"props":1919,"children":1920},{"style":957},[1921],{"type":50,"value":960},{"type":44,"tag":940,"props":1923,"children":1924},{"style":963},[1925],{"type":50,"value":966},{"type":44,"tag":940,"props":1927,"children":1928},{"style":969},[1929],{"type":50,"value":1930}," colors",{"type":44,"tag":940,"props":1932,"children":1933},{"style":963},[1934],{"type":50,"value":977},{"type":44,"tag":940,"props":1936,"children":1937},{"style":957},[1938],{"type":50,"value":982},{"type":44,"tag":940,"props":1940,"children":1941},{"style":963},[1942],{"type":50,"value":987},{"type":44,"tag":940,"props":1944,"children":1945},{"style":990},[1946],{"type":50,"value":1947},"@\u002Ftheme\u002Fcolors",{"type":44,"tag":940,"props":1949,"children":1950},{"style":963},[1951],{"type":50,"value":997},{"type":44,"tag":940,"props":1953,"children":1954},{"style":963},[1955],{"type":50,"value":1002},{"type":44,"tag":940,"props":1957,"children":1958},{"class":942,"line":953},[1959],{"type":44,"tag":940,"props":1960,"children":1961},{"emptyLinePlaceholder":1050},[1962],{"type":50,"value":1053},{"type":44,"tag":940,"props":1964,"children":1965},{"class":942,"line":1005},[1966,1971,1977,1982,1987,1992,1996,2000,2004,2009],{"type":44,"tag":940,"props":1967,"children":1968},{"style":963},[1969],{"type":50,"value":1970},"\u003C",{"type":44,"tag":940,"props":1972,"children":1974},{"style":1973},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1975],{"type":50,"value":1976},"View",{"type":44,"tag":940,"props":1978,"children":1979},{"style":1065},[1980],{"type":50,"value":1981}," style",{"type":44,"tag":940,"props":1983,"children":1984},{"style":963},[1985],{"type":50,"value":1986},"={{",{"type":44,"tag":940,"props":1988,"children":1989},{"style":1090},[1990],{"type":50,"value":1991}," backgroundColor",{"type":44,"tag":940,"props":1993,"children":1994},{"style":963},[1995],{"type":50,"value":126},{"type":44,"tag":940,"props":1997,"children":1998},{"style":969},[1999],{"type":50,"value":1930},{"type":44,"tag":940,"props":2001,"children":2002},{"style":963},[2003],{"type":50,"value":1106},{"type":44,"tag":940,"props":2005,"children":2006},{"style":969},[2007],{"type":50,"value":2008},"systemBackground ",{"type":44,"tag":940,"props":2010,"children":2011},{"style":963},[2012],{"type":50,"value":2013},"}}>\n",{"type":44,"tag":940,"props":2015,"children":2016},{"class":942,"line":1046},[2017,2022,2027,2031,2035,2040,2044,2048,2052,2057,2062,2067,2072,2076],{"type":44,"tag":940,"props":2018,"children":2019},{"style":963},[2020],{"type":50,"value":2021},"  \u003C",{"type":44,"tag":940,"props":2023,"children":2024},{"style":1973},[2025],{"type":50,"value":2026},"Text",{"type":44,"tag":940,"props":2028,"children":2029},{"style":1065},[2030],{"type":50,"value":1981},{"type":44,"tag":940,"props":2032,"children":2033},{"style":963},[2034],{"type":50,"value":1986},{"type":44,"tag":940,"props":2036,"children":2037},{"style":1090},[2038],{"type":50,"value":2039}," color",{"type":44,"tag":940,"props":2041,"children":2042},{"style":963},[2043],{"type":50,"value":126},{"type":44,"tag":940,"props":2045,"children":2046},{"style":969},[2047],{"type":50,"value":1930},{"type":44,"tag":940,"props":2049,"children":2050},{"style":963},[2051],{"type":50,"value":1106},{"type":44,"tag":940,"props":2053,"children":2054},{"style":969},[2055],{"type":50,"value":2056},"label ",{"type":44,"tag":940,"props":2058,"children":2059},{"style":963},[2060],{"type":50,"value":2061},"}}>",{"type":44,"tag":940,"props":2063,"children":2064},{"style":969},[2065],{"type":50,"value":2066},"Title",{"type":44,"tag":940,"props":2068,"children":2069},{"style":963},[2070],{"type":50,"value":2071},"\u003C\u002F",{"type":44,"tag":940,"props":2073,"children":2074},{"style":1973},[2075],{"type":50,"value":2026},{"type":44,"tag":940,"props":2077,"children":2078},{"style":963},[2079],{"type":50,"value":2080},">\n",{"type":44,"tag":940,"props":2082,"children":2083},{"class":942,"line":1056},[2084,2088,2092],{"type":44,"tag":940,"props":2085,"children":2086},{"style":963},[2087],{"type":50,"value":2071},{"type":44,"tag":940,"props":2089,"children":2090},{"style":1973},[2091],{"type":50,"value":1976},{"type":44,"tag":940,"props":2093,"children":2094},{"style":963},[2095],{"type":50,"value":2096},">;\n",{"type":44,"tag":198,"props":2098,"children":2099},{},[2100,2113,2140],{"type":44,"tag":132,"props":2101,"children":2102},{},[2103,2105,2111],{"type":50,"value":2104},"iOS re-resolves these colors automatically when the system theme changes. On Android, call ",{"type":44,"tag":59,"props":2106,"children":2108},{"className":2107},[],[2109],{"type":50,"value":2110},"useColorScheme()",{"type":50,"value":2112}," inside any component that renders them so it re-renders when the theme flips (required when React Compiler memoizes the component).",{"type":44,"tag":132,"props":2114,"children":2115},{},[2116,2118,2123,2125,2130,2132,2138],{"type":50,"value":2117},"Don't pass ",{"type":44,"tag":59,"props":2119,"children":2121},{"className":2120},[],[2122],{"type":50,"value":515},{"type":50,"value":2124}," \u002F ",{"type":44,"tag":59,"props":2126,"children":2128},{"className":2127},[],[2129],{"type":50,"value":530},{"type":50,"value":2131}," values into Reanimated styles — use static colors there (see ",{"type":44,"tag":59,"props":2133,"children":2135},{"className":2134},[],[2136],{"type":50,"value":2137},"references\u002Fanimations.md",{"type":50,"value":2139},").",{"type":44,"tag":132,"props":2141,"children":2142},{},[2143,2149,2151,2157,2159,2165,2167,2172,2174,2180,2182,2188,2190,2195,2197,2203],{"type":44,"tag":59,"props":2144,"children":2146},{"className":2145},[],[2147],{"type":50,"value":2148},"Platform.select({...})!",{"type":50,"value":2150}," returns ",{"type":44,"tag":59,"props":2152,"children":2154},{"className":2153},[],[2155],{"type":50,"value":2156},"string | OpaqueColorValue",{"type":50,"value":2158},". Most React Native style props accept ",{"type":44,"tag":59,"props":2160,"children":2162},{"className":2161},[],[2163],{"type":50,"value":2164},"ColorValue",{"type":50,"value":2166}," (",{"type":44,"tag":59,"props":2168,"children":2170},{"className":2169},[],[2171],{"type":50,"value":2156},{"type":50,"value":2173},") so this works fine. But some third-party props only accept ",{"type":44,"tag":59,"props":2175,"children":2177},{"className":2176},[],[2178],{"type":50,"value":2179},"string",{"type":50,"value":2181}," (e.g. ",{"type":44,"tag":59,"props":2183,"children":2185},{"className":2184},[],[2186],{"type":50,"value":2187},"tintColor",{"type":50,"value":2189}," on ",{"type":44,"tag":59,"props":2191,"children":2193},{"className":2192},[],[2194],{"type":50,"value":413},{"type":50,"value":2196},"). Cast when needed: ",{"type":44,"tag":59,"props":2198,"children":2200},{"className":2199},[],[2201],{"type":50,"value":2202},"colors.label as string",{"type":50,"value":1106},{"type":44,"tag":68,"props":2205,"children":2207},{"id":2206},"text-styling",[2208],{"type":50,"value":2209},"Text Styling",{"type":44,"tag":198,"props":2211,"children":2212},{},[2213,2234],{"type":44,"tag":132,"props":2214,"children":2215},{},[2216,2218,2224,2226,2232],{"type":50,"value":2217},"Add the ",{"type":44,"tag":59,"props":2219,"children":2221},{"className":2220},[],[2222],{"type":50,"value":2223},"selectable",{"type":50,"value":2225}," prop to every ",{"type":44,"tag":59,"props":2227,"children":2229},{"className":2228},[],[2230],{"type":50,"value":2231},"\u003CText\u002F>",{"type":50,"value":2233}," element displaying important data or error messages",{"type":44,"tag":132,"props":2235,"children":2236},{},[2237,2239,2245],{"type":50,"value":2238},"Counters should use ",{"type":44,"tag":59,"props":2240,"children":2242},{"className":2241},[],[2243],{"type":50,"value":2244},"{ fontVariant: 'tabular-nums' }",{"type":50,"value":2246}," for alignment",{"type":44,"tag":68,"props":2248,"children":2250},{"id":2249},"shadows",[2251],{"type":50,"value":2252},"Shadows",{"type":44,"tag":53,"props":2254,"children":2255},{},[2256,2258,2264],{"type":50,"value":2257},"Use CSS ",{"type":44,"tag":59,"props":2259,"children":2261},{"className":2260},[],[2262],{"type":50,"value":2263},"boxShadow",{"type":50,"value":2265}," style prop. NEVER use legacy React Native shadow or elevation styles.",{"type":44,"tag":80,"props":2267,"children":2269},{"className":932,"code":2268,"language":934,"meta":88,"style":88},"\u003CView style={{ boxShadow: \"0 1px 2px rgba(0, 0, 0, 0.05)\" }} \u002F>\n",[2270],{"type":44,"tag":59,"props":2271,"children":2272},{"__ignoreMap":88},[2273],{"type":44,"tag":940,"props":2274,"children":2275},{"class":942,"line":943},[2276,2280,2284,2288,2292,2297,2301,2305,2310,2314],{"type":44,"tag":940,"props":2277,"children":2278},{"style":963},[2279],{"type":50,"value":1970},{"type":44,"tag":940,"props":2281,"children":2282},{"style":1973},[2283],{"type":50,"value":1976},{"type":44,"tag":940,"props":2285,"children":2286},{"style":1065},[2287],{"type":50,"value":1981},{"type":44,"tag":940,"props":2289,"children":2290},{"style":963},[2291],{"type":50,"value":1986},{"type":44,"tag":940,"props":2293,"children":2294},{"style":1090},[2295],{"type":50,"value":2296}," boxShadow",{"type":44,"tag":940,"props":2298,"children":2299},{"style":963},[2300],{"type":50,"value":126},{"type":44,"tag":940,"props":2302,"children":2303},{"style":963},[2304],{"type":50,"value":987},{"type":44,"tag":940,"props":2306,"children":2307},{"style":990},[2308],{"type":50,"value":2309},"0 1px 2px rgba(0, 0, 0, 0.05)",{"type":44,"tag":940,"props":2311,"children":2312},{"style":963},[2313],{"type":50,"value":997},{"type":44,"tag":940,"props":2315,"children":2316},{"style":963},[2317],{"type":50,"value":2318}," }} \u002F>\n",{"type":44,"tag":53,"props":2320,"children":2321},{},[2322],{"type":50,"value":2323},"'inset' shadows are supported.",{"type":44,"tag":68,"props":2325,"children":2327},{"id":2326},"submitting-feedback",[2328],{"type":50,"value":2329},"Submitting Feedback",{"type":44,"tag":53,"props":2331,"children":2332},{},[2333],{"type":50,"value":2334},"If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:",{"type":44,"tag":80,"props":2336,"children":2340},{"className":2337,"code":2338,"language":2339,"meta":88,"style":88},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx --yes submit-expo-feedback@latest --category skills --subject \"expo-native-ui\" \"\u003Cactionable feedback>\"\n","bash",[2341],{"type":44,"tag":59,"props":2342,"children":2343},{"__ignoreMap":88},[2344],{"type":44,"tag":940,"props":2345,"children":2346},{"class":942,"line":943},[2347,2352,2357,2362,2367,2372,2377,2381,2385,2389,2393,2398],{"type":44,"tag":940,"props":2348,"children":2349},{"style":1973},[2350],{"type":50,"value":2351},"npx",{"type":44,"tag":940,"props":2353,"children":2354},{"style":990},[2355],{"type":50,"value":2356}," --yes",{"type":44,"tag":940,"props":2358,"children":2359},{"style":990},[2360],{"type":50,"value":2361}," submit-expo-feedback@latest",{"type":44,"tag":940,"props":2363,"children":2364},{"style":990},[2365],{"type":50,"value":2366}," --category",{"type":44,"tag":940,"props":2368,"children":2369},{"style":990},[2370],{"type":50,"value":2371}," skills",{"type":44,"tag":940,"props":2373,"children":2374},{"style":990},[2375],{"type":50,"value":2376}," --subject",{"type":44,"tag":940,"props":2378,"children":2379},{"style":963},[2380],{"type":50,"value":987},{"type":44,"tag":940,"props":2382,"children":2383},{"style":990},[2384],{"type":50,"value":4},{"type":44,"tag":940,"props":2386,"children":2387},{"style":963},[2388],{"type":50,"value":997},{"type":44,"tag":940,"props":2390,"children":2391},{"style":963},[2392],{"type":50,"value":987},{"type":44,"tag":940,"props":2394,"children":2395},{"style":990},[2396],{"type":50,"value":2397},"\u003Cactionable feedback>",{"type":44,"tag":940,"props":2399,"children":2400},{"style":963},[2401],{"type":50,"value":2402},"\"\n",{"type":44,"tag":53,"props":2404,"children":2405},{},[2406],{"type":50,"value":2407},"Only submit when you have something specific and actionable to report. Include as much relevant context as possible.",{"type":44,"tag":2409,"props":2410,"children":2411},"style",{},[2412],{"type":50,"value":2413},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2415,"total":1614},[2416,2432,2447,2460,2474,2488,2506],{"slug":2417,"name":2417,"fn":2418,"description":2419,"org":2420,"tags":2421,"stars":26,"repoUrl":27,"updatedAt":2431},"eas-app-stores","deploy and submit Expo apps to stores","EAS service (paid). Deploy Expo apps to the app stores with EAS - build and submit to the iOS App Store, Google Play Store, and TestFlight, configure eas.json build and submit profiles, manage app versions and build numbers, and publish App Store metadata and ASO. Use whenever the user wants to deploy, release, or ship an app to production or the app stores, is preparing a production build, running eas build or eas submit, shipping to TestFlight, bumping version or build numbers, or setting up store listing metadata. For deploying an Expo website or API routes, use the eas-hosting skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2422,2424,2427,2428,2430],{"name":2423,"slug":1188,"type":15},"Android",{"name":2425,"slug":2426,"type":15},"Deployment","deployment",{"name":9,"slug":8,"type":15},{"name":2429,"slug":1148,"type":15},"iOS",{"name":18,"slug":19,"type":15},"2026-07-24T05:36:44.164663",{"slug":2433,"name":2433,"fn":2434,"description":2435,"org":2436,"tags":2437,"stars":26,"repoUrl":27,"updatedAt":2446},"eas-hosting","deploy Expo websites to EAS Hosting","EAS service (paid). Deploy Expo websites and Expo Router API routes to EAS Hosting - export the web bundle, run eas deploy for production and PR preview URLs, manage environment secrets and custom domains, and work within the Cloudflare Workers runtime. Also covers authoring API routes (+api.ts handlers, HTTP methods, request handling, CORS). Use when deploying an Expo web app or API routes, setting up EAS Hosting, or configuring hosting environments and domains. Not for native builds or store releases - use the eas-app-stores skill for those.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2438,2439,2440,2443],{"name":2425,"slug":2426,"type":15},{"name":9,"slug":8,"type":15},{"name":2441,"slug":2442,"type":15},"Frontend","frontend",{"name":2444,"slug":2445,"type":15},"Web Development","web-development","2026-07-24T05:36:40.193701",{"slug":2448,"name":2448,"fn":2449,"description":2450,"org":2451,"tags":2452,"stars":26,"repoUrl":27,"updatedAt":2459},"eas-observe","configure EAS Observe for Expo apps","EAS service (paid). Use for anything related to EAS Observe - adding `expo-observe` to an Expo project (AppMetricsRoot\u002FObserveRoot HOC, markInteractive, the useObserve hook, the Expo Router \u002F React Navigation integrations for per-route metrics, and user-defined events via `Observe.logEvent`), querying via the EAS CLI (`eas observe:metrics-summary`, `observe:metrics`, `observe:routes`, `observe:events`, `observe:versions`), or interpreting the resulting metrics (cold\u002Fwarm launch, TTR, TTI, navigation cold\u002Fwarm TTR, update download, and the TTI frameRate params for triaging slow startups).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2453,2454,2455,2458],{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},{"name":2456,"slug":2457,"type":15},"Observability","observability",{"name":13,"slug":14,"type":15},"2026-07-24T05:36:45.220605",{"slug":2461,"name":2461,"fn":2462,"description":2463,"org":2464,"tags":2465,"stars":26,"repoUrl":27,"updatedAt":2473},"eas-simulator","run and control remote iOS and Android simulators","EAS service (paid). Run and control a user's app on a remote iOS\u002FAndroid simulator hosted on EAS cloud. Read before running any `eas simulator:*` commands - it has the current syntax for this experimental API. Use whenever the user needs a simulator they can't run locally - 'run my app on a cloud simulator', 'use eas simulator to run\u002Finstall\u002Fscreenshot my app', 'I'm on Linux\u002FCursor and need an iOS device', 'no sim on this box \u002F headless CI', 'let an agent click through my app and screenshot it', 'test my dev build on a remote sim with live reload', 'stream a sim to my browser' - even when they don't say 'EAS Simulator' or 'cloud'. On a host WITHOUT a local simulator (Linux, CI, cloud sandbox) it's the default; on macOS, do NOT auto-trigger for a plain 'run on the simulator' - use it only for a cloud\u002Fremote\u002Fshareable sim, an iOS version they lack, or an agent-driven session. NOT for local sims (expo run:ios, Xcode, Android Studio), EAS Build\u002FUpdate, web preview, or physical devices.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2466,2467,2470,2471,2472],{"name":2423,"slug":1188,"type":15},{"name":2468,"slug":2469,"type":15},"CLI","cli",{"name":9,"slug":8,"type":15},{"name":2429,"slug":1148,"type":15},{"name":18,"slug":19,"type":15},"2026-07-31T05:52:18.602058",{"slug":2475,"name":2475,"fn":2476,"description":2477,"org":2478,"tags":2479,"stars":26,"repoUrl":27,"updatedAt":2487},"eas-update-insights","check health of EAS Updates","EAS service (paid). Check the health of published EAS Update: crash rates, install\u002Flaunch counts, unique users, payload size, and the split between embedded and OTA users per channel. Use when the user asks how an update is performing, whether a rollout is healthy, how many users are on the embedded build vs OTA, or wants to gate CI on update health.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2480,2483,2484,2485,2486],{"name":2481,"slug":2482,"type":15},"Analytics","analytics",{"name":2425,"slug":2426,"type":15},{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},{"name":2456,"slug":2457,"type":15},"2026-07-24T05:36:50.17095",{"slug":2489,"name":2489,"fn":2490,"description":2491,"org":2492,"tags":2493,"stars":26,"repoUrl":27,"updatedAt":2505},"eas-workflows","configure EAS workflows for Expo projects","EAS service (paid). Helps understand and write EAS workflow YAML files for Expo projects. Use this skill when the user asks about CI\u002FCD or workflows in an Expo or EAS context, mentions .eas\u002Fworkflows\u002F, or wants help with EAS build pipelines or deployment automation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2494,2497,2500,2501,2502],{"name":2495,"slug":2496,"type":15},"Automation","automation",{"name":2498,"slug":2499,"type":15},"CI\u002FCD","ci-cd",{"name":2425,"slug":2426,"type":15},{"name":9,"slug":8,"type":15},{"name":2503,"slug":2504,"type":15},"YAML","yaml","2026-07-24T05:36:43.205514",{"slug":2507,"name":2507,"fn":2508,"description":2509,"org":2510,"tags":2511,"stars":26,"repoUrl":27,"updatedAt":2516},"expo-app-clip","add iOS App Clip targets to Expo","Framework (OSS). Add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2512,2513,2514,2515],{"name":9,"slug":8,"type":15},{"name":2429,"slug":1148,"type":15},{"name":18,"slug":19,"type":15},{"name":13,"slug":14,"type":15},"2026-07-24T05:36:46.195935",{"items":2518,"total":1696},[2519,2527,2534,2541,2549,2557,2565,2572,2587,2605,2620,2631],{"slug":2417,"name":2417,"fn":2418,"description":2419,"org":2520,"tags":2521,"stars":26,"repoUrl":27,"updatedAt":2431},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2522,2523,2524,2525,2526],{"name":2423,"slug":1188,"type":15},{"name":2425,"slug":2426,"type":15},{"name":9,"slug":8,"type":15},{"name":2429,"slug":1148,"type":15},{"name":18,"slug":19,"type":15},{"slug":2433,"name":2433,"fn":2434,"description":2435,"org":2528,"tags":2529,"stars":26,"repoUrl":27,"updatedAt":2446},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2530,2531,2532,2533],{"name":2425,"slug":2426,"type":15},{"name":9,"slug":8,"type":15},{"name":2441,"slug":2442,"type":15},{"name":2444,"slug":2445,"type":15},{"slug":2448,"name":2448,"fn":2449,"description":2450,"org":2535,"tags":2536,"stars":26,"repoUrl":27,"updatedAt":2459},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2537,2538,2539,2540],{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},{"name":2456,"slug":2457,"type":15},{"name":13,"slug":14,"type":15},{"slug":2461,"name":2461,"fn":2462,"description":2463,"org":2542,"tags":2543,"stars":26,"repoUrl":27,"updatedAt":2473},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2544,2545,2546,2547,2548],{"name":2423,"slug":1188,"type":15},{"name":2468,"slug":2469,"type":15},{"name":9,"slug":8,"type":15},{"name":2429,"slug":1148,"type":15},{"name":18,"slug":19,"type":15},{"slug":2475,"name":2475,"fn":2476,"description":2477,"org":2550,"tags":2551,"stars":26,"repoUrl":27,"updatedAt":2487},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2552,2553,2554,2555,2556],{"name":2481,"slug":2482,"type":15},{"name":2425,"slug":2426,"type":15},{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},{"name":2456,"slug":2457,"type":15},{"slug":2489,"name":2489,"fn":2490,"description":2491,"org":2558,"tags":2559,"stars":26,"repoUrl":27,"updatedAt":2505},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2560,2561,2562,2563,2564],{"name":2495,"slug":2496,"type":15},{"name":2498,"slug":2499,"type":15},{"name":2425,"slug":2426,"type":15},{"name":9,"slug":8,"type":15},{"name":2503,"slug":2504,"type":15},{"slug":2507,"name":2507,"fn":2508,"description":2509,"org":2566,"tags":2567,"stars":26,"repoUrl":27,"updatedAt":2516},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2568,2569,2570,2571],{"name":9,"slug":8,"type":15},{"name":2429,"slug":1148,"type":15},{"name":18,"slug":19,"type":15},{"name":13,"slug":14,"type":15},{"slug":2573,"name":2573,"fn":2574,"description":2575,"org":2576,"tags":2577,"stars":26,"repoUrl":27,"updatedAt":2586},"expo-brownfield","integrate Expo and React Native into native apps","Framework (OSS). Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR\u002FXCFramework, or adding Expo to an existing Kotlin\u002FSwift project. Covers both the isolated approach and the integrated approach.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2578,2579,2580,2583,2584,2585],{"name":2423,"slug":1188,"type":15},{"name":9,"slug":8,"type":15},{"name":2581,"slug":2582,"type":15},"Integrations","integrations",{"name":2429,"slug":1148,"type":15},{"name":18,"slug":19,"type":15},{"name":13,"slug":14,"type":15},"2026-07-24T05:36:39.682299",{"slug":2588,"name":2588,"fn":2589,"description":2590,"org":2591,"tags":2592,"stars":26,"repoUrl":27,"updatedAt":2604},"expo-data-fetching","fetch and manage data in Expo apps","Framework (OSS). Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2593,2596,2599,2600,2601],{"name":2594,"slug":2595,"type":15},"API Development","api-development",{"name":2597,"slug":2598,"type":15},"Caching","caching",{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},{"name":2602,"slug":2603,"type":15},"React","react","2026-07-24T05:36:42.177188",{"slug":2606,"name":2606,"fn":2607,"description":2608,"org":2609,"tags":2610,"stars":26,"repoUrl":27,"updatedAt":2619},"expo-dev-client","build and distribute Expo development clients","Framework (OSS). Build and distribute Expo development clients locally or via TestFlight for internal testing. For production TestFlight releases and store submission, use the eas-app-stores skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2611,2612,2613,2614,2615,2618],{"name":2423,"slug":1188,"type":15},{"name":2425,"slug":2426,"type":15},{"name":9,"slug":8,"type":15},{"name":2429,"slug":1148,"type":15},{"name":2616,"slug":2617,"type":15},"Local Development","local-development",{"name":18,"slug":19,"type":15},"2026-07-24T05:36:51.160719",{"slug":2621,"name":2621,"fn":2622,"description":2623,"org":2624,"tags":2625,"stars":26,"repoUrl":27,"updatedAt":2630},"expo-dom","run web components in native apps","Framework (OSS). Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally. For the end-to-end migration of a whole web app, use the expo-web-to-native skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2626,2627,2628,2629],{"name":9,"slug":8,"type":15},{"name":2441,"slug":2442,"type":15},{"name":18,"slug":19,"type":15},{"name":13,"slug":14,"type":15},"2026-07-24T05:36:41.176872",{"slug":2632,"name":2632,"fn":2633,"description":2634,"org":2635,"tags":2636,"stars":26,"repoUrl":27,"updatedAt":2641},"expo-examples","integrate Expo example projects","Framework (OSS). Expo's official example projects - the expo\u002Fexamples repo of ~70 `with-*` integrations (Stripe, Clerk, Supabase, OpenAI, maps, Reanimated, SQLite, Skia, NativeWind, and more). Use when integrating a third-party library or service into an existing Expo app and you want the canonical, version-matched pattern to adapt, or when scaffolding a new project from one with `npx create-expo --example`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2637,2638,2639,2640],{"name":9,"slug":8,"type":15},{"name":2581,"slug":2582,"type":15},{"name":18,"slug":19,"type":15},{"name":13,"slug":14,"type":15},"2026-07-24T05:36:35.174379"]