react-native-autocomplete

react-native-autocomplete

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

Installation

• $ npm install react-native-autocomplete
• Right click on Libraries, select Add files to "…" and select node_modules/react-native-autocomplete/RCTAutoComplete.xcodeproj
• Select your project and under Build Phases -> Link Binary With Libraries, press the + and select libRCTAutoComplete.a.

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

event	Info
onTyping	Text is entered. The callback can be delayed with option autoCompleteFetchRequestDelay.
onSelect	A cell in the suggestions list is selected.
onFocus	Text input get focus.
onBlur	Text input lost focus.

Other events from Text Input are avalaible.

Global options

option	type	Info
cellComponent	string	Name of a React Native component used to render cells. If null, use the default rendering.
suggestions	array	If using default cell rendering specify an Array of string, otherwise any object.
autoCompleteFetchRequestDelay	number	Delay in milliseconds before retrieving suggestions.
maximumNumberOfAutoCompleteRows	number	Number of suggestions displayed.
showTextFieldDropShadowWhenAutoCompleteTableIsOpen	bool	Display a drop shadow around the text field.
autoCompleteTableViewHidden	bool	If true, the suggestions list will be hidden.
autoCompleteTableBorderColor	color	Set suggestions list border color.
autoCompleteTableBorderWidth	number	Set suggestions list border color.
autoCompleteTableBackgroundColor	color	Set suggestions list border size.
autoCompleteTableCornerRadius	number	Set suggestions list background color.
autoCompleteTableTopOffset	number	Set the distance between the text field and the suggestions list.
autoCompleteTableLeftOffset	number	Set the left offset between the container and the suggestions list.
autoCompleteTableSizeOffset	number	Set 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
autoCompleteRowHeight	number	Height of cells in the suggestions list.

Default cell rendering options

option	type	Info
autoCompleteFontSize	number	Font Size used to display text.
autoCompleteRegularFontName	string	Font used to display text.
autoCompleteBoldFontName	string	Font used to display suggestion text.
autoCompleteTableCellTextColor	color	Text Color used to display text.
autoCompleteTableCellBackgroundColor	color	Background color of cells.
applyBoldEffectToAutoCompleteSuggestions	bool	If false, disable bold effect on suggestion text.
reverseAutoCompleteSuggestionsBoldEffect	bool	Reverse the bold effect.

License

MIT © Nicolas Ulrich 2017