How to Get Only Numeric Values in TextInput Field in React Native ?

Text input fields play a vital role in React Native applications, facilitating user interactions. However, certain situations demand restricting input to numeric values exclusively. In this article, we will delve into two distinct approaches to achieving this desired functionality.

Prerequisites

Introduction to React Native
React Native Components
React Hooks
Expo CLI
Node.js and npm (Node Package Manager)

Steps to Create a React Native Application

Step 1: Create a react native application by using this command

npx create-expo-app <<Project-Name>>

Step 2: After creating your project folder, i.e. "Project-Name", use the following command to navigate to it:

cd <<Project-Name>>

Project Structure

Approaches to Accepts Number Only Input in React Native

Using Regular Expressions
Using isNaN Check

To restrict TextInput to numeric values only, React Native provides properties like keyboardType="numeric" and validation checks to ensure users input numbers.

Approach 1: Using Regular Expressions

In this approach, regular expressions are utilized to filter out non-numeric characters from the input text. The handleChange function applies a regular expression (/[^0-9]/g) to eliminate any characters that fall outside the numeric range. This guarantees that only numbers remain, thereby enhancing validation of user input. Additionally, by specifying the keyboardType prop as "numeric", mobile devices display the numeric keyboard, further enhancing the user experience.

Example:

JavaScript

import React, { useState } from "react";
import {
    View,
    TextInput,
    StyleSheet,
    Text,
} from "react-native";

const App = () => {
    const [inputValue, setInputValue] = useState("");

    const handleChange = (text) => {
        // Allow only numbers
        const numericValue = text.replace(/[^0-9]/g, "");
        setInputValue(numericValue);
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Geeksforgeeks</Text>
            <TextInput
                style={styles.input}
                onChangeText={handleChange}
                value={inputValue}
                keyboardType="numeric"
                placeholder="Enter numbers only"
                placeholderTextColor="#999"
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#f0f0f0",
    },
    title: {
        fontSize: 24,
        marginBottom: 20,
        color: "green",
        fontWeight: "bold",
    },
    input: {
        width: 250,
        height: 50,
        borderWidth: 2,
        borderColor: "#3498db",
        borderRadius: 10,
        paddingVertical: 10,
        paddingHorizontal: 20,
        fontSize: 18,
        color: "#333",
        backgroundColor: "#fff",
    },
});

export default App;

Steps to Run:

To run react native application use the following command:

npx expo start

To run on Android:

npx react-native run-android

To run on ios:

npx react-native run-ios

Output:
How-to-Restrict-TextInput-Accept-Only-Numbers-In-React-Native

Approach 2: Using isNaN Check

In this approach we are using the isNaN function to restrict input in React Native applications. When users input text, the function verifies if it is a valid number. If it fails this check, the input is disregarded, effectively preventing non-numeric entries. By employing this method, only numerical values are accepted, ultimately improving data accuracy and enhancing usability.