Skip to content

gayathrithedev/react-native-chip-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 

Repository files navigation

React Native Chip Input

This is like material ui chip input for react native.

How it work

Props

All React Native TextInput props are acceptable as it is.

Name Type Usage
variant contained outlined By default the chip variant is outlined
inputVariant contained outlined standard By default TextInput variant is outlined
size large medium small By default the chip size is medium
showChipIcon true false By default it is false
iconName close By default it has icon name value as close. It accepts all material design icons
chipIconAction function By default it perform delete action. You can pass your own actions
primaryColor string hex Acts based upon chip variant
secondaryColor string hex Acts based upon chip variant
inputStyle * Accepts style object as parameter for TextInput style
placeholderStyle * Accepts style object for placeholder in TextInput
inputTextStyle * Accepts style object for input value in TextInput

Example

import React from 'react';
import ReactNativeChipInput from 'react-native-chip-input';

const App = () => {
  return (
          <ReactNativeChipInput
            variant="contained"
            inputVarint="outlined"
            showChipIcon={true}
            chipIconAction={e => console.log(e)}
            label="email"
            placeholder="email"
            primaryColor="#1976d2"
            secondaryColor="#ffffff"
            autoCapitalize="none"
            autoCorrect={false}
            autoFocus={true}
          />
         );
   }
 export default App;

About

This is like material-ui-chip-input library

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published