[React Native] RN - 검색 자동 완성 기능 구현하기

안녕하세요.

 

이번시간에는 검색 할 때 글자가 자동 완성 되는 기능에 대해서 알아보도록 하겠습니다.

 

어렵지 않게 간단하게 정리해 보았습니다.

 

 

설치

npm install --save react-native-autocomplete-dropdown

or (또는)

yarn add react-native-autocomplete-dropdown

아이콘 설치

yarn add react-native-vector-icons

패키지 가져오기

import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'

예제 데이터

const [selectedItem, setSelectedItem] = useState(null)

<AutocompleteDropdown
  clearOnFocus={false}
  closeOnBlur={true}
  closeOnSubmit={false}
  initialValue={{ id: '2' }} // or just '2'
  onSelectItem={setSelectedItem}
  dataSet={[
    { id: '1', title: 'Alpha' },
    { id: '2', title: 'Beta' },
    { id: '3', title: 'Gamma' },
  ]}
/>

전체 테스트 코드

import {StyleSheet, Text, View} from 'react-native';
import React, {useState} from 'react';
import {AutocompleteDropdown} from 'react-native-autocomplete-dropdown';

export default function App() {
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <View>
      <AutocompleteDropdown
        clearOnFocus={false}
        closeOnBlur={true}
        closeOnSubmit={false}
        // initialValue={{id: '0'}} // or just '2'
        onSelectItem={setSelectedItem}
        dataSet={[
          {id: '1', title: 'Alpha'},
          {id: '2', title: 'Beta'},
          {id: '3', title: 'Gamma'},
          {id: '4', title: 'View'},
          {id: '5', title: 'Blue'},
          {id: '6', title: 'Red'},
          {id: '7', title: 'Green'},
          {id: '8', title: 'White'},
          {id: '9', title: 'Gold'},
        ]}  
      />
    </View>
  );
}

const styles = StyleSheet.create({});

작업 결과

 

더욱 세부적으로 코드 작업을 진행하시려면 아래 링크에 접속하시면 됩니다.

https://github.com/onmotion/react-native-autocomplete-dropdown

GitHub - onmotion/react-native-autocomplete-dropdown: Dropdown Item picker with search and autocomplete (typeahead) functionalit