Progressive Input

Screenshot

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

NameType
autoCorrectPropTypes.bool
keyboardTypeTextInput.propTypes.keyboardType
multilinePropTypes.bool
placeholderTextColorPropTypes.string
returnKeyTypeTextInput.propTypes.returnKeyType
selectTextOnFocusPropTypes.bool
placeholderPropTypes.string
editablePropTypes.bool
autoCapitalizePropTypes.bool
maxLengthPropTypes.number
multilinePropTypes.bool
onEndEditingPropTypes.func
onChangePropTypes.func
valuePropTypes.string
isLoadingPropTypes.bool
textInputStyleTextInput.propTypes.style
clearButtonIconPropTypes.string
clearButtonColorPropTypes.string
clearButtonSizePropTypes.number
clearButtonStylePropTypes.object
activityIndicatorStyleActivityIndicator.propTypes.style
onBlurPropTypes.func
onChangeTextPropTypes.func
onFocusPropTypes.func
onInputClearedPropTypes.func

Author

License

MIT