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.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View, Button, Alert, TextInput } from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, Text, View, Button, Alert, TextInput } from ‘react-native’;

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.

<br />
constructor()<br />
  {<br />
    super();</p>
<p>    this.state={</p>
<p>      Value : ”</p>
<p>    }<br />
  }

constructor()

{

super();

this.state={

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.

<br />
CheckValueIsNumberOrNot=()=>{</p>
<p>    if(isNaN(this.state.Value))<br />
    {<br />
      // If the Given Value is Not Number Then It Will Return True and This Part Will Execute.<br />
      Alert.alert(“Value is Not Number”);<br />
    }<br />
    else<br />
    {<br />
      // If the Given Value is Number Then It Will Return False and This Part Will Execute.<br />
      Alert.alert(“Value is Number”);<br />
    }</p>
<p>  }

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 the Given Value is Number Then It Will Return False and This Part Will Execute.

Alert.alert(“Value is Number”);

}

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.

<br />
render() {<br />
    return (<br />
      <View style={styles.MainContainer}></p>
<p>          <TextInput</p>
<p>              placeholder=”Enter Some Text here”</p>
<p>              onChangeText={ TextInputValue => this.setState({Value: TextInputValue}) }</p>
<p>              style={styles.TextInputStyle}<br />
            /></p>
<p>           <Button title=” Check Value Is Number Or Not ” onPress={this.CheckValueIsNumberOrNot} /></p>
<p>      </View><br />
    );<br />
  }

render() {

return (

<TextInput

placeholder=“Enter Some Text here”

onChangeText={ TextInputValue => this.setState({Value: TextInputValue}) }

style={styles.TextInputStyle}

</View>

);

}

5. Create Style for Root View and TextInput .

<br />
const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’<br />
  },<br />
  TextInputStyle:{</p>
<p>       textAlign: ‘center’,<br />
       height: 50,<br />
       width: ‘95%’,<br />
       marginBottom: 10<br />
     },<br />
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’

TextInputStyle:{

textAlign: ‘center’,

height: 50,

width: ‘95%’,

marginBottom: 10

});

6. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View, Button, Alert, TextInput } from ‘react-native’;</p>
<p>export default class App extends Component<{}> {</p>
<p>  constructor()<br />
  {<br />
    super();</p>
<p>    this.state={</p>
<p>      Value : ”</p>
<p>    }<br />
  }</p>
<p>  CheckValueIsNumberOrNot=()=>{</p>
<p>    if(isNaN(this.state.Value))<br />
    {<br />
      // If the Given Value is Not Number Then It Will Return True and This Part Will Execute.<br />
      Alert.alert(“Value is Not Number”);<br />
    }<br />
    else<br />
    {<br />
      // If the Given Value is Number Then It Will Return False and This Part Will Execute.<br />
      Alert.alert(“Value is Number”);<br />
    }</p>
<p>  }</p>
<p>  render() {<br />
    return (<br />
      <View style={styles.MainContainer}></p>
<p>          <TextInput</p>
<p>              placeholder=”Enter Some Text here”</p>
<p>              onChangeText={ TextInputValue => this.setState({Value: TextInputValue}) }</p>
<p>              style={styles.TextInputStyle}<br />
            /></p>
<p>           <Button title=” Check Value Is Number Or Not ” onPress={this.CheckValueIsNumberOrNot} /></p>
<p>      </View><br />
    );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’<br />
  },<br />
  TextInputStyle:{</p>
<p>       textAlign: ‘center’,<br />
       height: 50,<br />
       width: ‘95%’,<br />
       marginBottom: 10<br />
     },<br />
});