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 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

File Description

references/_sections.md Category definitions and ordering

assets/templates/_template.md Template for new rules

metadata.json Version and reference information