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

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;

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

const App = () => {
    const [number, setNumber] = useState("");

    const handleNumberChange = (text) => {
        if (!isNaN(text)) {
            setNumber(text);
        }
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Geeksforgeeks</Text>
            <TextInput
                style={styles.input}
                value={number}
                onChangeText={handleNumberChange}
                keyboardType="numeric"
                placeholder="Enter a number"
            />
        </View>
    );
};

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

export default App;