Home

Awesome

react-native-autocomplete

MLPAutoCompleteTextField (iOS only) wrapper for React Native, supports React Native custom cells 🎨.

Demo gif

Installation

Facebook documentation

Usage

For example download Country list

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View, AlertIOS } from "react-native";

import AutoComplete from "react-native-autocomplete";
import Countries from "./countries.json";

const styles = StyleSheet.create({
  autocomplete: {
    alignSelf: "stretch",
    height: 50,
    margin: 10,
    marginTop: 50,
    backgroundColor: "#FFF",
    borderColor: "lightblue",
    borderWidth: 1
  },
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF"
  }
});

class RCTAutoCompleteApp extends Component {
  state = { data: [] };

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

  onTyping(text) {
    const countries = Countries.filter(country =>
      country.name.toLowerCase().startsWith(text.toLowerCase())
    ).map(country => country.name);

    this.setState({ data: countries });
  }

  onSelect(value) {
    AlertIOS.alert("You choosed", value);
  }

  render() {
    return (
      <View style={styles.container}>
        <AutoComplete
          style={styles.autocomplete}
          suggestions={this.state.data}
          onTyping={this.onTyping}
          onSelect={this.onSelect}
          placeholder="Search for a country"
          clearButtonMode="always"
          returnKeyType="go"
          textAlign="center"
          clearTextOnFocus
          autoCompleteTableTopOffset={10}
          autoCompleteTableLeftOffset={20}
          autoCompleteTableSizeOffset={-40}
          autoCompleteTableBorderColor="lightblue"
          autoCompleteTableBackgroundColor="azure"
          autoCompleteTableCornerRadius={8}
          autoCompleteTableBorderWidth={1}
          autoCompleteFontSize={15}
          autoCompleteRegularFontName="Helvetica Neue"
          autoCompleteBoldFontName="Helvetica Bold"
          autoCompleteTableCellTextColor={"dimgray"}
          autoCompleteRowHeight={40}
          autoCompleteFetchRequestDelay={100}
          maximumNumberOfAutoCompleteRows={6}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent("RCTAutoCompleteApp", () => RCTAutoCompleteApp);

Custom Cell

You can use a React Native component to render the cells.

import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  AlertIOS
} from "react-native";

import AutoComplete from "react-native-autocomplete";
import Countries from "./countries.json";

const flag = code =>
  `https://raw.githubusercontent.com/hjnilsson/country-flags/master/png250px/${
    code
  }.png`;

const styles = StyleSheet.create({
  autocomplete: {
    alignSelf: "stretch",
    height: 50,
    margin: 10,
    marginTop: 50,
    backgroundColor: "#FFF",
    borderColor: "lightblue",
    borderWidth: 1
  },
  cell: {
    flex: 1,
    borderWidth: 1,
    borderColor: "lightblue",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  cellText: {
    flex: 1,
    marginLeft: 10
  },
  image: {
    width: 20,
    height: 20,
    marginLeft: 10
  },
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF"
  }
});

const CustomCell = ({ data }) => (
  <View style={styles.cell}>
    <Image source={{ uri: flag(data.code) }} style={styles.image} />
    <Text style={styles.cellText}>{data.country}</Text>
  </View>
);

class RCTAutoCompleteApp extends Component {
  state = { data: [] };

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

  onTyping(text) {
    const countries = Countries.filter(country =>
      country.name.toLowerCase().startsWith(text.toLowerCase())
    ).map(country => {
      return { country: country.name, code: country.code.toLowerCase() };
    });

    this.setState({ data: countries });
  }

  onSelect(json) {
    AlertIOS.alert("You choosed", json.country);
  }

  render() {
    return (
      <View style={styles.container}>
        <AutoComplete
          style={styles.autocomplete}
          cellComponent="CustomCell"
          suggestions={this.state.data}
          onTyping={this.onTyping}
          onSelect={this.onSelect}
          placeholder="Search for a country"
          clearButtonMode="always"
          returnKeyType="go"
          textAlign="center"
          clearTextOnFocus
          autoCompleteTableTopOffset={10}
          autoCompleteTableLeftOffset={20}
          autoCompleteTableSizeOffset={-40}
          autoCompleteTableBorderColor="lightblue"
          autoCompleteTableBackgroundColor="azure"
          autoCompleteTableCornerRadius={8}
          autoCompleteTableBorderWidth={1}
          autoCompleteRowHeight={40}
          autoCompleteFetchRequestDelay={100}
          maximumNumberOfAutoCompleteRows={6}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent("CustomCell", () => CustomCell);
AppRegistry.registerComponent("RCTAutoCompleteApp", () => RCTAutoCompleteApp);

Events

eventInfo
onTypingText is entered. The callback can be delayed with option autoCompleteFetchRequestDelay.
onSelectA cell in the suggestions list is selected.
onFocusText input get focus.
onBlurText input lost focus.

Other events from Text Input are avalaible.

Global options

optiontypeInfo
cellComponentstringName of a React Native component used to render cells. If null, use the default rendering.
suggestionsarrayIf using default cell rendering specify an Array of string, otherwise any object.
autoCompleteFetchRequestDelaynumberDelay in milliseconds before retrieving suggestions.
maximumNumberOfAutoCompleteRowsnumberNumber of suggestions displayed.
showTextFieldDropShadowWhenAutoCompleteTableIsOpenboolDisplay a drop shadow around the text field.
autoCompleteTableViewHiddenboolIf true, the suggestions list will be hidden.
autoCompleteTableBorderColorcolorSet suggestions list border color.
autoCompleteTableBorderWidthnumberSet suggestions list border color.
autoCompleteTableBackgroundColorcolorSet suggestions list border size.
autoCompleteTableCornerRadiusnumberSet suggestions list background color.
autoCompleteTableTopOffsetnumberSet the distance between the text field and the suggestions list.
autoCompleteTableLeftOffsetnumberSet the left offset between the container and the suggestions list.
autoCompleteTableSizeOffsetnumberSet the offset of the suggestions list size. Combined with autoCompleteTableLeftOffset, you can reduce the width of the suggestions list and to center it. Exemple: autoCompleteTableLeftOffset=20 autoCompleteTableSizeOffset=40
autoCompleteRowHeightnumberHeight of cells in the suggestions list.

Default cell rendering options

optiontypeInfo
autoCompleteFontSizenumberFont Size used to display text.
autoCompleteRegularFontNamestringFont used to display text.
autoCompleteBoldFontNamestringFont used to display suggestion text.
autoCompleteTableCellTextColorcolorText Color used to display text.
autoCompleteTableCellBackgroundColorcolorBackground color of cells.
applyBoldEffectToAutoCompleteSuggestionsboolIf false, disable bold effect on suggestion text.
reverseAutoCompleteSuggestionsBoldEffectboolReverse the bold effect.

License

MIT © Nicolas Ulrich 2017