Registry / web-framework / react-native-elements

react-native-elements

library3.4.3jsnpmunverified

React Native Elements is a cross-platform UI toolkit providing a set of pre-built, customizable components for React Native applications. It aims to simplify the development of mobile interfaces by offering a consistent design language and a wide array of commonly used UI elements like buttons, cards, forms, and more. While this `react-native-elements` package is still available, it has been formally renamed to `@rneui/themed` starting with its v4 release. The current stable version for `react-native-elements` is 3.4.3, but the active development and new features are primarily happening under the `@rneui/themed` package, which is currently at v5.0.0. Developers are strongly encouraged to migrate to `@rneui/themed` for ongoing support, new features, and bug fixes, as this original package is considered deprecated and effectively in maintenance mode. Its key differentiators include comprehensive theming capabilities and a focus on ease of use with minimal boilerplate.

web-framework

npm install react-native-elements

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-ELEME

react-native-elements

web-frameworkjavascriptv3.4.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Button

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

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

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

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

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

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

Icon

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

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

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

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;

Debug

Known issues

breakingThe `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.

affects: >=4.0.0

breakingIn 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: { ... } } })`.

affects: >=4.0.0-rc.6

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

affects: >=5.0.0

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

affects: All versions

Errors

Common errors & fixes

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

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.

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

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.

Upgrade

Version history

3.4.3latest on npm

Audit

Dependencies

react-native-vector-iconsrequiredRequired for icon support in many components.

react-native-safe-area-contextrequiredNeeded for components like Header to handle safe areas on modern devices.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/react-native-elements/react-native-elements ↗

packagehttps://www.npmjs.com/package/react-native-elements ↗

homepagehttps://reactnativeelements.com ↗