[React Native] Emoji 입력 UI 추가하기

# rn-emoji-keyboard 라이브러리를 활용해서 Emoji 입력 키보드 구현 방법 소개

- 안녕하세요 Jake입니다. 본 포스팅에서는 Emoji를 추가할 수 있는 키보드를 라이브러리를 사용해서 쉽게 추가할 수 있는 방법을 소개하려고 합니다. 이모지는 간결하고 색감 있게 여러 가지 상황이나 느낌을 표현할 수 있기 때문에, 사용자들한테 제공하기 좋은 UI 요소 중 하나입니다. 하지만 이모지 입력하기 위한 UI를 직접 만들기는 쉽지 않습니다. 이런 경우 오늘 오늘 소개할 라이브러리를 활용해보시면 어떨까 합니다.

 

# 깃헙 저장소

-  https://github.com/TheWidlarzGroup/rn-emoji-keyboard

GitHub - TheWidlarzGroup/rn-emoji-keyboard: Super performant, lightweight, fully customizable emoji picker 🚀

 

# 사용 방법

- 라이브러리를 설치합니다

yarn add rn-emoji-keyboard

- 이모지 입력 키보드 UI를 아래와 같이 추가합니다.

import EmojiPicker from 'rn-emoji-keyboard'

export default function App() {
  const [isOpen, setIsOpen] = React.useState<boolean>(false)

  return <EmojiPicker onEmojiSelected={handlePick} open={isOpen} onClose={() => setIsOpen(false)} />
}

 

Github 저장소의 이미지입니다 문제시 삭제하겠습니다

- 그리고 기본 제공 UI가 나쁘지는 않지만, 적용하려는 프로젝트에 따라서 그대로 사용하기에 아쉬울 수 있습니다. 그럴 경우, 문서 페이지를 방문해 보시면 좋을 것 같습니다.

---