React Native UI Toolkit (renamed to @rneui/themed)

Common errors

• Invariant Violation: 'main' has not been registered. This can happen if:

  cause Often related to missing `react-native-vector-icons` or issues with its linking, as RNE heavily relies on it for icons.
  fix Ensure `react-native-vector-icons` is correctly installed and linked. For React Native versions 0.60+, `react-native link` is often not required, but manual steps might be needed for some setups. Clean your build cache (`npm start -- --reset-cache`) and reinstall dependencies.

• Error: While resolving module `react-native-elements`, the package `react-native-elements` was found.

  cause Attempting to import from `react-native-elements` when the project has been migrated to `@rneui/themed`, or vice-versa, leading to module resolution conflicts.
  fix Standardize on either `react-native-elements` (for older projects) or, preferably, `@rneui/themed` (for current projects). Ensure all imports across your codebase are consistent with the chosen package. Remove the unused package from `node_modules` and `package.json`.

• TypeError: Cannot read property 'spacing' of undefined

  cause This error can occur in v4.x when a component expects theme spacing values but is used outside of a `ThemeProvider` or the theme is improperly configured, especially after the theme structure change in v4.0.0-rc.6.
  fix Ensure your application is wrapped in a `ThemeProvider` from `@rneui/themed`. If you have a custom theme, verify its structure, particularly the `components` object for defining component-specific styles, as the theme structure changed in newer `v4` releases.

Warnings

• breaking The `react-native-elements` package has been renamed to `@rneui/themed` starting with v4.0.0. All future development, bug fixes, and features will primarily be released under the new package name. Continuing to use `react-native-elements` means missing out on updates and potentially encountering unaddressed issues.
  Fix: Migrate your project to use `@rneui/themed` package. Follow the migration guide available on the official documentation site (reactnativeelements.com/migration/migration-v3). This involves uninstalling `react-native-elements` and installing `@rneui/themed`, then updating import paths throughout your codebase.
• breaking In v4.0.0-rc.6, the `ThemeProvider` default component theme structure was restructured. Custom themes defined with the old structure will no longer apply correctly.
  Fix: Update your theme definition to wrap component styles within a `components` object. For example, `createTheme({ Button: { ... } })` becomes `createTheme({ components: { Button: { ... } } })`.
• breaking React Native Elements v5.0.0 introduced significant changes, particularly migrating the `Button` component to use React Native's `Pressable`. This may introduce behavior changes or require adjustments, especially for specific props or custom interactions that relied on the previous implementation.
  Fix: Review the `Button` component's behavior after upgrading to v5.0.0. Test extensively, especially on Android, and refer to the v5 release notes for any specific prop changes or recommendations regarding `Pressable` integration.
• gotcha Incorrect peer dependency versions for `react-native-vector-icons` or `react-native-safe-area-context` can lead to build failures or runtime errors.
  Fix: Ensure that `react-native-vector-icons` and `react-native-safe-area-context` are installed and their versions meet the requirements specified in the peer dependencies of `@rneui/themed` (or `react-native-elements` for older projects). Use `npm install react-native-vector-icons react-native-safe-area-context` and verify versions.

Install

• npm install react-native-elements npm
• yarn add react-native-elements yarn
• pnpm add react-native-elements pnpm

Imports

• Button
  wrong:

  import { Button } from 'react-native-elements';

  correct:

  import { Button } from '@rneui/themed';

  Since v4, the package was renamed to `@rneui/themed`. All components should be imported from the new package. The old package `react-native-elements` is effectively deprecated.
• ThemeProvider
  wrong:

  import { ThemeProvider } from 'react-native-elements';

  correct:

  import { createTheme, ThemeProvider } from '@rneui/themed';

  Theming utilities were restructured in v4 and moved to `@rneui/themed`. `createTheme` is also a key utility for custom themes.
• Icon
  wrong:

  const Icon = require('react-native-elements').Icon;

  correct:

  import { Icon } from '@rneui/themed';

  React Native Elements (and `@rneui/themed`) are primarily designed for ES Module imports. CommonJS `require` should be avoided.

Quickstart

This quickstart demonstrates how to set up `ThemeProvider` with a custom theme and use `Button`, `Avatar`, and `Card` components from `@rneui/themed` (the successor to react-native-elements). It showcases basic component usage and theming.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Button, createTheme, ThemeProvider, Avatar, Card } from '@rneui/themed';

const theme = createTheme({
  components: {
    Button: {
      buttonStyle: {
        backgroundColor: 'blue',
        borderRadius: 10,
      },
      titleStyle: {
        color: 'white',
      },
    },
    Card: {
      containerStyle: {
        borderRadius: 15,
        padding: 20,
      }
    }
  },
});

function MyComponent() {
  return (
    <ThemeProvider theme={theme}>
      <View style={styles.container}>
        <Text style={styles.title}>Welcome to @rneui/themed!</Text>
        <Button
          title="Click Me!"
          onPress={() => console.log('Button pressed')}
          containerStyle={styles.buttonContainer}
        />
        <Avatar
          size="large"
          rounded
          source={{ uri: 'https://randomuser.me/api/portraits/women/4.jpg' }}
          title="LV"
          containerStyle={{ backgroundColor: 'grey', marginTop: 20 }}
        />
        <Card containerStyle={styles.cardContainer}>
          <Card.Title>Hello Card</Card.Title>
          <Card.Divider />
          <Text>This is a custom themed card!</Text>
        </Card>
      </View>
    </ThemeProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    color: '#333',
  },
  buttonContainer: {
    width: '80%',
    marginVertical: 10,
  },
  cardContainer: {
    width: '90%',
    marginTop: 20
  }
});

export default MyComponent;