react-native-badge-input

React Native Badge Input

Modular badge input for React Native

Installation

yarn add react-native-badge-input

Usage

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}
    />
  )
}

Props

TextInput props...

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.