react-native-email-chip
A simple and customizable React Native component that implements email chips.
Demo
Installation
npm install react-native-email-chip
Example
import EmailChip from 'react-native-email-chip';
...
onChange = (emails) => {
this.setState({ emails })
}
...
<EmailChip
emails={this.state.emails}
onChange={this.onChange}
// placeholder="Enter email"
// placeholderTextColor="black"
// chipContainerStyle={{backgroundColor:'white'}}
// invalidChipContainerStyle={{backgroundColor:'red'}}
// chipTextStyle={{color:'#000'}}
// invalidChipTextStyle = {{color: 'white'}}
// textInputStyles={{borderBottomWidth: 0}}
/>
Props
Prop | Description | Type | Default |
---|---|---|---|
emails |
An array of email chips to be displayed | Array | Required |
onChange |
A handler to be called when array of email chips change. | Function | Required |
chipContainerStyle |
Styling override for container surrounding chip | Object | {{backgroundColor: '#d2d5dd'}} |
invalidChipContainerStyle |
Styling override for container surrounding invalid chip | Object | {{backgroundColor: '#CC2D22'}} |
chipTextStyle |
Styling override for chip text | Object | {{color: 'black'}} |
invalidChipTextStyle |
Styling override for invalid chip text | Object | {{color: 'white'}} |
textInputStyles |
Styling override for textinput | Object | {{borderBottomWidth : 1}} |
placeholder |
Custom placeholder text | String | "Enter email" |
placeholderTextColor |
Styling override for placeholder text color | String | "grey" |