Modal Mode
The library gives you the possibility to choose from two modes: modal or static. This section refers to the modal mode (for static mode, see static section)
To apply the modal mode in your app, use a default import from rn-emoji-keyboard
import EmojiKeyboard from 'rn-emoji-keyboard'
Required​
Requiredopen​
Required props which indicates whether the modal should be displayed on the screen.
| Type | Default |
|---|---|
| boolean | false |
RequiredonClose​
Callback fired when the component is to be closed.
| Type | Default |
|---|---|
| () => void | undefined |
RequiredonEmojiSelected​
Callback fired when the emoji is selected. The passed function expose an object with selected emoji data.
It also returns alreadySelected boolean indicating whether pressed emoji is already selected or not (see selectedEmojis).
| Type | Default |
|---|---|
| (emoji: { emoji, name, slug, unicode_version, alreadySelected }) => void | undefined |
Optional​
allowMultipleSelections​
Allow select multiple emoji without dismiss keyboard.
| Type | Default |
|---|---|
| boolean | false |
categoryPosition​
Allow to change the position of available emoji categories container.
| Type | Default |
|---|---|
| 'floating' | 'top' | 'bottom' | floating |
categoryOrder​
Allow to change order of available emoji categories container.
| Type | Default |
|---|---|
| CategoryTypes[] | [] |
defaultHeight​
Specify collapsed container height. It can be either a number in points or a string in a percentage of the screen.
| Type | Default |
|---|---|
| number | string | 40% |
disabledCategories​
Allow to hide specific categories by passing an array with their slugs.
| Type | Default |
|---|---|
| CategoryTypes[] | [] |
disableSafeArea​
Allow to disable SafeAreaView inside the emoji keyboard.
Look into React Native documentation for more details about SafeAreaView.
| Type | Default |
|---|---|
| boolean | false |
emojisByCategory​
Set of emojis that can be displayed in the app. You can pass your own emojis set or use the one that we have prepared.
Read more about Emojis Data
import { emojisByCategory } from 'rn-emoji-keyboard'
| Type | Default |
|---|---|
| EmojisByCategory[] | emojisByCategory |
emojiSize​
Set size of the single emoji.
| Type | Default |
|---|---|
| number | 28 |
enableRecentlyUsed​
Reveal extra category with recently used emojis.
| Type | Default |
|---|---|
| boolean | false |
enableSearchBar​
Reveal the search bar, used to find specific emoji.
| Type | Default |
|---|---|
| boolean | false |
hideSearchBarClearIcon​
Hide the search bar clear icon inside the search input.
| Type | Default |
|---|---|
| boolean | false |
customButtons​
Inject custom buttons into the component.
| Type | Default |
|---|---|
| React.ReactNode | null |
enableCategoryChangeAnimation​
Allow to turn off FlatList scrolling animation when category is changed.
Setting this to false will also overwrite enableSearchAnimation value.
| Type | Default |
|---|---|
| boolean | true |
enableCategoryChangeGesture​
Allow to use horizontal swipe gesture to change emoji category
| Type | Default |
|---|---|
| boolean | true |
enableSearchAnimation​
Allow to turn off FlatList scrolling animation when search results are updated.
| Type | Default |
|---|---|
| boolean | true |
expandable​
Show knob and enable expand on swipe up.
| Type | Default |
|---|---|
| boolean | true |
expandedHeight​
Specify expanded container height. It can be either a number in points or a string in a percentage of the screen.
expandedHeight works only if expandable props is set to true.
| Type | Default |
|---|---|
| number | string | 80% |
hideHeader​
Hide labels with category names.
| Type | Default |
|---|---|
| boolean | false |
onCategoryChangeFailed​
Callback fired when the category change failed.
| Type | Default |
|---|---|
| ( info: {index, highestMeasuredFrameIndex, averageItemLength} ) => void | warn(info) |
onRequestClose​
Callback fired when emoji keyboard is closing.
| Type | Default |
|---|---|
| () => void | undefined |
selectedEmojis​
Array of currently selected emojis. It must contain emoji's name.
| Type | Default |
|---|---|
| emoji.name[] | undefined |
styles​
Change styles of every component.
Look into styles for more details.
theme​
Change colors of the components and text.
Look into theme for more details.
translation​
Change the library language.
Look into internationalization section for more details about translations.
| Type | Default |
|---|---|
| CategoryTranslation | en |