/react-native-badge-input-updated

Modular badge input for React Native

Primary LanguageTypeScript

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.