react-native-TextInput-Addons

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.bool | | onInputCleared | PropTypes.func |

Todo list:-

• Custom Cross Button Icon

• Custom styling of Cross Button

• Integrate Spinner inside TextInput with alignment on left as well as right.

• Display popovers on pressing button or TextInput dropdown.

• Multiple select dropdown.

• Dynamic modals with animation

• Add test

Author

Anoop Singh (codesingh)
Email: [email protected]
Stack Overflow: codesingh(username)

License

MIT