Creating Custom emoji component in React Native

By Manish Sharma
Date 17-01-21
Creating Custom emoji component in React Native
" "

Emojis are essential to communicate emotion, something that words cannot portray. However, they do not hold value in the academic world or in a context that demands an objective voice.

Emojis are meant to be fun, light-hearted, and convey a broad range of emotions efficiently and in a way that words sometimes cannot.

The simplest definition of emoji would be something like this "a small digital image or symbol used in electronic communication to convey an idea or feeling"

Before starting the implementation of emoji picker, let's have look how our component would look like.

Following concepts will help us to build our component. So, it becomes important to go through these concepts before start implementation.

Context menu

A context menu is a pop-up menu that provides shortcuts for actions the software developer anticipates the user might want to take.  

Unicodes

We are using Unicodes for creating emojis. Unicode is a universal character encoding standard that assigns a code to every character and symbol in every language in the world. Since no other encoding standard supports all languages, Unicode is the only encoding standard that ensures that you can retrieve or combine data using any combination of languages. Unicode is required with XML, Java, JavaScript, LDAP, and other web-based technologies.

You can the full list of emojis with respective Unicodes here.

For achieving the context-menu in our component we will use react-native-popup-menu  library. 

This library provides us following API's for implementing context menu behaviour.

1) MenuProvider : It provides methods to handle popup menus imperatively. The same methods are exposed to the context property menuActions. This can be retrieved by HOC withMenuContext that adds ctx property to your component. Then simply call props.ctx.menuActions.method().

It is important that <MenuProvider /> is on the top of the component hierarchy.

 

To accomplish above requirement, we will wrap our Appcontainer within MenuProvider. So, our App.js will look like below.

 

import { MenuProvider } from "react-native-popup-menu";

const App = (props) => {
  return (
    <MenuProvider>
     <EmojisMain />
    </MenuProvider>
  );
};

 

2) Menu : Root menu component defining menu name and providing menu events. This is another wrapper component that is used to wrap the implementation of the menu's content. Basically, this Menu component should have two children components which are MenuTrigger and MenuOptions

3) MenuOptions : This component wrapps all menu options. This component is another wrapper component that comes inside the Menu component, this component is basically used to render the content of menu with the help of children MenuOption component.

4) MenuOption : Wrapper component of menu option.

5) MenuTrigger : It defines position where the popup menu will be rendered. Menu can by opened by clicking on <MenuTrigger /> or by calling context methods. This API will help us performing animation on MenuOption.

Lets focus back on implementation part.

In order to show emojis on screen, we are using Unicode instead of images. So in this article, we're using only five emojis as follows : 

[
10084, // Heart emoji Unicode
128077, // Thumb emoji Unicode
128525, // Loving face emoji Unicode
128514, // Laughing with water drop from eyes Unicode 128558, // OH! face emoji Unicode
].

we need to make a placeholder component that is responsible for emoji on-screen 

 

import React from 'react';
import { View, Text, StyleSheet } from "react-native";


export default function ReactionPlaceholder(props) {
    const { reaction = "" } = props;
    return (
        <View
            style={styles.body}
        >
            <Text
                style={styles.txtStyle}
            >{`${"Your Reaction: "} ${reaction !== "" ? String.fromCodePoint(reaction) : "     "}`}</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    body: {
        minWidth:200,
        borderStyle: "dashed",
        borderWidth: 1,
        padding: 10,
        borderRadius: 5,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white"
    },
    txtStyle: {
        fontWeight: "bold",
        fontSize: 30
    }
});

We will wrap this component in MenuTrigger in our Emoji component named EmojiPopUp like this.

<MenuTrigger customStyles={styles.menuTriggerStyle}>
                <ReactionPlaceholder
                    reaction={props.reaction}
                />
</MenuTrigger>

so that as the user clicks on ReactionPlaceholder, the MenuTrigger component triggers the Menu.

MenuOptions will render the emojis on screen.

 

<MenuOptions optionsContainerStyle={styles.menuOptionsStyle}>
  <View style={styles.optionViewContainerStyle}>{renderEmojis()}</View>
</MenuOptions>

 

renderEmojis will return the array of MenuOption with our emojis.

 

const emojiCodes = [
    10084, // Heart emoji
    128077, // Thumb emoji
    128525, // Loving face emoji
    128514, // Laughing with water drop from eyes
    128558, // OH! face emoji
];

const renderEmojis = () => {
        let emojis = [];
        emojiCodes.map((code, index) => {
            Options.push(
                <MenuOption
                    key={index}
                    onSelect={props.onReactionClick}
                    value={code}
                    >
                    <View >
                        <Text >{String.fromCodePoint(code)}</Text>
                    </View>
                </MenuOption>,
            );
        });
        return emojis;
    }

 

Now, we will import this component in our main parent component.

import React, { Component } from 'react'
import { View, StyleSheet, Text } from "react-native";
import EmojiPopUp from "../components/EmojiPopUp";

export default class EmojisMain extends Component {
   


    render() {
        return (
            <View style={styles.mainBody}>
                <Text
                    style={styles.title}
                >{"Emojis Example"}</Text>
                <View style={styles.container}>
                    <EmojiPopUp
                        onReactionClick={this.onReactionClick}
                        reaction={this.state.reaction}
                    />

                </View>
            </View>
        )
    }
}


 

Here we are passing the current selected Emoji in prop named reaction and onReactionClick callback for handling new selections made by the user.

 

Check out the new website here: www.startxlabs.com

For any questions, feedbacks, please e-mail us- [email protected]

Thank You.

subscribe to startxlabs

startxlabs