How to disable emoji in react native keyboard

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

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.

3. Full source code for disabled emoji

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 🙂

Leave a Reply

Your email address will not be published.