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, Example

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

keyboardType iOS Android
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-password Not available React Native, keyboardType, visible-password, android

Thanks For Reading…