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