Community React Native Elements Best Practices

When to Apply

• 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

setup-

theme-

comp-

list-

props-

style-

event-

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

• Section definitions - Category structure and impact levels
• Rule template - Template for adding new rules

Reference Files