rn-autocomplete v4.0.2

rn-autocomplete

BASED ON mrlaessig/react-native-autocomplete-input

A pure JS autocomplete component for React Native. Use this component in your own projects or use it as inspiration to build your own autocomplete.

How to use rn-autocomplete

Tested with RN >= 0.26.2. If you want to use RN < 0.26 try to install rn-autocomplete <= 0.0.5.

Installation

$ npm install --save rn-autocomplete

or install HEAD from github.com:

$ npm install --save tagkiller/rn-autocomplete

Example

// ...

render() {
  const { query } = this.state;
  const data = this._filterData(query)
  return (<Autocomplete
    data={data}
    defaultValue={query}
    onChangeText={text => this.setState({ query: text })}
    renderItem={item => (
      <TouchableOpacity onPress={() => this.setState({ query: item })}>
        <Text>{item}</Text>
      </TouchableOpacity>
    )}
  />);
}

// ...

A complete example for Android and iOS can be found here.

Android

Android does not support overflows (#20), for that reason it is necessary to wrap the autocomplete into a absolute positioned view on Android. This will allow the suggestion list to overlap other views inside your component.

//...

render() {
  return(
    <View>
      <View style={styles.autocompleteContainer}>
        <Autocomplete {/* your props */} />
      </View>
      <View>
        <Text>Some content</Text>
      </View>
    </View>
  );
}

//...

const styles = StyleSheet.create({
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: 1
  }
});

Props

Known issues

• By default the autocomplete will not behave as expected inside a <ScrollView />. Set the scroll view's prop to fix this: keyboardShouldPersistTaps={true} for RN <= 0.39, or keyboardShouldPersistTaps='always' for RN >= 0.40. (#5).
• If you want to test with Jest add jest.mock('react-native-autocomplete-input', () => 'Autocomplete'); to your test.

Contribute

Feel free to open issues or do a PR!