RN Emoji Keyboard

https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/
Admin
RN Emoji Keyboard is a lightweight, fully customizable emoji picker for React Native that supports...
Tokens:7,540
Snippets:119
Trust Score:7.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Run Example App on Android

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/contributions/workflow

Use this command to run the example application on an Android emulator or device.

```bash
yarn example android  

```

--------------------------------

### Run Example App on iOS

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/contributions/workflow

Use this command to run the example application on an iOS simulator or device.

```bash
yarn example ios  

```

--------------------------------

### Install RN Emoji Keyboard with NPM

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/start

Use this command to add the RN Emoji Keyboard package to your project using NPM.

```bash
npm install rn-emoji-keyboard  

```

--------------------------------

### Install RN Emoji Keyboard with Yarn

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/start

Use this command to add the RN Emoji Keyboard package to your project using Yarn.

```bash
yarn add rn-emoji-keyboard  

```

--------------------------------

### Basic Dark Mode Theme for Emoji Picker

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/dark

Apply basic dark mode styles to the Emoji Picker using the `theme` prop. This example includes styles for the backdrop, knob, container, header, and category.

```jsx
<EmojiPicker  
  onEmojiSelected={handlePick}  
  open={isModalOpen}  
  onClose={() => setIsModalOpen(false)}  
  theme={{
    backdrop: '#16161888',
    knob: '#766dfc',
    container: '#282829',
    header: '#fff',
    skinTonesContainer: '#252427',
    category: {{
      icon: '#766dfc',
      iconActive: '#fff',
      container: '#252427',
      containerActive: '#766dfc',
    },
  }}
/>  


```

--------------------------------

### Use useRecentPicksPersistence Hook

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/recently-persistance

Implement persistent storage for recently selected emoji by providing initialization and state change callbacks to the `useRecentPicksPersistence` hook. This example uses AsyncStorage for storage.

```javascript
import { useRecentPicksPersistence } from 'rn-emoji-keyboard'  
import AsyncStorage from '@react-native-async-storage/async-storage'  
  
useRecentPicksPersistence({  
  initialization: () => AsyncStorage.getItem(STORAGE_KEY).then((item) => JSON.parse(item || '[]')),  
  onStateChange: (next) => AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(next)),  
})
```

--------------------------------

### Provide Custom Emojis Data

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/emojis-data

Pass your own set of emojis to the EmojiPicker component. Ensure that the types and category titles match the default ones. This example filters emojis to include only those with Unicode version 11.

```javascript
import EmojiPicker, { emojisByCategory } from 'rn-emoji-keyboard'  
import type { EmojisByCategory } from 'src/types'  
  
const getCustomEmojis = () => {  
  const newEmojiSet: EmojisByCategory[] = []  
  for (const [, value] of Object.entries(emojisByCategory)) {  
    const newData = value.data.filter((emoji) => parseFloat(emoji.v) === 11)  
    newEmojiSet.push({  
      title: value.title,  
      data: newData,  
    })  
  }  
  return newEmojiSet  
}  
  
const ExampleComponent = () => {  
  // ...  
  
  return (  
    <EmojiPicker  
      open={isOpen}  
      onClose={handleOnClose}  
      onEmojiSelected={handleOnEmojiSelected}  
      emojisByCategory={getCustomEmojis()}  
    />  
  )  
}
```

--------------------------------

### Verify Code with ESLint

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/contributions/workflow

Run this command to check your code for style and potential errors using ESLint.

```bash
yarn lint  

```

--------------------------------

### Basic EmojiPicker Integration

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/basic

Import and render the EmojiPicker component with essential props like 'open', 'onClose', and 'onEmojiSelected'. Ensure the component is controlled by 'isOpen' and handles user interactions via the provided callbacks.

```javascript
import EmojiPicker from 'rn-emoji-keyboard'  
  
const ExampleComponent = () => {  
  // ...  
  
  return (  
    <EmojiPicker open={isOpen} onClose={handleOnClose} onEmojiSelected={handleOnEmojiSelected} />  
  )  
}
```

--------------------------------

### Import and Use Pre-defined Translation

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/internationalization

Import a pre-defined language pack (e.g., Polish) and pass it to the 'translation' prop. This is useful for quickly enabling support for common languages.

```javascript
import { pl } from 'rn-emoji-keyboard'  
  
// ...  
  
translation = { pl }  
```

--------------------------------

### Verify Code with TypeScript

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/contributions/workflow

Run this command to ensure your code adheres to TypeScript type checking rules.

```bash
yarn typescript  

```

--------------------------------

### Import EmojiKeyboard for Static Mode

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/api/static

To use the static mode, import the EmojiKeyboard component using a named import from 'rn-emoji-keyboard'. This mode has the same properties as the modal mode, but props like 'open' and 'onClose' are disabled.

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

--------------------------------

### Render Static Emoji Keyboard

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/static

To use the EmojiKeyboard as a static component, simply render it without passing any additional props. Ensure the 'rn-emoji-keyboard' library is imported.

```javascript
import { EmojiKeyboard } from 'rn-emoji-keyboard';  
  
const ExampleComponent = () => {  
  // ...  
  
  return <EmojiKeyboard onEmojiSelected={handleOnEmojiSelected} />  
}
```

--------------------------------

### Basic Usage of RN Emoji Keyboard

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/start

Import and render the EmojiPicker component. Handle emoji selection by providing a callback function to `onEmojiSelected`. Control the picker's visibility with the `open` prop and close it using the `onClose` callback.

```typescript
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)} />  
}  

```

--------------------------------

### Import Default Emoji Keyboard

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/api/modal

Use a default import to apply the modal mode in your app. This is the primary way to integrate the emoji keyboard when using modal presentation.

```javascript
import EmojiKeyboard from 'rn-emoji-keyboard'  
```

--------------------------------

### Import useRecentPicksPersistence Hook

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/api/useRecentPicksPersistence

Import the hook from the rn-emoji-keyboard library. This functionality requires enabling `enableRecentlyUsed` in your emoji keyboard component.

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

--------------------------------

### Import EmojisByCategory

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/api/modal

Import the default emojisByCategory data structure if you need to reference or manipulate the predefined emoji sets. This is useful for custom configurations or data inspection.

```javascript
import { emojisByCategory } from 'rn-emoji-keyboard'  
```

--------------------------------

### EmojiKeyboard Component (Modal Mode)

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/api/modal

The EmojiKeyboard component can be imported and used in modal mode by default. It requires essential props for its operation.

```APIDOC
## Import
```javascript
import EmojiKeyboard from 'rn-emoji-keyboard'
```

## Props
### Required
#### `open` (boolean)
Indicates whether the modal should be displayed. Defaults to `false`.

#### `onClose` (() => void)
Callback fired when the component is to be closed.

#### `onEmojiSelected` ((emoji: { emoji, name, slug, unicode_version, alreadySelected }) => void)
Callback fired when an emoji is selected. Provides emoji data and an `alreadySelected` boolean.

### Optional
#### `allowMultipleSelections` (boolean)
Allow selecting multiple emojis without dismissing the keyboard. Defaults to `false`.

#### `categoryPosition` ('floating' | 'top' | 'bottom')
Allows changing the position of the emoji categories container. Defaults to `'floating'`.

#### `categoryOrder` (CategoryTypes[])
Allows changing the order of emoji categories. Defaults to `[]`.

#### `defaultHeight` (number | string)
Specifies the collapsed container height. Can be a number in points or a string percentage. Defaults to `40%`.

#### `disabledCategories` (CategoryTypes[])
Allows hiding specific categories by passing an array of their slugs. Defaults to `[]`.

#### `disableSafeArea` (boolean)
Allows disabling `SafeAreaView` inside the emoji keyboard. Defaults to `false`.

#### `emojisByCategory` (EmojisByCategory[])
Set of emojis to be displayed. You can pass your own or use the prepared one. Defaults to `emojisByCategory`.

#### `emojiSize` (number)
Sets the size of a single emoji. Defaults to `28`.

#### `enableRecentlyUsed` (boolean)
Reveals an extra category with recently used emojis. Defaults to `false`.

#### `enableSearchBar` (boolean)
Reveals the search bar for finding specific emojis. Defaults to `false`.

#### `hideSearchBarClearIcon` (boolean)
Hides the search bar clear icon. Defaults to `false`.

#### `customButtons` (React.ReactNode)
Injects custom buttons into the component. Defaults to `null`.

#### `enableCategoryChangeAnimation` (boolean)
Turns off FlatList scrolling animation when a category changes. Defaults to `true`.

#### `enableCategoryChangeGesture` (boolean)
Allows using a horizontal swipe gesture to change emoji category. Defaults to `true`.

#### `enableSearchAnimation` (boolean)
Turns off FlatList scrolling animation when search results are updated. Defaults to `true`.

#### `expandable` (boolean)
Shows a knob and enables expand on swipe up. Defaults to `true`.

#### `expandedHeight` (number | string)
Specifies the expanded container height. Works only if `expandable` is `true`. Defaults to `80%`.

#### `hideHeader` (boolean)
Hides labels with category names. Defaults to `false`.

#### `onCategoryChangeFailed` ((info: {index, highestMeasuredFrameIndex, averageItemLength}) => void)
Callback fired when the category change fails. Defaults to `warn(info)`.

#### `onRequestClose` (() => void)
Callback fired when the emoji keyboard is closing.

#### `selectedEmojis` (emoji.name[])
Array of currently selected emojis. Must contain emoji names. Defaults to `undefined`.

#### `styles` (object)
Allows changing styles of every component.

#### `theme` (object)
Allows changing colors of components and text.
```

--------------------------------

### Import Emojis Data

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/api/emojisData

Import the emojisByCategory object from the rn-emoji-keyboard library to access the default emoji data.

```javascript
import { emojisByCategory } from 'rn-emoji-keyboard'
```

--------------------------------

### Full Dark Mode Theme Customization for Emoji Picker

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/dark

Customize all available theme properties for the Emoji Picker to achieve a complete dark mode experience. This includes styles for custom buttons and search input.

```jsx
<EmojiPicker  
  onEmojiSelected={handlePick}  
  open={isModalOpen}  
  onClose={() => setIsModalOpen(false)}  
  theme={{
    backdrop: '#16161888',
    knob: '#766dfc',
    container: '#282829',
    header: '#fff',
    skinTonesContainer: '#252427',
    category: {{
      icon: '#766dfc',
      iconActive: '#fff',
      container: '#252427',
      containerActive: '#766dfc',
    },
    customButton: {{
      icon: '#766dfc',
      iconPressed: '#fff',
      background: '#252427',
      backgroundPressed: '#766dfc',
    },
    search: {{
      text: '#fff',
      placeholder: '#ffffff2c',
      icon: '#fff',
      background: '#00000011',
    },
  }}
/>  


```

--------------------------------

### Set Emoji Categories to Top

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/categories_position

Use the `categoryPosition` prop with the value 'top' to display emoji categories above the emoji grid. Ensure the EmojiPicker component is imported.

```javascript
import EmojiPicker from 'rn-emoji-keyboard'  
  
const ExampleComponent = () => {  
  // ...  
  
  return (  
    <EmojiPicker  
      open={isOpen}  
      onClose={handleOnClose}  
      onEmojiSelected={handleOnEmojiSelected}  
      //  add props below  
      categoryPosition="top"  
    />  
  )  
}
```

--------------------------------

### Set Emoji Categories to Bottom

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/categories_position

Use the `categoryPosition` prop with the value 'bottom' to display emoji categories below the emoji grid. Ensure the EmojiPicker component is imported.

```javascript
import EmojiPicker from 'rn-emoji-keyboard'  
  
const ExampleComponent = () => {  
  // ...  
  
  return (  
    <EmojiPicker  
      open={isOpen}  
      onClose={handleOnClose}  
      onEmojiSelected={handleOnEmojiSelected}  
      //  add props below  
      categoryPosition="bottom"  
    />  
  )  
}
```

--------------------------------

### Provide Custom Translations

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/internationalization

Pass a custom translation object to the 'translation' prop to override default labels for emoji categories. This allows for full control over the displayed text.

```javascript
translation={{  
  smileys_emotion: 'Smileys & Emotion',  
  people_body: 'People & Body',  
  animals_nature: 'Animals & Nature',  
  food_drink: 'Food & Drink',  
travel_places: 'Travel & Places',  
  activities: 'Activities',  
  objects: 'Objects',  
  symbols: 'Symbols',  
  flags: 'Flags',  
}}  
```

--------------------------------

### Define English Translation Object

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/contributions/translations

Create a translation object for a new language, following the existing format. Ensure the object name is unique to your language.

```typescript
export const en: CategoryTranslation = {
  recently_used: 'Recently used',
  smileys_emotion: 'Smileys & Emotion',
  people_body: 'People & Body',
  animals_nature: 'Animals & Nature',
  food_drink: 'Food & Drink',
  travel_places: 'Travel & Places',
  activities: 'Activities',
  objects: 'Objects',
  symbols: 'Symbols',
  flags: 'Flags',
  search: 'Search',
}
export default en

```

--------------------------------

### Adding a Custom Delete Button to EmojiPicker

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/custom-buttons

Use the `customButtons` prop to add a `DeleteButton` component to the `EmojiPicker`. You can define its appearance and behavior using props like `onPress`, `style`, `iconNormalColor`, and `iconActiveColor`. Ensure each custom button has a unique `key` prop.

```javascript
import EmojiPicker from 'rn-emoji-keyboard'  
  
const ExampleComponent = () => {  
  // ...  
  
  return (  
    <EmojiPicker  
      onEmojiSelected={handlePick}  
      open={isModalOpen}  
      onClose={() => setIsModalOpen(false)}  
      enableSearchBar  
      customButtons={[  
        <DeleteButton  
          key="deleteButton"  
          onPress={deleteLastEmoji}  
          style={({ pressed }) => ({  
            backgroundColor: pressed ? '#000' : '#e1e1e1',  
            padding: 10,  
            borderRadius: 100,  
          })}  
          iconNormalColor="#000"  
          iconActiveColor="#fff"  
        />,  
      ]}  
      allowMultipleSelections  
      categoryPosition="top"  
    />  
  )  
}
```

--------------------------------

### Enable Search Bar in EmojiPicker

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/search

Pass the `enableSearchBar` prop to the EmojiPicker component to reveal the search bar. You can also control the visibility of the clear icon using `hideSearchBarClearIcon`.

```javascript
import EmojiPicker from 'rn-emoji-keyboard'  
  
const ExampleComponent = () => {  
  // ...  
  
  return (  
    <EmojiPicker  
      open={isOpen}  
      onClose={handleOnClose}  
      onEmojiSelected={handleOnEmojiSelected}  
      //  add props below  
      enableSearchBar  
    />  
  )  
}  

```

--------------------------------

### Managing Selected Emojis with EmojiPicker

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/selected_emojis

Use the `selectedEmojis` prop to pass an array of emoji names that should appear selected. The `onEmojiSelected` callback will provide an `alreadySelected` boolean to help manage this array.

```javascript
import EmojiPicker, { type EmojiType } from 'rn-emoji-keyboard';  
  
const ExampleComponent = () => {  
  // ...  
  const [currentlySelectedEmojis, setCurrentlySelectedEmojis] = useState([])  
  
  const handleOnEmojiSelected = (emoji: EmojiType) => {  
    //..Your on select logic  

    // Remove or add pressed emoji to the currently selected array  
    if (emoji.alreadySelected)  
      setCurrentlySelected((prev) => prev.filter((a) => a !== emoji.name))  
    else setCurrentlySelected((prev) => [...prev, emoji.name])  
  
  }  
  
  return (  
    <EmojiPicker  
      open={isOpen}  
      onClose={handleOnClose}  
      onEmojiSelected={handleOnEmojiSelected}  
      selectedEmojis={currentlySelected}  
    />  
  )
}
```

--------------------------------

### Disable Emoji Picker Expansion

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/static_modal

Set the `expandable` prop to `false` to prevent the emoji picker from expanding. This is useful when a fixed-size picker is desired.

```javascript
import EmojiPicker from 'rn-emoji-keyboard'  
  
const ExampleComponent = () => {  
  // ...  
  
  return (  
    <EmojiPicker  
      open={isOpen}  
      onClose={handleOnClose}  
      onEmojiSelected={handleOnEmojiSelected}  
      //  add props below  
      expandable={false}  
    />  
  )  
}
```

--------------------------------

### Enable Recently Used Emojis

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/recently

To add a category for recently used emojis, pass the `enableRecentlyUsed` prop to the `EmojiPicker` component. Ensure you have imported `EmojiPicker` from 'rn-emoji-keyboard'.

```javascript
import EmojiPicker from 'rn-emoji-keyboard'  
  
const ExampleComponent = () => {  
  // ...  
  
  return (  
    <EmojiPicker  
      open={isOpen}  
      onClose={handleOnClose}  
      onEmojiSelected={handleOnEmojiSelected}  
      //  add props below  
      enableRecentlyUsed  
    />  
  )  
}
```

--------------------------------

### Add Custom Translation to Emoji Picker

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/translated

Import a specific language translation (e.g., 'pl' for Polish) and pass it to the 'translation' prop of the EmojiPicker component to enable custom language support.

```javascript
import EmojiPicker, { pl } from 'rn-emoji-keyboard'  
  
const ExampleComponent = () => {  
  // ...  
  
  return (  
    <EmojiPicker  
      open={isOpen}  
      onClose={handleOnClose}  
      onEmojiSelected={handleOnEmojiSelected}  
      //  add props below  
      translation={pl}  
    />  
  )  
}  

```

--------------------------------

### EmojisData Structure

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/api/emojisData

Defines the structure for individual emojis and how they are categorized. This is useful for understanding the data format or providing custom emoji sets.

```typescript
type EmojiType = {
  emoji: string // Visual representation of emoji
  name: string
  slug: string
  unicode_version: string
  toneEnabled: boolean
  alreadySelected?: boolean
}

type EmojisByCategory = {
  title: CategoryTypes
  data: JsonEmoji[]
}

const emojisByCategory: EmojisByCategory[]
```

--------------------------------

### Disable Emoji Categories

Source: https://docs.thewidlarzgroup.com/rn-emoji-keyboard/docs/documentation/Examples/disabled

Use the `disabledCategories` prop to pass an array of category names you wish to disable. This prevents users from accessing these categories.

```javascript
import EmojiPicker from 'rn-emoji-keyboard'  
  
const ExampleComponent = () => {  
  // ...  
  
  return (  
    <EmojiPicker  
      open={isOpen}  
      onClose={handleOnClose}  
      onEmojiSelected={handleOnEmojiSelected}  
      //  add props below  
      disabledCategories={['activities', 'flags', 'objects', 'symbols']}  
    />  
  )  
}  

```
Tokens:
Raw