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