React Native Dropdown Autocomplete Textinput

Simple cross platform (Android/iOS) searchable and scrollable dropdown autocomplete textinput for React Native App!

Features

• Optimised stateless component
• Scroll to load flatlist
• Floating dropdown options

Installation

npm i react-native-dropdown-autocomplete-textinput --save

Examples

Minimal example

import Autocomplete from 'react-native-dropdown-autocomplete-textinput';

<View>
  <Autocomplete
    data={DATA}
    displayKey="name"
    placeholder={'Placeholder1'}
    onSelect={value => console.log('value', value)}
  />
</View>;

Using inside ScrollView with multiple Autocompletes

Note: When we want to use Autocomplete inside scrollable view we need to disable parent scroll when keyboard appears refer below code snippet

import React, {Component} from 'react';
import {
  View,
  KeyboardAvoidingView,
  ScrollView,
  SafeAreaView,
} from 'react-native';
import Autocomplete from 'react-native-dropdown-autocomplete-textinput';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      scroll: true,
    };
  }

  render() {
    return (
      <SafeAreaView
        style={{flex: 1, paddingTop: 70, backgroundColor: '#f0f0ef'}}>
        <ScrollView
          onKeyboardDidShow={() => this.setState({scroll: false})}
          onKeyboardDidHide={() => this.setState({scroll: true})}
          scrollEnabled={this.state.scroll}
          keyboardShouldPersistTaps="handled">
          <KeyboardAvoidingView>
            <Autocomplete
              data={DATA}
              displayKey="name"
              placeholder={'Placeholder1'}
              onSelect={value => console.warn('value', value)}
              maxHeight={200}
            />
            <View style={{marginTop: 200}}></View>
            <Autocomplete
              data={DATA}
              displayKey="name"
              placeholder={'Placeholder2'}
              isMandatory={true}
              onSelect={value => console.warn('value', value)}
            />
            <View style={{marginTop: 200}}></View>

            <Autocomplete
              data={DATA}
              displayKey="name"
              placeholder={'Placeholder3'}
              onSelect={value => console.warn('value', value)}
            />
          </KeyboardAvoidingView>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const DATA = [
  {code: 'AP', name: 'Andhra Pradesh'},
  {code: 'AR', name: 'Arunachal Pradesh'},
];

For complete implementation checkout app.js file.

Required Props

| Property | Type | Default | Description | | ---------- | -------- | --------- | ----------------------------------------------------- | | data | array | [] | array of objects | | displayKey | string | undefined | key of object to be displayed in the list | | onSelect | function | undefined | callback funtion on selection returns selected object |

Optional Props:

| Property | Type | Default | Description | | ----------------- | ------- | ---------- | ------------------------------------------- | | placeholder | string | undefined | placeholder string | | placeholderColor | string | undefined | placeholderColor string | | isMandatory | boolean | false | shows astreisk in case of mandatory field | | maxHeight | number | undefined | to set maximum height of dropdown list | | floatBottom | boolean | false | to always open dropdown below the textinput | | editable | boolean | true | to disable input | | dropDownIconColor | string | undefinned | to change dropdown image color | | dropDownImage | png | undefined | to set dropdown image | | textInputStyle | object | undefined | For textinput styling | | value | object | undefined | Can be used in case of controlled component |

Demo