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. |