A simple easy to use cross button, spinner, popOver(dropdown) and many other things in textInput (Android and iOS)
Getting started
- Step 1- npm install react-native-cross-button --save
- Step 2- npm install react-native-vector-icons --save
- Step 3- react-native link
- Step 4- Build your project and you are good to go.
Usage
import CrossTextInput from 'react-native-cross-button'
export default class CrossButtonExample extends Component {
constructor(props) {
super(props)
this.state = {
email: '',
name: '',
}
this.onEmailInputCleared = this.onEmailInputCleared.bind(this)
this.onNameInputCleared = this.onNameInputCleared.bind(this)
}
onEmailInputCleared() {
this.setState({ email: ''});
}
onNameInputCleared() {
this.setState({ name: ''});
}
render() {
return (
<View style = {styles.container}>
<CrossTextInput underlineColorAndroid="transparent" value = {this.state.email} style={styles.textInput} autoCorrect={false} autoCapitalize="none" keyboardType="email-address" placeholder={'EMAIL'} placeholderTextColor="#adadad" onChangeText={(text) => this.setState({ email: text })}
containerStyle= {{backgroundColor: 'green'}} onInputCleared={this.onEmailInputCleared} />
<CrossTextInput underlineColorAndroid="transparent" value = {this.state.name} style={styles.textInput} autoCorrect={false} autoCapitalize="none" keyboardType="email-address" placeholder={'NAME'} placeholderTextColor="#adadad" onChangeText={(text) => this.setState({ name: text })}
containerStyle= {{backgroundColor: 'red'}} onInputCleared={this.onNameInputCleared} />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
textInput: {
height: 40,
fontFamily: 'System',
fontSize: 12,
padding:10,
flex: 1
},
});
Properties
| Name | Type |
|---|---|
| autoCorrect | PropTypes.bool |
| keyboardType | TextInput.propTypes.keyboardType |
| multiline | PropTypes.bool |
| placeholderTextColor | PropTypes.string |
| returnKeyType | TextInput.propTypes.returnKeyType |
| selectTextOnFocus | PropTypes.bool |
| placeholder | PropTypes.string |
| editable | PropTypes.bool |
| autoCapitalize | PropTypes.bool |
| maxLength | PropTypes.number |
| multiline | PropTypes.bool |
| onEndEditing | PropTypes.func |
| onChange | PropTypes.func |
| value | PropTypes.string |
| onBlur | PropTypes.func |
| onChangeText | PropTypes.func |
| onFocus | PropTypes.func |
| hideCrossButton | PropTypes.bool |
| containerStyle | PropTypes.object |
| onInputCleared | PropTypes.func |
| crossButtonStyle | PropTypes.object |
| crossButtonSize | PropTypes.number |
| crossButtonColor | PropTypes.string |
| crossButtonName | PropTypes.string |
| isLoading | PropTypes.bool |
| hideProgress | PropTypes.bool |
| progressStyle | PropTypes.object |
| progressColor | PropTypes.string |
Todo list:-
-
Display popovers on pressing button or TextInput dropdown.
-
Multiple select dropdown.
-
Dynamic modals with animation
-
Add test
Author
Anoop Singh (codesingh)
Email: anoop100singh@gmail.com
Stack Overflow: codesingh(username)
License
MIT