react-native-progressive-input's Introduction

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