{"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.","language":"javascript","status":"renamed","last_verified":"Tue Apr 21","install":{"commands":["npm install react-native-elements"],"cli":null},"imports":["import { Button } from '@rneui/themed';","import { createTheme, ThemeProvider } from '@rneui/themed';","import { Icon } from '@rneui/themed';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}