How to TextInput Accept Only Numbers in React Native?

Hi Guys,

This example is focused on how to TextInput accept only numbers in react native. you can see react native TextInput accepts only numbers. I’m going to show you about how to only allow for numbers on TextInput in react native. Here you will learn TextInput allow only numbers in react native. So, let's follow few step to create example of react native input number only.

In this instance TextInput only accepts numbers, a warning message is shown after you enter Except a numeric value.

In the first step run the following command to create a project.

expo init ExampleApp

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, View, TextInput, Button, Keyboard, Alert } from 'react-native';

const App = () => {
    const [number, setNumber] = React.useState('');

    const onChanged = (text) => {
        let newText = '';
        let numbers = '0123456789';
    
        for (var i=0; i < text.length; i++) {
            if(numbers.indexOf(text[i]) > -1 ) {
                newText = newText + text[i];
            }
            else {
                alert("please enter numbers only");
            }
        }
        setNumber(newText);
    }

    const onPress = () => {
        if (number.length !== 0) {
            Alert.alert(
                "Confirm Number",
                number,
                [
                    {
                        text: "Cancel",
                        onPress: () => console.log("Cancel Pressed"),
                    },

                    { 
                        text: "OK", 
                        onPress: () => console.log("OK Pressed"),
                    },
                ],
            );
            setNumber('');
            Keyboard.dismiss();
        }
    }

    return (
        <View style={styles.container}>
            <TextInput
                keyboardType='numeric'
                onChangeText={text => onChanged(text)}
                value={number}
                style={styles.input}
                placeholder='Number'
                maxLength={10}
            />
            <View style={styles.buttonContainer}>
                <Button 
                    title='submit'
                    onPress={() => onPress()}
                />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    input: {
        borderWidth:1,
        width:'80%',
        borderColor:'#c7c3c3',
        padding:10,
    },
    buttonContainer: {
        marginTop:10,
        width:'80%',
    },
})

export default App;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...