/react-native-dropdown-autocomplete-textinput

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

Primary LanguageJavaScript

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