pproenca/dot-skills/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

Quick Reference

1. Import & Setup (CRITICAL)

• `setup-themeprovider` - Wrap app with ThemeProvider for consistent theming
• `setup-imports` - Use @rneui/themed vs @rneui/base correctly
• `setup-createtheme` - Type-safe theme configuration with createTheme
• `setup-tree-shaking` - Enable proper tree-shaking for bundle size
• `setup-safe-area` - Configure SafeAreaProvider for notched devices

2. Theme Architecture (CRITICAL)

• `theme-usetheme-hook` - Access theme reactively with useTheme
• `theme-dark-mode` - Configure light/dark mode with createTheme
• `theme-component-defaults` - Set component defaults in theme
• `theme-updatetheme` - Runtime theme updates without remount
• `theme-color-scheme` - Sync with system color scheme
• `theme-custom-colors` - Extend theme with custom colors safely

3. Component Selection (HIGH)

• `comp-listitem-over-view` - Use ListItem for list rows
• `comp-input-over-textinput` - Use Input for form fields
• `comp-searchbar-platform` - Platform-specific SearchBar variants
• `comp-button-type` - Use Button type prop for variants
• `comp-icon-source` - Choose Icon type wisely for bundle size
• `comp-avatar-vs-image` - Use Avatar for profile images

4. List Performance (HIGH)

• `list-memo-items` - Memoize ListItem in FlatList
• `list-keyextractor` - Always provide keyExtractor
• `list-getitemlayout` - Use getItemLayout for fixed heights
• `list-renderitem-callback` - Extract renderItem with useCallback
• `list-windowsize` - Configure windowSize for memory balance
• `list-virtualized` - Use FlatList over ScrollView
• `list-removeClipped` - Configure removeClippedSubviews carefully

5. Props & Configuration (MEDIUM-HIGH)

• `props-loading-state` - Use loading prop for async operations
• `props-disabled-styling` - Configure disabledStyle for feedback
• `props-input-validation` - Use errorMessage for validation
• `props-icon-configuration` - Configure Icon props correctly
• `props-searchbar-loading` - Show loading state in SearchBar
• `props-button-color` - Use color prop for semantic colors

6. Styling Patterns (MEDIUM)

• `style-stylesheet` - Use StyleSheet.create over inline objects
• `style-containerStyle` - Use containerStyle for wrappers
• `style-usememo-dynamic` - Memoize dynamic styles
• `style-theme-colors` - Use theme colors over hardcoded values
• `style-component-props` - Prefer component-specific style props

7. Callbacks & Events (MEDIUM)

• `event-usecallback` - Wrap handlers in useCallback
• `event-debounce-search` - Debounce SearchBar onChangeText
• `event-listitem-onpress` - Pass item data correctly
• `event-avoid-anonymous` - Avoid anonymous functions in renders
• `event-input-handlers` - Configure Input handlers efficiently

8. Advanced Patterns (LOW)

• `adv-custom-component` - Wrap RNE components correctly
• `adv-platform-specific` - Handle platform-specific props
• `adv-makeStyles` - Use makeStyles for theme-aware styles
• `adv-overlay-modal` - Choose Overlay vs Modal correctly
• `adv-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