Home » React-native » How to disable emoji in react native keyboard

How to disable emoji in react native keyboard

Beginner React-native

Hi everyone, In this article, we are going to learn about how to disable emoji in react native keyboard. Many times developers have to add validation to disable emojis for TextInput in react-native to get important information from the user or unique username. for important information user should not be able to add emoji in TextInput. To overcome this issue developers need to disable emoji input from TextInput. to validate this TextInput we need to set two different properties for Android & iOS respectively using TextInput props KeyboardType. so, let’s understand with an example.

1. Create a new project

Use the following command to react new project

react-native init ProjectName

2. TextInput keyboardType

To disable emoji from react-native TextInput you need to add TextInput props keyboardType with passing following values for Android you need to add ‘visible-password’ & for iOS you need to pass ‘ascii-capable’. let’s add these props with Platform condition like below.

<TextInput keyboardType={Platform.OS == 'ios' ? "ascii-capable": "visible-password"}/>

3. Full source code for disabled emoji

import React, {useState, useRef} from 'react';

import {Text, View, TextInput, Platform} from 'react-native';


export default function Dashboard({navigation}) {
 

  return (
    <View style={{alignItems: 'center'}}>
      <Text style={{fontSize: 25, margin: 20, textAlign: 'center'}}>
        Disable emoji in react native keyboard Android/iOS
      </Text>

      <TextInput
        placeholder="Enter text here"
        keyboardType={Platform.OS == 'ios' ? "ascii-capable": "visible-password"}
        style={{
          alignItems: 'center',
          height: 50,
          width: '80%',
          backgroundColor: 'white',
          borderRadius: 5,
        }}
      />
    </View>
  );
}

This is How we can disable emoji in react native keyboard. As you can see in the above dashboard screen I have added on TextInput and added KeyboardType props with props ascii-capable for iOS and props visible-password for Android support. after adding these props emoji button is removed from the keyboard & the user will not be able to add emoji in TextInput. you can see on below screenshot.

It is mandatory to add this Platform condition to TextInput otherwise the iOS application will crash as iOS doesn’t support visible-password props. To know more about react-native TextInput go through this post

4. OutputHow to disable emoji in react native keyboard

Thank you 🙂

Related Posts

4 thoughts on “How to disable emoji in react native keyboard

        1. Hi Amol,

          You can use following functions to remove emoji’s, also you can add multiple emoji’s unicode in the const regexEmojis

          // Function to remove emojis from the input text
          const removeEmojis = inputText => {
          var newText;
          const regexEmojis =
          /[\u2764\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{1FAB0}-\u{1FAB6}\u{1FAC0}-\u{1FAC2}\u{1FAD0}-\u{1FAD6}\u{1FAD7}\u{1FAD8}\u{1FAD9}\u{1FADA}\u{1FADB}\u{1FADC}\u{1FADD}\u{1FADE}\u{1FADF}\u{1FAE0}-\u{1FAE2}\u{1FAE3}-\u{1FAE4}\u{1FAE5}-\u{1FAE6}\u{1FAE7}-\u{1FAE8}\u{1FAE9}\u{1FAEA}\u{1FAEB}\u{1FAEC}\u{1FAED}\u{1FAEE}\u{1FAEF}\u{1FAF0}\u{1FAF1}\u{1FAF2}\u{1FAF3}\u{1FAF4}\u{1FAF5}\u{1FAF6}\u{1FAF7}\u{1FAF8}\u{1FAF9}\u{1FAFA}\u{1FAFB}\u{1FAFC}\u{1FAFD}\u{1FAFE}\u{1FAFF}]/gu;

          newText = inputText.replace(regexEmojis, ”);

          return newText;
          };

          // Function to handle text input changes
          const handleTextChange = inputText => {
          // Remove emojis from the input text
          const sanitizedText = removeEmojis(inputText);

          setCommentBox(sanitizedText);
          };

Leave a Reply

Your email address will not be published. Required fields are marked *