Hello Friends,

Welcome To Infinitbility!

This article provides an example to create autocomplete or suggestion list in react native, here we use FlatList and TextInput to make autocomplete textinput or suggestions textinput.

Let’s start today topic React native autocomplete Or how to add autocomplete in react native

TextInput

We are use React Native TextInput to search and change autocomplete list to suggest most match value, here textinput use to filter autocomplete list.

<TextInput
    value={title}
    label="Title*"
    onChangeText={(text) => handleTitle(text)}
    onFocus={() => setTitlesList(titles)}
/>

FlatList

we are use React Native FlatList to show list of title when user click and search on textinput.

<FlatList
    data={titlesList}
    style={{position: 'absolute', backgroundColor: '#FFF', zIndex: 1, top: '35%', width: '100%'}}
    renderItem={({ item }) => (
    <View style={{backgroundColor: '#FFF', width: '100%'}}>
        <TouchableHighlight
        style={styles.item}
        onPress={() => {
            setTitle(item.label);
            setTitlesList([]);
        }}>
        <Text style={styles.rowText}>
            {item.label}
        </Text>
        </TouchableHighlight>
        <Divider style={{ backgroundColor: '#fafaFFA' }} />
    </View>
    )}
    keyExtractor={(item, index) => index.toString()}
/>

autocomplete style

here we use some custom styles to show list below textinput when user search and click on textinput.

style={{position: 'absolute', backgroundColor: '#FFF', zIndex: 1, top: '35%', width: '100%'}}

React Native Autocomplete

Here, we are sharing complete source to make Autocomplete in React Native example with output.

Autocomplete.js

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, FlatList, TouchableHighlight } from 'react-native';

// or any pure javascript modules available in npm
import { Divider, TextInput } from 'react-native-paper';

export default function App() {

  const [title, setTitle] = useState('');
  const [titles, setTitles] = useState([
    {
      label: 'Marketing Coordinator',
      value: 'MC',
    },
    {
      label: 'Medical Assistant',
      value: 'MA',
    },
    {
      label: 'Web Designer',
      value: 'WD',
    },
    {
      label: 'Dog Trainer',
      value: 'DT',
    },
    {
      label: 'President of Sales',
      value: 'POS',
    },
    {
      label: 'Nursing Assistant',
      value: 'NA',
    },
    {
      label: 'Project Manager',
      value: 'PM',
    },
    {
      label: 'Librarian',
      value: 'L',
    },
  ]);
  const [titlesList, setTitlesList] = useState([]);

  const handleTitle = (text) => {
    let list = titles.filter((e) => e.label.toLowerCase().includes(text.toLowerCase()));
    setTitle(text);
    setTitlesList(list);
  }

  return (
    <View style={styles.container}>
      <TextInput
          value={title}
          label="Title*"
          onChangeText={(text) => handleTitle(text)}
          onFocus={() => setTitlesList(titles)}
        />
        <FlatList
          data={titlesList}
          style={{position: 'absolute', backgroundColor: '#FFF', zIndex: 1, top: '35%', width: '100%'}}
          renderItem={({ item }) => (
            <View style={{backgroundColor: '#FFF', width: '100%'}}>
              <TouchableHighlight
                style={styles.item}
                onPress={() => {
                  setTitle(item.label);
                  setTitlesList([]);
                }}>
                <Text style={styles.rowText}>
                  {item.label}
                </Text>
              </TouchableHighlight>
              <Divider style={{ backgroundColor: '#fafaFFA' }} />
            </View>
          )}
          keyExtractor={(item, index) => index.toString()}
        />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 100,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  item: {
    justifyContent: 'center',
    height: '20%',
  },
  rowText: {
    color: '#000',
    fontSize: 20,
    marginStart: 20,
    borderColor: '#FAFAFA'
  },
});

Output

React Native, Autocomplete

Thanks for reading…