Navigate back to the homepage

how to set keyboard type in react native

React Native
August 20th, 2021 · 1 min read
how to set keyboard type in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will provide complete example and guide to related Textinput keyboardType in react native, Here you will get how to set or change keyboardType in react native, How many types of keyboard available with screen shot examples.

Let’s start today topic keyboard type in react native

React Native TextInput component provide keyboardType props to change keyboard type view.

We will pass all below input example in keyboardType props

enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password’)

As below example, we are using keyboard type numeric and if u see output keyboard showing only numbers and some special char.

1import React from "react";
2import { SafeAreaView, StyleSheet, TextInput } from "react-native";
4const KeyboardTypeExample = () => {
5 const [text, onChangeText] = React.useState("Infinitbility");
7 return (
8 <SafeAreaView>
9 <TextInput
10 style={styles.input}
11 onChangeText={onChangeText}
12 value={text}
13 keyboardType="numeric"
14 />
15 </SafeAreaView>
16 );
19const styles = StyleSheet.create({
20 input: {
21 height: 40,
22 margin: 12,
23 borderWidth: 1,
24 padding: 10,
25 },
28export default KeyboardTypeExample;
Final Result: React login form


React Native, keyboardType, Example

React Native keyboardType props and their output in android and in iOS.

React Native, keyboardType, default, iOS
React Native, keyboardType, default, android
React Native, keyboardType, number-pad, iOS
React Native, keyboardType, number-pad, android
React Native, keyboardType, decimal-pad, iOS
React Native, keyboardType, decimal-pad, android
React Native, keyboardType, numeric, iOS
React Native, keyboardType, numeric, android
React Native, keyboardType, email-address, iOS
React Native, keyboardType, email-address, android
React Native, keyboardType, phone-pad, iOS
React Native, keyboardType, phone-pad, android
React Native, keyboardType, numbers-and-punctuation, iOS
Not available
React Native, keyboardType, default, iOS
Not available
React Native, keyboardType, url, iOS
Not available
React Native, keyboardType, name-phone-pad, iOS
Not available
React Native, keyboardType, twitter, iOS
Not available
React Native, keyboardType, web-search, iOS
Not available
visible-passwordNot available
React Native, keyboardType, visible-password, android

Thanks For Reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide



More articles from Infinitbility

How to get data from json object in react native

How to get data from json object in react native

React Native JSON and Array usages example

August 18th, 2021 · 1 min read
How to map json data with array in react native

How to map json data with array in react native

React Native map json data with array Example

August 17th, 2021 · 1 min read
© 2020–2022 Infinitbility
Link to $ to $ to $ to $ to $ to $mailto:[email protected]