React native material chip

React Native component for Anroid and iOS inspired by Material Design Chip

Installing

Install react-native-material-chip:

yarn add react-native-material-chip
or
npm install react-native-material-chip

Usage

import React from 'react'
import MaterialChip from "react-native-material-chip"

const BasicExample = () => {
    return (
        <MaterialChip
            text="Example"
            checked={true}
            onPress={() => console.log('press')}
            onDelete={() => console.log('delete')}
            textStyle={{color: 'rgba(0, 0, 0, 0.87)'}}
            leftIcon={
                <View
                    style={{
                        height: MaterialChip.CHIP_LEFT_ICON_SIZE,
                        width: MaterialChip.CHIP_LEFT_ICON_SIZE,
                        borderRadius: MaterialChip.CHIP_RADIUS,
                        backgroundColor: 'rgba(252,0,0,1)',
                        borderWidth: 0
                    }}
                />
            }
            rightIcon={
                <View
                    style={{
                        height: MaterialChip.CHIP_RIGHT_ICON_SIZE,
                        width: MaterialChip.CHIP_RIGHT_ICON_SIZE,
                        borderRadius: MaterialChip.CHIP_RIGHT_ICON_RADIUS,
                        backgroundColor: 'rgba(252,0,0,1)',
                        borderWidth: 0
                    }}
                />
            }
        />    
    )
}

export default BasicExample

<MaterialChip /> component api

Props

The component extents the ViewProperties

Prop	Type	Default
text	string
checked	boolean	false
onPress	function	null
leftIcon	element	null
rightIcon	element	null
onDelete	function	null
textStyle	object	null

Constants

Prop	Type	Value
CHIP_HEIGHT	number	32dp
CHIP_RADIUS	number	16dp
CHIP_MARGIN	number	14dp
CHIP_TEXT_SIZE	number	14dp
CHIP_TEXT_MARGIN	number	16dp
CHIP_LEFT_ICON_SIZE	number	24dp
CHIP_LEFT_ICON_RADIUS	number	12dp