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