Navigate back to the homepage

how to set keyboard type in react native

Infinitbility
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";
3
4const KeyboardTypeExample = () => {
5 const [text, onChangeText] = React.useState("Infinitbility");
6
7 return (
8 <SafeAreaView>
9 <TextInput
10 style={styles.input}
11 onChangeText={onChangeText}
12 value={text}
13 keyboardType="numeric"
14 />
15 </SafeAreaView>
16 );
17};
18
19const styles = StyleSheet.create({
20 input: {
21 height: 40,
22 margin: 12,
23 borderWidth: 1,
24 padding: 10,
25 },
26});
27
28export default KeyboardTypeExample;

Output

React Native, keyboardType, Example

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

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

Thanks For Reading…

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]

Tutorials

React Native

Categories

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–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]