RN Emoji Keyboard provides two distinct ways to implement an emoji picker:

1. Modal mode: An overlay-style picker.
2. Static mode: An inline picker that can be embedded directly into your UI.

Refer to the specific API documentation for /docs/api/modal or /docs/api/static to implement your preferred mode.

The library provides built-in translations for several languages. To use one, import the specific language object from rn-emoji-keyboard and pass it to the translation prop of the keyboard component.

import { pl } from 'rn-emoji-keyboard'

// ...

translation = { pl }

You can install the rn-emoji-keyboard package using either yarn or npm.

yarn add rn-emoji-keyboard

or

npm install rn-emoji-keyboard

To use the emoji picker, import the EmojiPicker component and the EmojiType type. You must manage the visibility of the picker using an open prop and provide a callback for when the picker is closed via onClose. To handle emoji selection, use the onEmojiSelected prop, which returns an EmojiType object.

import EmojiPicker, { type EmojiType } from 'rn-emoji-keyboard'

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

  const handlePick = (emojiObject: EmojiType) => {
    console.log(emojiObject)
    /* example emojiObject = {
        "emoji": "❤️",
        "name": "red heart",
        "slug": "red_heart",
        "unicode_version": "0.6",
      }
    */
  }

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

You can use rn-emoji-keyboard in static mode by importing the EmojiKeyboard component. In this mode, the keyboard is treated as a standard component within your layout rather than a popup/modal.

Note that static mode shares the same props as modal mode, but props related to modal lifecycle and visibility—specifically open and onClose—are disabled and will not function.

import { EmojiKeyboard } from 'rn-emoji-keyboard'

Generate static content for the website by running yarn build. The resulting static files will be located in the build directory and can be hosted on any static content hosting service.

$ yarn build

Start a local development server by running yarn start. This command will open a browser window and support live reloading, meaning most changes to the documentation will be reflected immediately without a server restart.

$ yarn start

To add the emoji keyboard to your React Native project, use the following yarn command:

yarn add rn-emoji-keyboard

The useRecentPicksPersistence hook allows you to implement custom persistence logic for recently used emojis. You can use any storage mechanism (e.g., Async Storage, a backend API, etc.) as long as the functions return a Promise.

Prerequisites

1. You must enable enableRecentlyUsed in your EmojiKeyboard component.
2. To ensure a smooth experience and consistent state across the app, it is recommended to use this hook as high as possible in your React component tree (e.g., in App.tsx).

Important Behavior

This hook impacts every instance of rn-emoji-keyboard used in your application that has enableRecentlyUsed enabled.

import { useRecentPicksPersistence } from 'rn-emoji-keyboard'