Display Decimal KeyPad in React Native IOS Apps

In React Native Apps, We will display the HTML form for user's to input the details. By default, text keypads respective to native device will get displayed when user focus on  TextInput field. In order to display the numeric keypad in React Native, We need to pass 'numeric' value for keyboardType Prop.

Here is the basic Implementation.

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

const TextInputExample = () => {
  const [text, onChangeText] = React.useState('Useless Text');
  const [number, onChangeNumber] = React.useState('');

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

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

export default TextInputExample;

Above implementation will display the numeric keypad on IOS App. 

It doesn't include dot character. To include dot character, we need to pass 'decimalpad' as the value for keyboardType Prop

<TextInput

        style={styles.input}

        onChangeText={onChangeNumber}

        value={number}

        placeholder="useless placeholder"

        keyboardType="decimalpad"

      />