react-native-dropdown-autocomplete-textinput v1.0.1

React Native 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

Optional Props: