[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FEFTE2X6BFCD7TM99WRV8S":3,"skill-same:01M6FEFTE2X6BFCD7TM99WRV8S":55},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":28,"linkOnly":29,"markdownContent":30,"markdownBody":30,"frontMatter":31,"refName":32,"commitSha":33,"skillDirectory":34,"forksCount":35,"repositoryHtmlUrl":36,"repositoryHomepageUrl":37,"ownerHtmlUrl":38,"ownerBlogUrl":6,"ownerDescription":39,"updatedAt":40,"install":41,"resources":54},"01M6FEFTE2X6BFCD7TM99WRV8S","react-native-elements",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Freact-native-elements\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27],"react","react native","elements","native","react native elements","2026-11-10 10:12:30",false,"# Community React Native Elements Best Practices\n\nComprehensive best practices guide for React Native Elements applications. Contains 45 rules across 8 categories, prioritized by impact to guide component usage, theming, and performance optimization.\n\n## When to Apply\n\nReference these guidelines when:\n- Setting up React Native Elements in a new project\n- Configuring ThemeProvider and createTheme\n- Building lists with ListItem components\n- Implementing form inputs with Input and SearchBar\n- Optimizing FlatList performance with RNE components\n- Reviewing code using React Native Elements\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | Import & Setup | CRITICAL | `setup-` |\n| 2 | Theme Architecture | CRITICAL | `theme-` |\n| 3 | Component Selection | HIGH | `comp-` |\n| 4 | List Performance | HIGH | `list-` |\n| 5 | Props & Configuration | MEDIUM-HIGH | `props-` |\n| 6 | Styling Patterns | MEDIUM | `style-` |\n| 7 | Callbacks & Events | MEDIUM | `event-` |\n| 8 | Advanced Patterns | LOW | `adv-` |\n\n## Quick Reference\n\n### 1. Import & Setup (CRITICAL)\n\n- [`setup-themeprovider`](references\u002Fsetup-themeprovider.md) - Wrap app with ThemeProvider for consistent theming\n- [`setup-imports`](references\u002Fsetup-imports.md) - Use @rneui\u002Fthemed vs @rneui\u002Fbase correctly\n- [`setup-createtheme`](references\u002Fsetup-createtheme.md) - Type-safe theme configuration with createTheme\n- [`setup-tree-shaking`](references\u002Fsetup-tree-shaking.md) - Enable proper tree-shaking for bundle size\n- [`setup-safe-area`](references\u002Fsetup-safe-area.md) - Configure SafeAreaProvider for notched devices\n\n### 2. Theme Architecture (CRITICAL)\n\n- [`theme-usetheme-hook`](references\u002Ftheme-usetheme-hook.md) - Access theme reactively with useTheme\n- [`theme-dark-mode`](references\u002Ftheme-dark-mode.md) - Configure light\u002Fdark mode with createTheme\n- [`theme-component-defaults`](references\u002Ftheme-component-defaults.md) - Set component defaults in theme\n- [`theme-updatetheme`](references\u002Ftheme-updatetheme.md) - Runtime theme updates without remount\n- [`theme-color-scheme`](references\u002Ftheme-color-scheme.md) - Sync with system color scheme\n- [`theme-custom-colors`](references\u002Ftheme-custom-colors.md) - Extend theme with custom colors safely\n\n### 3. Component Selection (HIGH)\n\n- [`comp-listitem-over-view`](references\u002Fcomp-listitem-over-view.md) - Use ListItem for list rows\n- [`comp-input-over-textinput`](references\u002Fcomp-input-over-textinput.md) - Use Input for form fields\n- [`comp-searchbar-platform`](references\u002Fcomp-searchbar-platform.md) - Platform-specific SearchBar variants\n- [`comp-button-type`](references\u002Fcomp-button-type.md) - Use Button type prop for variants\n- [`comp-icon-source`](references\u002Fcomp-icon-source.md) - Choose Icon type wisely for bundle size\n- [`comp-avatar-vs-image`](references\u002Fcomp-avatar-vs-image.md) - Use Avatar for profile images\n\n### 4. List Performance (HIGH)\n\n- [`list-memo-items`](references\u002Flist-memo-items.md) - Memoize ListItem in FlatList\n- [`list-keyextractor`](references\u002Flist-keyextractor.md) - Always provide keyExtractor\n- [`list-getitemlayout`](references\u002Flist-getitemlayout.md) - Use getItemLayout for fixed heights\n- [`list-renderitem-callback`](references\u002Flist-renderitem-callback.md) - Extract renderItem with useCallback\n- [`list-windowsize`](references\u002Flist-windowsize.md) - Configure windowSize for memory balance\n- [`list-virtualized`](references\u002Flist-virtualized.md) - Use FlatList over ScrollView\n- [`list-removeClipped`](references\u002Flist-removeClipped.md) - Configure removeClippedSubviews carefully\n\n### 5. Props & Configuration (MEDIUM-HIGH)\n\n- [`props-loading-state`](references\u002Fprops-loading-state.md) - Use loading prop for async operations\n- [`props-disabled-styling`](references\u002Fprops-disabled-styling.md) - Configure disabledStyle for feedback\n- [`props-input-validation`](references\u002Fprops-input-validation.md) - Use errorMessage for validation\n- [`props-icon-configuration`](references\u002Fprops-icon-configuration.md) - Configure Icon props correctly\n- [`props-searchbar-loading`](references\u002Fprops-searchbar-loading.md) - Show loading state in SearchBar\n- [`props-button-color`](references\u002Fprops-button-color.md) - Use color prop for semantic colors\n\n### 6. Styling Patterns (MEDIUM)\n\n- [`style-stylesheet`](references\u002Fstyle-stylesheet.md) - Use StyleSheet.create over inline objects\n- [`style-containerStyle`](references\u002Fstyle-containerStyle.md) - Use containerStyle for wrappers\n- [`style-usememo-dynamic`](references\u002Fstyle-usememo-dynamic.md) - Memoize dynamic styles\n- [`style-theme-colors`](references\u002Fstyle-theme-colors.md) - Use theme colors over hardcoded values\n- [`style-component-props`](references\u002Fstyle-component-props.md) - Prefer component-specific style props\n\n### 7. Callbacks & Events (MEDIUM)\n\n- [`event-usecallback`](references\u002Fevent-usecallback.md) - Wrap handlers in useCallback\n- [`event-debounce-search`](references\u002Fevent-debounce-search.md) - Debounce SearchBar onChangeText\n- [`event-listitem-onpress`](references\u002Fevent-listitem-onpress.md) - Pass item data correctly\n- [`event-avoid-anonymous`](references\u002Fevent-avoid-anonymous.md) - Avoid anonymous functions in renders\n- [`event-input-handlers`](references\u002Fevent-input-handlers.md) - Configure Input handlers efficiently\n\n### 8. Advanced Patterns (LOW)\n\n- [`adv-custom-component`](references\u002Fadv-custom-component.md) - Wrap RNE components correctly\n- [`adv-platform-specific`](references\u002Fadv-platform-specific.md) - Handle platform-specific props\n- [`adv-makeStyles`](references\u002Fadv-makeStyles.md) - Use makeStyles for theme-aware styles\n- [`adv-overlay-modal`](references\u002Fadv-overlay-modal.md) - Choose Overlay vs Modal correctly\n- [`adv-image-component`](references\u002Fadv-image-component.md) - Configure Avatar ImageComponent for caching\n\n## How to Use\n\nRead individual reference files for detailed explanations and code examples:\n\n- [Section definitions](references\u002F_sections.md) - Category structure and impact levels\n- [Rule template](assets\u002Ftemplates\u002F_template.md) - Template for adding new rules\n\n## Reference Files\n\n| File | Description |\n|------|-------------|\n| [references\u002F_sections.md](references\u002F_sections.md) | Category definitions and ordering |\n| [assets\u002Ftemplates\u002F_template.md](assets\u002Ftemplates\u002F_template.md) | Template for new rules |\n| [metadata.json](metadata.json) | Version and reference information |\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fpproenca\u002Fdot-skills\u002Freact-native-elements",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":42,"prompt":52,"zipAvailable":53},[43,46,49],{"tool":44,"command":45},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill react-native-elements",{"tool":47,"command":48},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill react-native-elements",{"tool":50,"command":51},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill react-native-elements","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Freact-native-elements\u002FSKILL.md",true,[],[56,68,78,87,93,100],{"skillNo":57,"name":58,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":64,"publishedAt":28},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[61],{"categoryNo":62,"categoryName":63,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[65,66,67],"model","model hierarchy","model hierarchy skill",{"skillNo":69,"name":70,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":74,"publishedAt":28},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[73],{"categoryNo":62,"categoryName":63,"taxonomyType":20,"taxonomyTypeDesc":21},[75,76,77],"MCP","zoom","zoom mcp",{"skillNo":79,"name":80,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":28},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[84,85,86,76],"sdk","zoom apps sdk","apps",{"skillNo":88,"name":89,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":92,"publishedAt":28},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[89],{"skillNo":94,"name":95,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":99,"publishedAt":28},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[98],{"categoryNo":62,"categoryName":63,"taxonomyType":20,"taxonomyTypeDesc":21},[95],{"skillNo":101,"name":102,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":105,"publishedAt":28},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[102]]