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

This tutorial explains how to check value is a number or not a number using isNaN() function in react native application. The function isNaN() is used to check the value of any variable or state is a number or not. In this example we will check input is a number or not.

To Check Value is a Number or Not :

isNaN(Pass the Value to check); //It will return true if not a number else false

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.

Check Value is a Number using isNaN() in React Native

Lets see the complete source code that helps to check value is a number or not a number using isNaN() function in react native application with simple example.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

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

Step 4: create constructor block inside your App component and make a State named as Value. This state is used to get and store TextInput value.

constructor() {
    super();
    this.state = {
      Value: ''
    }
  }

Step 5: create a function named as checkValueIsNumberOrNot(). Using this function we will check Enter ed value in TextInput component is a number or not a number.

checkValueIsNumberOrNot = () => {
    if (isNaN(this.state.Value)) {
      // If the Given Value is Not Number Then It Will Return True and This Part Will Execute.
      Alert.alert("Value is Not Number");
    }
    else if(this.state.Value == ""){
      Alert.alert("Please Enter Some Text");
    }
    else {
      // If the Given Value is Number Then It Will Return False and This Part Will Execute.
      Alert.alert("Value is Number");
    }
  }

Step 6: Implement render method inside the App class and wrapped the below layout design inside the root View component.

render() {
    return (
      <View style={styles.Container}>

        <TextInput
          placeholder="Enter Some Text here"
          onChangeText={TextInputValue => this.setState({ Value: TextInputValue })}
          style={styles.TextInputStyle}
        />
        <Button title=" Check Value Is Number Or Not " onPress={this.checkValueIsNumberOrNot} />

      </View>
    );
  }

Step 7: Apply the below style sheet design. 

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  TextInputStyle:{    
    textAlign: 'center',
    height: 45,
    width: "95%",
    borderColor: "gray",
    borderWidth: 2,
    margin: 10
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to check value is a number or not a number using isNaN() function in react native application.

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


export default class App extends Component {

  constructor() {
    super();
    this.state = {
      Value: ''
    }
  }

  checkValueIsNumberOrNot = () => {
    if (isNaN(this.state.Value)) {
      // If the Given Value is Not Number Then It Will Return True and This Part Will Execute.
      Alert.alert("Value is Not Number");
    }
    else if(this.state.Value == ""){
      Alert.alert("Please Enter Some Text");
    }
    else {
      // If the Given Value is Number Then It Will Return False and This Part Will Execute.
      Alert.alert("Value is Number");
    }
  }

  render() {
    return (
      <View style={styles.Container}>

        <TextInput
          placeholder="Enter Some Text here"
          onChangeText={TextInputValue => this.setState({ Value: TextInputValue })}
          style={styles.TextInputStyle}
        />
        <Button title=" Check Value Is Number Or Not " onPress={this.checkValueIsNumberOrNot} />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  TextInputStyle:{    
    textAlign: 'center',
    height: 45,
    width: "95%",
    borderColor: "gray",
    borderWidth: 2,
    margin: 10
  },
});

Screenshot :

This is all about React Native Check Value Is Number Or Not Using isNaN() Validation. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.