Progressive Input
Progressive Input is used as a part of autocomplete solution. The control has clear button to clear text and activity indicator to show that background job is being performed.
Getting started
$ npm install react-native-progressive-input --save
If you dont own the dependency react-native-vector-icons, please make sure you also run:
-
npm install react-native-vector-icons --save -
react-native link
on the terminal. This will add some necessary fonts and Info.plist updates on your xcode project.
Usage
import ProgressiveInput from 'react-native-progressive-input'; class Screen extends Component { constructor(props) { super(props); this.state = { value: '', isLoading: false }; } _onChangeText(text) { this.setState({isLoading: true, value: text}); fetch("YOUR_URL_FOR_GETTING_SUGGESTION") .then((result) => { // Process list of suggestions this.setState({isLoading: false}); }); } render() { <ProgressiveInput value={this.state.value} isLoading={this.state.isLoading} onChangeText={this._onChangeText.bind(this)} /> } } export default Screen;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 |
| isLoading | PropTypes.bool |
| textInputStyle | TextInput.propTypes.style |
| clearButtonIcon | PropTypes.string |
| clearButtonColor | PropTypes.string |
| clearButtonSize | PropTypes.number |
| clearButtonStyle | PropTypes.object |
| activityIndicatorStyle | ActivityIndicator.propTypes.style |
| onBlur | PropTypes.func |
| onChangeText | PropTypes.func |
| onFocus | PropTypes.func |
| onInputCleared | PropTypes.func |
Author
- Khai Le (Scott)
- Blog: lequangkhai.wordpress.com
License
MIT
