Epic React Native Chip

An elegant & fully customizable chip 🚀

Features

• 🌟 Full customizable.
• Smooth & faster animation.
• Support IOS and, Android.
• Compatible with Expo.
• Written in TypeScript.

Getting Started

For npm Type npm i epic-chip-react-native to install it on your project.

For yarn do yarn add epic-chip-react-native.

Important

Please install React Native Vector Icons npm i react-native-vector-icons @types/react-native-vector-icons.

Installation

Use npm or yarn to install the library

NPM: npm i epic-chip-react-native

Yarn: yarn add epic-chip-react-native

import { EpicChip } from 'epic-chip-react-native';

const App = () => {
  return <EpicChip labelOptions={{label: "Epic Chip"}} />;
}

export detault App;

Using Ref#

You can also toggle chip using ref hook.

import { EpicChip, EpicChipRef } from 'epic-chip-react-native';

const App = () => {

const EpicChipRef = useRef<EpicChipRef>(null);

  return (
    <>
        <EpicChip 
        ref={EpicChipRef} 
        labelOptions={{label: "Epic Chip"}} 
        onChange={e => console.log(e)} // print boolean;
        />
        
        </View style={{marginVertical: 30}}>
            <Button 
            onPress={()=> EpicChipRef.current?.toggleCheck()}>
            Toggle Chip
            </Button>
        </View> 
        
    </>
  );
}

export detault App;

Props

| name | description | required | type | default | | -------------------- | --------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- | -------- | | labelOptions | Chip label options includes [label, Icon]. | NO | [string or JSX Element] | | | options | Chip options, [chipStyles, labelStyles, backgroundColor, labelColor] | NO | chipStyles: StyleProp<ViewStyle>, labelStyles: StyleProp<TextStyle>, backgroundColor: {focusColor: #hexCode, inActiveColor: #hexCode}, labelColor: {focusColor: #hexCode, inActiveColor: #hexCode} | | | | type | Chip type | NO | Mini, Micro, Large | | | mode | Chip mode. | NO | Outlined, Solid | Outlined| | checkIcon | If you want to hide the checkmark icon, just make it false. | NO | boolean | false | | radius | Border Radius of the chip. | NO | number | 15 | | | isChecked | you can specify a default value. | NO | boolean| | | | isDisabled | For disabling the chip. | NO | 'boolean' | false | | checkedIcon | Changing the default check icon. | NO | React.ReactNode | | | onChange | Callback on item change | NO | (value: boolean) => void | | ref | ref hook toggleCheck() // void function | NO | | |

Author

• Abdullah Khan
• Saif Ali Khan

License

MIT

Liked the Component? 😇