How to open emoji keyboard, instead of alphabets using TextInput in React Native

Unfortunately, this question has been asked countless times over the years all of which have no reply or simply advertise for one 3rd party library or another.

From my quick hour of research to finally answer this question, I have found 4 options:

Option 1: Do it yourself (my favorite)

So the obvious answer here is that neither HTML nor React seem to support a default emoji keyboard as their docs will show you. Also, emoji change drastically from keyboard to keyboard causing many issues. Therefore, your best option would be to create your own Emoji keyboard which pops up on click of a div then on button click works like an actual keyboard without ever opening the device keyboard.

Pros:

• This option should work across all devices (android, IOS, Windows, Linux, etc)
• The emoji will never change unless you change them giving you complete control over the display of your website.

Cons:

• You have to spend a few minutes to an hour given your skill level creating an emoji keyboard
• you need to create and store or source emoji from somewhere

Option 2: Use Head scripts to link to 3rd party libraries such as Tiny MCE

During my searches, I found a library that is activated by tossing scripts into the head, no download is needed but it can be troublesome to customize.

Here is an example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script
      src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"
      referrerpolicy="origin"
    ></script>
    <script>
      tinymce.init({
        selector: "#mytextarea",
        plugins: "emoticons",
        toolbar: "emoticons",
        toolbar_location: "bottom",
        menubar: false
      });
    </script>
  </head>
  <body>
    <h1>Emoji picker example</h1>
    <form method="post">
      <textarea id="mytextarea">ASCII art is great, but...</textarea>
    </form>
  </body>
</html>

Pros:

• You don't have to do any work
• You don't have to install 3rd party libraries to your project as they're dealt with client side

Cons:

• It can be troublesome to change the CSS
• There is no knowing when the website will be taken down making this answer invalid

Option 3: Use a 3rd party library such as emoji-picker-react (Most suggested, and downvoted)

As every answer to this question throughout the years suggest, you can download a 3rd party library and hope that it not only works but that it works with your current project configuration and that you can edit it to fit your style.

Option 4: The nuclear option

The final option which is not really an option but still should be noted.

You can always just open the default virtual keyboard and allow them to switch to their emoji picker on their own.

If you are worried about them entering non-emoji text then you can just filter that out with a regex on text change.

Pros:

• no work is needed, just keep react at its default

Cons:

• It isn't really what you want
• You may need to add a quick regex filter to get desired results

simply use this library https://www.npmjs.com/package/react-native-emoji-board

yarn add react-native-emoji-board yarn add react-native-vector-icons if you don't have it yarn add @react-native-community/viewpager if you don't have it