{"id":15196,"library":"react-native-elements","title":"React Native UI Toolkit (renamed to @rneui/themed)","description":"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.","status":"renamed","version":"3.4.3","language":"javascript","source_language":"en","source_url":"https://github.com/react-native-elements/react-native-elements","tags":["javascript","react-native","reactjs","reactnative","bootstrap","typescript"],"install":[{"cmd":"npm install react-native-elements","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-elements","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-elements","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for icon support in many components.","package":"react-native-vector-icons","optional":false},{"reason":"Needed for components like Header to handle safe areas on modern devices.","package":"react-native-safe-area-context","optional":false}],"imports":[{"note":"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.","wrong":"import { Button } from 'react-native-elements';","symbol":"Button","correct":"import { Button } from '@rneui/themed';"},{"note":"Theming utilities were restructured in v4 and moved to `@rneui/themed`. `createTheme` is also a key utility for custom themes.","wrong":"import { ThemeProvider } from 'react-native-elements';","symbol":"ThemeProvider","correct":"import { createTheme, ThemeProvider } from '@rneui/themed';"},{"note":"React Native Elements (and `@rneui/themed`) are primarily designed for ES Module imports. CommonJS `require` should be avoided.","wrong":"const Icon = require('react-native-elements').Icon;","symbol":"Icon","correct":"import { Icon } from '@rneui/themed';"}],"quickstart":{"code":"import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { Button, createTheme, ThemeProvider, Avatar, Card } from '@rneui/themed';\n\nconst theme = createTheme({\n  components: {\n    Button: {\n      buttonStyle: {\n        backgroundColor: 'blue',\n        borderRadius: 10,\n      },\n      titleStyle: {\n        color: 'white',\n      },\n    },\n    Card: {\n      containerStyle: {\n        borderRadius: 15,\n        padding: 20,\n      }\n    }\n  },\n});\n\nfunction MyComponent() {\n  return (\n    <ThemeProvider theme={theme}>\n      <View style={styles.container}>\n        <Text style={styles.title}>Welcome to @rneui/themed!</Text>\n        <Button\n          title=\"Click Me!\"\n          onPress={() => console.log('Button pressed')}\n          containerStyle={styles.buttonContainer}\n        />\n        <Avatar\n          size=\"large\"\n          rounded\n          source={{ uri: 'https://randomuser.me/api/portraits/women/4.jpg' }}\n          title=\"LV\"\n          containerStyle={{ backgroundColor: 'grey', marginTop: 20 }}\n        />\n        <Card containerStyle={styles.cardContainer}>\n          <Card.Title>Hello Card</Card.Title>\n          <Card.Divider />\n          <Text>This is a custom themed card!</Text>\n        </Card>\n      </View>\n    </ThemeProvider>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#f5f5f5',\n    padding: 20,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    marginBottom: 30,\n    color: '#333',\n  },\n  buttonContainer: {\n    width: '80%',\n    marginVertical: 10,\n  },\n  cardContainer: {\n    width: '90%',\n    marginTop: 20\n  }\n});\n\nexport default MyComponent;\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Update your theme definition to wrap component styles within a `components` object. For example, `createTheme({ Button: { ... } })` becomes `createTheme({ components: { Button: { ... } } })`.","message":"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.","severity":"breaking","affected_versions":">=4.0.0-rc.6"},{"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.","message":"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.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"Incorrect peer dependency versions for `react-native-vector-icons` or `react-native-safe-area-context` can lead to build failures or runtime errors.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"Often related to missing `react-native-vector-icons` or issues with its linking, as RNE heavily relies on it for icons.","error":"Invariant Violation: 'main' has not been registered. This can happen if:"},{"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`.","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.","error":"Error: While resolving module `react-native-elements`, the package `react-native-elements` was found."},{"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.","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.","error":"TypeError: Cannot read property 'spacing' of undefined"}],"ecosystem":"npm"}