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.

import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const KeyboardTypeExample = () => {
  const [text, onChangeText] = React.useState("Infinitbility");

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        keyboardType="numeric"
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default KeyboardTypeExample;

Output

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

keyboardType	iOS	Android
default
number-pad
decimal-pad
numeric
email-address
phone-pad
ascii-capable		Not available
numbers-and-punctuation		Not available
url		Not available
name-phone-pad		Not available
twitter		Not available
web-search		Not available
visible-password	Not available

Thanks For Reading…

Output#

Output