Navigate back to the homepage

React native autocomplete

Infinitbility
React Native
May 14th, 2021 · 1 min read
React native autocomplete

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.

1<TextInput
2 value={title}
3 label="Title*"
4 onChangeText={(text) => handleTitle(text)}
5 onFocus={() => setTitlesList(titles)}
6/>

FlatList

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

1<FlatList
2 data={titlesList}
3 style={{position: 'absolute', backgroundColor: '#FFF', zIndex: 1, top: '35%', width: '100%'}}
4 renderItem={({ item }) => (
5 <View style={{backgroundColor: '#FFF', width: '100%'}}>
6 <TouchableHighlight
7 style={styles.item}
8 onPress={() => {
9 setTitle(item.label);
10 setTitlesList([]);
11 }}>
12 <Text style={styles.rowText}>
13 {item.label}
14 </Text>
15 </TouchableHighlight>
16 <Divider style={{ backgroundColor: '#fafaFFA' }} />
17 </View>
18 )}
19 keyExtractor={(item, index) => index.toString()}
20/>

autocomplete style

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

1style={{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

1import React, { useState, useEffect } from 'react';
2import { Text, View, StyleSheet, FlatList, TouchableHighlight } from 'react-native';
3
4// or any pure javascript modules available in npm
5import { Divider, TextInput } from 'react-native-paper';
6
7export default function App() {
8
9 const [title, setTitle] = useState('');
10 const [titles, setTitles] = useState([
11 {
12 label: 'Marketing Coordinator',
13 value: 'MC',
14 },
15 {
16 label: 'Medical Assistant',
17 value: 'MA',
18 },
19 {
20 label: 'Web Designer',
21 value: 'WD',
22 },
23 {
24 label: 'Dog Trainer',
25 value: 'DT',
26 },
27 {
28 label: 'President of Sales',
29 value: 'POS',
30 },
31 {
32 label: 'Nursing Assistant',
33 value: 'NA',
34 },
35 {
36 label: 'Project Manager',
37 value: 'PM',
38 },
39 {
40 label: 'Librarian',
41 value: 'L',
42 },
43 ]);
44 const [titlesList, setTitlesList] = useState([]);
45
46 const handleTitle = (text) => {
47 let list = titles.filter((e) => e.label.toLowerCase().includes(text.toLowerCase()));
48 setTitle(text);
49 setTitlesList(list);
50 }
51
52 return (
53 <View style={styles.container}>
54 <TextInput
55 value={title}
56 label="Title*"
57 onChangeText={(text) => handleTitle(text)}
58 onFocus={() => setTitlesList(titles)}
59 />
60 <FlatList
61 data={titlesList}
62 style={{position: 'absolute', backgroundColor: '#FFF', zIndex: 1, top: '35%', width: '100%'}}
63 renderItem={({ item }) => (
64 <View style={{backgroundColor: '#FFF', width: '100%'}}>
65 <TouchableHighlight
66 style={styles.item}
67 onPress={() => {
68 setTitle(item.label);
69 setTitlesList([]);
70 }}>
71 <Text style={styles.rowText}>
72 {item.label}
73 </Text>
74 </TouchableHighlight>
75 <Divider style={{ backgroundColor: '#fafaFFA' }} />
76 </View>
77 )}
78 keyExtractor={(item, index) => index.toString()}
79 />
80 </View>
81 );
82}
83
84const styles = StyleSheet.create({
85 container: {
86 flex: 1,
87 paddingTop: 100,
88 backgroundColor: '#ecf0f1',
89 padding: 8,
90 },
91 item: {
92 justifyContent: 'center',
93 height: '20%',
94 },
95 rowText: {
96 color: '#000',
97 fontSize: 20,
98 marginStart: 20,
99 borderColor: '#FAFAFA'
100 },
101});

Output

React Native, Autocomplete

Subscribe Our Newsletter for the weekly update.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Tutorials

React Native

Categories

More articles from Infinitbility

SVN tutorial for ubuntu

SVN tutorial for ubuntu

how to setup svn and use in ubuntu

May 13th, 2021 · 1 min read
How to delete files on s3 bucket using aws cli

How to delete files on s3 bucket using aws cli

Delete files from s3 bucket using AWS CLI

May 12th, 2021 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]