[자동완성검색] UI Kitten Autocomplete 사용하기 / 기본편

 

✔️ 필요성

react-native-autocomplete-dropdown도 충분히 좋은 라이브러리인데 renderItem method를 사용해서 그릴 경우 autocomplete이 안되는 충격적인 에러가 있어서 급하게 UI Kitten에서 제공하는 것으로 갈아탔다

 

 

[자동완성검색] react-native-autocomplete-dropdown 사용하기

 

 

UI Kitten - React Native UI Library based on Eva Design System

 

제공하는 Example을 보면 기능이나 디자인이 나쁘지 않다

 

 

✔️ 설치

 

Terminal에서 다음과 같이 설치한다

npm i @ui-kitten/components @eva-design/eva react-native-svg
npx pod-install

 

eva와 ApplicationProvider를 가져와서 최상위 컴포넌트를 감싸줘야 한다. 최상위 컴포넌트를 감싸줘야하는게 엄청 많네. 나의 케이스에서는 App.tsx를 열고 RootStack 네비게이션 컴포넌트를 감싸줬다.

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {ThemeProvider} from 'styled-components';
import {theme} from '~/theme';
import RootStack from '~/screens/RootStack';
import {RecoilRoot} from 'recoil';
import {QueryClient, QueryClientProvider} from 'react-query';

import * as eva from '@eva-design/eva';
import {ApplicationProvider} from '@ui-kitten/components';

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <RecoilRoot>
        <NavigationContainer>
          <ThemeProvider theme={theme}>
            <ApplicationProvider {...eva} theme={eva.light}>
              <RootStack />
            </ApplicationProvider>
          </ThemeProvider>
        </NavigationContainer>
      </RecoilRoot>
    </QueryClientProvider>
  );
};

export default App;

 

 

 

✔️ 샘플코드

local이 데이터를 갖고 있는 샘플코드에서 뺄 부분 다 빼고 typescript 지정해서 바꾼 샘플 코드!

import React from 'react';
import {Autocomplete, AutocompleteItem} from '@ui-kitten/components';

const initialData = [
  {title: '강남역', subwayLine: '2'},
  {title: '강일역', subwayLine: '5'},
  {title: '수원역', subwayLine: '1'},
  {title: '을지로입구역', subwayLine: '2'},
  {title: '동대문역사문화공원역', subwayLine: '2'},
  {title: '여의도역', subwayLine: '9'},
];

const filter = (item: any, query: string) =>
  item.title.toLowerCase().includes(query.toLowerCase());

export const AutoCompleteSearch = () => {
  const [value, setValue] = React.useState<string | undefined>('');
  const [data, setData] = React.useState(initialData);
  const [placement, setPlacement] = React.useState('bottom');

  const onSelect = (index: number) => {
    setValue(initialData[index].title);
  };

  const onChangeText = (query: string) => {
    setValue(query);
    setData(initialData.filter(item => filter(item, query)));
  };

  const renderOption = (item: any, index: number) => (
    <AutocompleteItem key={index} title={item.title} />
  );

  return (
    <Autocomplete
      style={{width: 250}}
      placeholder="입력해주세요."
      value={value}
      placement={placement}
      onChangeText={onChangeText}
      onSelect={onSelect}>
      {data.map(renderOption)}
    </Autocomplete>
  );
};

export default AutoCompleteSearch;