react-native-elements
Community React Native Elements Best Practices
Comprehensive 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.
When to Apply
Reference these guidelines when:
- Setting up React Native Elements in a new project
- Configuring ThemeProvider and createTheme
- Building lists with ListItem components
- Implementing form inputs with Input and SearchBar
- Optimizing FlatList performance with RNE components
- Reviewing code using React Native Elements
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Import & Setup | CRITICAL | setup- |
| 2 | Theme Architecture | CRITICAL | theme- |
| 3 | Component Selection | HIGH | comp- |
| 4 | List Performance | HIGH | list- |
| 5 | Props & Configuration | MEDIUM-HIGH | props- |
| 6 | Styling Patterns | MEDIUM | style- |
| 7 | Callbacks & Events | MEDIUM | event- |
| 8 | Advanced Patterns | LOW | adv- |
Quick Reference
1. Import & Setup (CRITICAL)
setup-themeprovider- Wrap app with ThemeProvider for consistent themingsetup-imports- Use @rneui/themed vs @rneui/base correctlysetup-createtheme- Type-safe theme configuration with createThemesetup-tree-shaking- Enable proper tree-shaking for bundle sizesetup-safe-area- Configure SafeAreaProvider for notched devices
2. Theme Architecture (CRITICAL)
theme-usetheme-hook- Access theme reactively with useThemetheme-dark-mode- Configure light/dark mode with createThemetheme-component-defaults- Set component defaults in themetheme-updatetheme- Runtime theme updates without remounttheme-color-scheme- Sync with system color schemetheme-custom-colors- Extend theme with custom colors safely
3. Component Selection (HIGH)
comp-listitem-over-view- Use ListItem for list rowscomp-input-over-textinput- Use Input for form fieldscomp-searchbar-platform- Platform-specific SearchBar variantscomp-button-type- Use Button type prop for variantscomp-icon-source- Choose Icon type wisely for bundle sizecomp-avatar-vs-image- Use Avatar for profile images
4. List Performance (HIGH)
list-memo-items- Memoize ListItem in FlatListlist-keyextractor- Always provide keyExtractorlist-getitemlayout- Use getItemLayout for fixed heightslist-renderitem-callback- Extract renderItem with useCallbacklist-windowsize- Configure windowSize for memory balancelist-virtualized- Use FlatList over ScrollViewlist-removeClipped- Configure removeClippedSubviews carefully
5. Props & Configuration (MEDIUM-HIGH)
props-loading-state- Use loading prop for async operationsprops-disabled-styling- Configure disabledStyle for feedbackprops-input-validation- Use errorMessage for validationprops-icon-configuration- Configure Icon props correctlyprops-searchbar-loading- Show loading state in SearchBarprops-button-color- Use color prop for semantic colors
6. Styling Patterns (MEDIUM)
style-stylesheet- Use StyleSheet.create over inline objectsstyle-containerStyle- Use containerStyle for wrappersstyle-usememo-dynamic- Memoize dynamic stylesstyle-theme-colors- Use theme colors over hardcoded valuesstyle-component-props- Prefer component-specific style props
7. Callbacks & Events (MEDIUM)
event-usecallback- Wrap handlers in useCallbackevent-debounce-search- Debounce SearchBar onChangeTextevent-listitem-onpress- Pass item data correctlyevent-avoid-anonymous- Avoid anonymous functions in rendersevent-input-handlers- Configure Input handlers efficiently
8. Advanced Patterns (LOW)
adv-custom-component- Wrap RNE components correctlyadv-platform-specific- Handle platform-specific propsadv-makeStyles- Use makeStyles for theme-aware stylesadv-overlay-modal- Choose Overlay vs Modal correctlyadv-image-component- Configure Avatar ImageComponent for caching
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions - Category structure and impact levels
- Rule template - Template for adding new rules
Reference Files
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
More from pproenca/dot-skills
zod
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
2.0Kclean-architecture
Clean Architecture principles and best practices from Robert C. Martin's book. This skill should be used when designing software systems, reviewing code structure, or refactoring applications to achieve better separation of concerns. Triggers on tasks involving layers, boundaries, dependency direction, entities, use cases, or system architecture.
1.4Kemilkowal-animations
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
918vitest
Vitest testing framework patterns for test setup, async testing, mocking with vi.*, snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.
907typescript
This skill should be used when the user asks to "optimize TypeScript performance", "speed up tsc compilation", "configure tsconfig.json", "fix type errors", "improve async patterns", or encounters TS errors (TS2322, TS2339, "is not assignable to"). Also triggers on .ts, .tsx, .d.ts file work involving type definitions, module organization, or memory management. Does NOT cover TypeScript basics, framework-specific patterns, or testing.
821nuqs
nuqs (type-safe URL query state) best practices for Next.js applications. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, or Next.js routing with state.
735