ashking / react-native-tag-select

🏷 A simple tag component to act as radio button / checkbox

react-native-tag-select

A simple tag component to act as radio button / checkbox

Features

• Suports Array of objects or array of strings
• Support max itens selected
• Built in themes
• Plain simple and flexible API

Demo

You can try on expo: https://exp.host/@rafaelmotta021/react-native-tag-select-demo

or just check the image bellow:

Setup

yarn add react-native-tag-select

or

npm install --save react-native-tag-select

Usage

import React from 'react';
import {
  View,
  StyleSheet,
  Button,
  Alert,
  Text,
} from 'react-native';

import { TagSelect } from 'react-native-tag-select';

export default class App extends React.Component {
  render() {
    const data = [
      { id: 1, label: 'Money' },
      { id: 2, label: 'Credit card' },
      { id: 3, label: 'Debit card' },
      { id: 4, label: 'Online payment' },
      { id: 5, label: 'Bitcoin' },
    ];

    return (
      <View style={styles.container}>
        <Text style={styles.labelText}>Payment:</Text>
        <TagSelect
          data={data}
          max={3}
          ref={(tag) => {
            this.tag = tag;
          }}
          onMaxError={() => {
            Alert.alert('Ops', 'Max reached');
          }}
        />
        <View style={styles.buttonContainer}>
          <View style={styles.buttonInner}>
            <Button
              title="Get selected count"
              style={styles.button}
              onPress={() => {
                Alert.alert('Selected count', `Total: ${this.tag.totalSelected}`);
              }}
            />
          </View>
          <View>
            <Button
              title="Get selected"
              onPress={() => {
                Alert.alert('Selected items:', JSON.stringify(this.tag.itemsSelected));
              }}
            />
          </View>
        </View>
        <Text style={styles.labelText}>With custom style:</Text>
        <TagSelect
          data={data}
          itemStyle={styles.item}
          itemLabelStyle={styles.label}
          itemStyleSelected={styles.itemSelected}
          itemLabelStyleSelected={styles.labelSelected}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFF',
    marginTop: 50,
    marginLeft: 15,
  },
  buttonContainer: {
    padding: 15,
  },
  buttonInner: {
    marginBottom: 15,
  },
  labelText: {
    color: '#333',
    fontSize: 15,
    fontWeight: '500',
    marginBottom: 15,
  },
  item: {
    borderWidth: 1,
    borderColor: '#333',    
    backgroundColor: '#FFF',
  },
  label: {
    color: '#333'
  },
  itemSelected: {
    backgroundColor: '#333',
  },
  labelSelected: {
    color: '#FFF',
  },
});

Demo

You can customized the look and feel of this library the way you want, but, if you prefer, we ship 6 themes for you:

• default
• inverse
• success
• info
• danger
• warning

Available props

Name	Type	Default	Description
value	array	[]	Array with pre-defined values
data	array	[]	Data to render
labelAttr	string	'label'	Key attribute name to render label text, if the data props is an array of objects
keyAttr	string	'id'	Key attribute name to render key property to the list, if the data props is an array of objects
max	number	null	Max itens permitted
onMaxError	func	null	Callback after user reach max itens
onItemPress	func	null	Callback after user press on item
theme	string	'default'	Default theme inspired on bootstrap colors. You can check the options available above
containerStyle	any	{}	Style of the list container
itemStyle	any	{}	Style of item container
itemStyleSelected	any	{}	Style of item container selected
itemLabelStyle	any	{}	Style of item label
itemLabelStyleSelected	any	{}	Style of item label selected

Methods

To access tag select methods you must get the ref property first.

• Get the number of itens selected. Returns a boolean.

this.ref.totalSelected

• Get itens selected. Returns an array.

this.ref.itemsSelected