Jaśkowska explains that emojis can add emotional cues that are missing from text, such as tone and facial expression. Examples show how a few emojis can change the meaning of a message about falling down stairs, or help two people communicate without words.
Showcase of rn-emoji-keyboard. Enhance your communication with the language of emoji
Speaker
M. Jaśkowska of The Village Group, a React Native development company, presents rn-emoji-keyboard at a Callstack talk, explaining emoji communication and how to add a customizable emoji picker to React Native apps.
She describes emojis as characters defined by Unicode, with their appearance supplied by platform fonts such as Apple Color Emoji and Noto Color Emoji. She also explains flag sequences, UTF-16 surrogate pairs, skin tone modifiers, and zero-width joiners, which combine characters into emojis such as a woman technologist.
While building the Holidayly demo app, the team wanted users to tag posts with any emoji, not just a heart or thumbs-up. Existing options, including React Native Emoji Selector, did not provide the customization, control, and performance they wanted, so they released rn-emoji-keyboard.
The library can appear as a static UI element or as an expandable modal. Props let developers adjust emoji size, recent items, category placement and order, colors, search, and headers. Jaśkowska says skin tone support works by default, and the library also offers typed APIs, translations, and no dependencies.
Jaśkowska compares performance scores from the team’s tests: React Native Emoji Selector scored 49, the first rn-emoji-keyboard release scored 46, version 0.7.1 scored 72, and a later release scored 90. She closes by urging developers to give users a way to choose any emoji when expressing themselves.
Takeaways
- Let users choose from the full emoji set when adding reactions or tags.
- Treat emoji as Unicode text whose appearance can vary by platform.
- Use zero-width joiners and skin tone modifiers to understand how compound emojis are formed.
- Benchmark long lists and interaction updates; the team’s score rose from 46 to 90 across releases.
- Choose picker behavior and customization props to fit the app’s UI.
Mentioned in this talk
Search inside this talk
What was claimed 14
- uses
“We specialize in React Native.”
YouTube Unverified1 source· Talk
- works atM. Jaśkowska works at The Village Group
“I'm Magda from The Village Group.”
YouTube Unverified1 source· Talk
- built
“an open source library created and maintained by developers from Daavid Group”
YouTube Unverified1 source· Talk
- featurern-emoji-keyboard: Can be used as a static UI element or opened in modal mode
“use the keyboard as a static element... Or we can use the modal mode”
YouTube Unverified1 source· Talk
- featurern-emoji-keyboard: Customizable emoji size, recent section, category placement, colors, search, header, and category order
“We added multiple features for the keyboard that you can control by simply passing some props.”
YouTube Unverified1 source· Talk
- featurern-emoji-keyboard: Skin tone modifier support
“We added it in the latest release... skin tone modifier support”
YouTube Unverified1 source· Talk
- featurern-emoji-keyboard: Zero dependencies; no linking or provider required
“you don't need any provider... no linking is needed... zero dependencies”
YouTube Unverified1 source· Talk
- featurern-emoji-keyboard: Supports multiple languages and autocomplete through full typing
“fully typed, so feel free to take advantage of the autocomplete... we already support a bunch of languages”
YouTube Unverified1 source· Talk
- usesM. Jaśkowska uses Flipper
“what the RN Perf Monitor plugin for Flipper showed us”
YouTube Unverified1 source· Talk
- metricReact Native Emoji Selector: Performance score 49
“React Native Emoji Selector scored 49.”
YouTube Unverified1 source· Talk
- metricrn-emoji-keyboard: Performance score 46 in the first release
“Our score was 46.”
YouTube Unverified1 source· Talk
- metricrn-emoji-keyboard: Performance score 72 in version 0.7.1
“we ended up with a score of 72.”
YouTube Unverified1 source· Talk
- metricrn-emoji-keyboard: Performance score 90 in the recent release
“We ended up with a final score of 90.”
YouTube Unverified1 source· Talk
- built
“our team is building for you... React Native Notifications”
YouTube Unverified1 source· Talk
