Home Original page

GitHub - nulrich/RCTAutoComplete: React Native Component for MLPAutoCompleteTextField

react-native-autocomplete

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

Demo gif

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