React Native Check Value Is Number Or Not Using isNaN() Validation

The isNaN() number function is used to check any given Variable or State for Number value. This is mostly used to set validation on any variable in react native app. So in this tutorial we would going to create a react native android iOS app in which we would get the TextInput value on button click and Check Value Is Number Or Not Using isNaN() Validation function.

Note : If the value do not contain the number then it will return True and if the value contain number value then it will return us False.

Contents in this project Check Value Is Number Or Not Using isNaN() Validation in React Native:

1. Import StyleSheet, Text, View, Button, Alert and TextInput component in react native project.

2. Create constructor() in your project and Inside the constructor() we would declare a State named as Value. This state is used to get and store TextInput value.

3. Create a function named as CheckValueIsNumberOrNot(). Inside this function we would check the State Value using isNaN() function. We would use isNaN() function with IF – Else condition.

4. Create a TextInput and Button in Root View in render’s return block. We would store the TextInput value in Value State using onChangeText() method. After that we would call the CheckValueIsNumberOrNot() function on Button onPress event.

5. Create Style for Root View and TextInput .

6. Complete source code for App.js File :

Screenshot in Android device :

Screenshot in iOS device :


One Comment

  1. import React, {useState} from ‘react’;
    import {StyleSheet, View, Text, Button, Platform, TextInput} from ‘react-native’;

    import DateTimePicker from ‘@react-native-community/datetimepicker’;

    const App = () => {
    const [isPickerShow, setIsPickerShow] = useState(false);
    const [date, setDate] = useState(new Date(;

    const showPicker = () => {

    const onChange = (event, value) => {

    return (


    {!isPickerShow && (


    {isPickerShow && (



    const styles = StyleSheet.create({
    container: {
    display: ‘flex’,
    flexDirection: ‘column’,
    alignItems: ‘center’,
    flex: 1,
    justifyContent: ‘center’,
    padding: 50,
    pickedDateContainer: {
    padding: 20,
    backgroundColor: ‘#eee’,
    borderRadius: 10,
    pickedDate: {
    fontSize: 18,
    color: ‘black’,
    btnContainer: {
    padding: 30,

    datePicker: {
    width: 320,
    height: 260,
    display: ‘flex’,
    justifyContent: ‘center’,
    alignItems: ‘flex-start’,

    export default App;

Leave a Reply

Your email address will not be published. Required fields are marked *