Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-native-material-chip with all npm packages installed. Try it out:

var reactNativeMaterialChip = require("react-native-material-chip")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-material-chip v1.0.2

React native material chip

React native material chip

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

Examples

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

PropTypeDefault
textstring
checkedbooleanfalse
onPressfunctionnull
leftIconelementnull
rightIconelementnull
onDeletefunctionnull

Constants

PropTypeValue
CHIP_HEIGHTnumber32dp
CHIP_RADIUSnumber16dp
CHIP_MARGINnumber14dp
CHIP_TEXT_SIZEnumber14dp
CHIP_TEXT_MARGINnumber16dp
CHIP_LEFT_ICON_SIZEnumber24dp
CHIP_LEFT_ICON_RADIUSnumber12dp
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free