Autocomplete text input with clear button and activity indicator

Overview

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

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

License

MIT

Comments
  • undefined is not an object (evaluating '_react2.PropTypes.oneOf')

    undefined is not an object (evaluating '_react2.PropTypes.oneOf')

    I'm currently experiencing an issue with this. undefined is not an object (evaluating '_react2.PropTypes.oneOf')

    I had linked thisreact-native-vector-icons package too.

    version: "react": "^16.0.0-rc.3", "react-native": "^0.48.3",

    How to resolve this?

    bug 
    opened by Balasnest 14
  • "react-native-progressive-input/index.js" threw an exception: TypeError: undeinfed is not an object ( evaluating '_react2.PropTypes.string')

    while updaing the expo version to , "expo": "^24.0.0", "react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",

    I got this error message:

    How can i fix this ?

    @EvanBacon

    image

    opened by jpca999 1
  • onInputCleared doesn't seem to work

    onInputCleared doesn't seem to work

    Great job on that autocomplete @khaiql

    It's been really easy to get it running. I only have one problem with the clear Input button. The icon appear when the value is not null like it should. However when I press the icon, the icon disappear but the text stays. It seems like the function passed as the prop onInputCleared is never called.

    I've been using bind on my context in my constructor like in your example:

      constructor(props) {
        super(props);
        //...
        this.onInputCleared = this.onInputCleared.bind(this);
      }
    

    And then on the component I've tried that way first:

                <ProgressiveInput
                  value={this.state.value}
                  style={styles.progressiveInput}
                  isLoading={this.state.isLoading}
                  onChangeText={(query) => this.searchLocation(query)}
                  onInputCleared={this.onInputCleared}
                />
    

    Then I've tried: onInputCleared={() => this.onInputCleared()} or onInputCleared={() { this.onInputCleared(); }}.

    None of these worked. Everything else works fine.

    opened by tquiroga 1
  • Implementation Example

    Implementation Example

    Awesome work!

    Could you please provide an example implementation? I've been trying to implement this but not having much luck. Something like the gif provided would be amazing.

    opened by nunsie 1
  • Update vector-icons to newest version.

    Update vector-icons to newest version.

    Hi. Could you update the dependencies to latest version (4.5.0) of vector-icons. Currently it brakes app if you use your package and newer version of vector-icons

    opened by tokict 0
  • Fix for Android devices where the TextInput has an underline

    Fix for Android devices where the TextInput has an underline

    The TextBox input for the Android environment shows an underline, which does not look good.

    This fix is to add a prop to ProgressiveInput called underlineColorAndroid which passes it to the underlineColorAndroid prop of TextInput. This will have a default value of 'transparent' if the prop is not specified.

    opened by jaeyow 0
  • Added prop 'clearButtonEnabled'

    Added prop 'clearButtonEnabled'

    This prop allows the component to be used without the clearButton. With 'clearButtonEnabled' set to true, none of the other clearButton props will be used (since the clearButton will not be rendered).

    opened by jomla97 2
Releases(1.0.3)
Owner
Scott Le
See my blog: https://lequangkhai.wordpress.com/
Scott Le
keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

Abhiram K 26 Aug 29, 2022
A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

Paúl 22 Aug 4, 2022
React Native button component. Awesome Button is a 3D at 60fps, progress enabled, social ready, extendable, production ready component that renders an awesome animated set of UI buttons. 📱

React Native <AwesomeButton /> react-native-really-awesome-button is a performant, extendable, production ready React Native component that renders an

Rafael Caferati 1.1k Sep 24, 2022
Pure javascript autocomplete input for react-native

react-native-autocomplete-input A pure JS autocomplete component for React Native. Use this component in your own projects or use it as inspiration to

Laurence Bortfeld 728 Sep 27, 2022
A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.

react-native-step-indicator A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView. Features Can be

Arkit 1.3k Sep 21, 2022
Parse text and make them into multiple React Native Text elements

React Native Parsed Text This library allows you to parse a text and extract parts using a RegExp or predefined patterns. Currently there are 3 predef

TaskRabbit 1.1k Sep 25, 2022
Text input mask for React Native, Android and iOS

react-native-text-input-mask Text input mask for React Native on iOS and Android. Examples Setup npm install --save react-native-text-input-mask # --

null 1.1k Sep 24, 2022
Text input mask for React Native on iOS and Android.

Text input mask for React Native, Android and iOS

null 1.1k Sep 13, 2022
react-native-card-data-input - just another credit card input package

react-native-card-data-input - just another credit card input package

Erick Estevão Riva Pramio 6 Oct 25, 2021
A FAB button component for Android and iOS, customizable, simple and as per material design specs.

react-native-fab A FAB button component for Android and iOS, customizable, simple and as per material design specs. See Google Material Design for mor

Swapnil Devesh 74 Jun 22, 2022
Simple and flexible Radio button for React Native App

React Native Flexi Radio Button Simple and flexible Radio button for React Native App Installation npm i react-native-flexi-radio-button --save Usage

Watcharachai Kanjaikaew 156 Mar 22, 2022
Animated Submit button. Works on both android and ios.

react-native-submit-button An Animated Submit Button. Works on both android and IOS. folds when in progress expands back when its ready Inspiration ht

Ronak Kothari 124 May 27, 2022
A lightweight, customizable and haptic Gradient Button component for React Native

React Native Gradient Buttons Lightweight, customizable and haptic Gradient Buttons for React Native. Requirements Requires React and React Native. Fo

Thomas Wang 183 Sep 26, 2022
Fully customizable, Gradient, Outline and Solid Button for React Native.

Installation Add the dependency: React Native npm i @freakycoder/react-native-button Peer Dependencies IMPORTANT! You need install them "react-native-

FreakyCoder 34 Jun 17, 2022
customizable multi-action-button component for react-native

react-native-action-button customizable multi-action-button component for react-native Known Issues Doesn't Work While Android Debugging. See issue #7

Yousef Kama 2.4k Sep 23, 2022
A button for React apps

react-native-button A button for React apps Usage Install the button from npm with npm install react-native-button --save. Then, require it from your

James Ide 765 Sep 8, 2022
A React Native button component customizable via props

apsl-react-native-button A React Native button component customizable via style props. Renders a TouchableOpacity under iOS and a TouchableNativeFeedb

APSL 750 Sep 12, 2022
A Beautiful, Customizable React Native Button component for iOS & Android

React Native Button component React Native Button component for iOS & Android. Provided Components This library provided the following button componen

Jack Lam 532 Aug 24, 2022
[DEPRECATED] A Radio-button like logic wrapper for React Native

react-native-radio-buttons IMPORTANT this package is deprecated and no longer maintained in favor of the official SegmentedControlIOS component. A rea

Arnaud Rinquin 417 Apr 12, 2022