검색창 (SearchBar)

React Native Elements —— 클래스 컴포넌트

react-native-paper —— 함수형 컴포넌트 ⇒ 채택!

SearchBar - React Native Elements (클래스)

설치

react-native-elements 설치

#npm을 쓰고 있다면
$ npm install react-native-elements

#yarn을 쓰고 있다면
$ yarn add react-native-elements

react-native-vector-icons 설치

#npm을 쓰고 있다면
$ npm install react-native-vector-icons

#yarn을 쓰고 있다면
$ yarn add react-native-vector-icons

import * as React from 'react';
import { SearchBar } from 'react-native-elements';

export default class App extends React.Component {
  state = {
    search: '',
  };

  updateSearch = (search) => {
    this.setState({ search });
  };

  render() {
    const { search } = this.state;

    return (
      <SearchBar
        placeholder="Type Here..."
        onChangeText={this.updateSearch}
        value={search}
      />
    );
  }
}

Searchbar - react-native-paper (함수형)

설치

$ yarn add react-native-paper

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

const MyComponent = () => {
  const [searchQuery, setSearchQuery] = React.useState('');

  const onChangeSearch = query => setSearchQuery(query);

  return (
    <Searchbar
      placeholder="Search"
      onChangeText={onChangeSearch}
      value={searchQuery}
    />
  );
};

export default MyComponent;