Modular badge input for React Native
yarn add react-native-badge-input
import React, { useState } from 'react'
import BadgeInput from 'react-native-badge-input'
let Example = () => {
let [value, setValue] = useState('')
let [badges, setBadges] = useState([])
let addBadge = badge =>
setBadges([...badges, badge])
let removeBadge = removedBadge =>
setBadges(
badges.filter(badge => badge !== removedBadge)
)
return (
<BadgeInput
value={value}
onChangeText={setValue}
badges={badges}
onBadgePress={removeBadge}
onSubmitEditing={addBadge}
/>
)
}
name | required | default | description |
---|---|---|---|
value | yes | Current input value | |
onChangeText | yes | TextInput onchangeText | |
badges | yes | An array of badges | |
onBadgePress | yes | Badge on press action | |
placeholder | no | Input placeholder. | |
inputSuffix | no | Content rendered at the end of the input, for example an icon. | |
badgeStyle | no | Badge component style | |
inputProps | no | Props additionally passed to input. This is useful if you want to pass any styles that are overriden by the props object. | |
keyExtractor | no | () => string |
Badge key extractor. |
textExtractor | no | () => string |
Badge text extractor, required when your badge is not a string. |