An overview of all keyboard types available in React Native

04 January 2022

return button on React Native Keyboard
Photo by freestocks

During your life as a React Native developer, you are going to handle a lot of different scenarios using keyboards. You need to know all possible combinations to choose the one that corresponds to your situation.

In this article, we are going to define and compare all types of keyboards available in react-native.

The problem

Imagine it's Monday morning, you have a new bubble on slack, your lovely designer wants small feedback for his call to action...


It's a good practice for mobile Call To Action to be within the thumb reach.


💯 Indeed, but from a technical perspective, the React Native platform comes with some limits.

How to use the Input Keyboard type in React Native

This is an example of a controlled component in React Native.

import { TextInput } from "react-native";

const App = () => {
const [inputValue, setInputValue] = useState("Example text");

return (
<View>
<TextInput
onChangeText={setInputValue}
value={inputValue}
/>
</View>
);
};

TextInput props values for `keyboardType` by example

  • default
  • numeric
  • password
  • email-address
  • phone-pad
  • ascii-capable
  • numbers-and-punctuation
  • url
  • number-pad
  • name-phone-pad
  • decimal-pad
  • twitter
  • web-search

Testing React Native Keyboards props on iOS

Protip to toggle the iOS keyboard on macOS

If you are using the macOS simulator to work on iOS mobile, you will need to toggle the keyboard or it will never appear (IO > Keyboard > Toggle Software Keyboard)

Toggle Keyboard on iOS simulator with React Native

All keyboardType examples (iOS on the left, Android on the right)

With all the screenshots above we are using this code and changing only keyboardType​ props. The source code is available on GitHub.

<TextInput
onChangeText={setInputValue}
value={inputValue}
keyboardType​="numeric" <---- the props we are changing
/>

`default`

input default on react native

This is the basic keyboard when you just want to handle data from a TextInput.

`numeric`

numeric keyboard on react native

Numeric keyboards are used when you need to take data as a number. As you can see the Android keyboard is a little bit different, the user can have access to string characters on his screen while apple doesn't show them.

`password`

password keyboard on react native

When the user wants to write his password, the first letter is not always a capital letter that's why we need to use this type of keyboard for password input.

`email-address`

email-adress keyboard on React Native

For the Email type, the keyboard is basic and we can easily have access to the "@" and the "." character.

As you can see the type defines the phone suggestion and I can select faster my mail address.

Phone-pad type

phone-pad keyboard on React Native

The phone-pad type is the keyboard that we use when we made a phone call. We have access to special characters like #,+,*.

Even if on Android the keyboard is a little bit different, this is the principal functionality of this keyboard.

`ascii-capable`

Ascii keyboard on React Native

`numbers-and-punctuation`

number-punctuation keyboard on react native

`url`

url keyboard on react native

When the user wants to find a website, he needs to have ".", "/" and the domain extension quickly

`number-pad`

number-pad keyboard on react native

`name-phone-pad`

name-phone-pad keyboard on react native

`decimal`

decimal keyboard on react native

`twitter`

twitter keyboard on react native

`web-search`

web-search keyboard on react native

GitHub Code

The code is available on GitHub

Gravatar for dleuliette@gmail.com

Hi, I’m David, a french freelance developer working remotely. I’m the author of this blog, nice to meet you!

Subscribe?

Be the first to receive insightful articles and actionable resources that help you to elevate your skills across every touch point.