| Aug | SEP | Oct |
| 27 | ||
| 2020 | 2021 | 2022 |
COLLECTED BY
Collection: Common Crawl
React Native Elements
3.4.2
●Next
●3.4.2
●2.3.2
●1.2.0
●All versions
DocumentationGitHubHelpBlog
🌜
🌞
React Native Elements
●It Starts Basic
●Getting Started
●Overview
●Customization
●Usage on the Web
●Troubleshooting
●Components
●Avatar
●Badge
●Bottom Sheet
●Button
●ButtonGroup
●Card
●CheckBox
●Chip
●Divider
●Floating Action Button
●Header
●Icon
●Image
●Input
●Linear Progress
●ListItem
●Overlay
●Pricing
●Rating
●SearchBar
●Slider
●SocialIcon
●Speed Dial
●Switch
●Tabs
●Text
●Tile
●Tooltip
●Universe Components
●Circular Slider
●Repo
●Contributing
●Testing
●Label Guide
value prop is provided. This form is
effective for showing statuses.
import { Text, View } from 'react-native'import { Avatar, Badge, Icon, withBadge } from 'react-native-elements'
// Standard badge<Badge value="99+" status="error" /><Badge value={<Text>My Custom Badge</Text>} />
// Mini badge<Badge status="success" /><Badge status="error" /><Badge status="primary" /><Badge status="warning" />
// Avatar with mini badge<View> <Avatar rounded source={{ uri: 'https://randomuser.me/api/portraits/men/41.jpg', }} size="large" />
<Badge status="success" containerStyle={{ position: 'absolute', top: -4, right: -4 }} /></View>
// withBadge HOC
const BadgedIcon = withBadge(1)(Icon)<BadgedIcon type="ionicon" name="ios-chatbubbles" />
// Using the decorator proposal@connect(state => ({ notifications: state.notifications,}))@withBadge(props => props.notifications.length)export default class MyDecoratedIcon extends React.Component { render() { return ( <Icon type="ionicon" name="md-cart" /> ); }}badgeStyle
●Component
●containerStyle
●onPress
●status
●textProps
●textStyle
●value
badgeStyle#
| Type | Default |
|---|---|
| View style (object) | Internal Style |
Component#
| Type | Default |
|---|---|
| React Native Component | View, if onPress then TouchableOpacity |
containerStyle#
| Type | Default |
|---|---|
| View style (object) | Internal Style |
onPress#
| Type | Default |
|---|---|
| function | none |
status#
| Type | Default |
|---|---|
primary, success, warning, error | primary |
textProps#
| Type | Default |
|---|---|
| Text props (object) | none |
textStyle#
| Type | Default |
|---|---|
| Text style (object) | Internal Style |
value#
| Type | Default |
|---|---|
| String OR Number OR React Native Component | none |
options
●value
options#
bottom#
| Type | Default |
|---|---|
| number (optional) | undefined |
left#
| Type | Default |
|---|---|
| number (optional) | undefined |
right#
| Type | Default |
|---|---|
| number (optional) | -16 (-3 with MiniBadge aka. without value) |
top#
| Type | Default |
|---|---|
| number (optional) | -1 (3 with MiniBadge) |
hidden#
| Type | Default |
|---|---|
| boolean (optional) | false |
containerStyle#
| Type | Default |
|---|---|
| View style (object) | Internal Style |
value#
| Type | Default |
|---|---|
| String OR Number OR React Native Component OR Function, which returns one of the former | none |
