Check TextInput Entered Value is Number or Not in React Native

Hello friends, This is our first tutorial on TextInput component in react native. In today’s tutorial we would discuss about Number.isNaN() method of JavaScript in react native. As we all know react native is a JavaScript based frameworks and all the JavaScript inbuilt methods works same in react native. Now the Number.isNaN() method is used to check whether the entered value type is number or not. If the value type is not a number then it will return us True and If the entered value type is number then it will return us False. To be more specific full form of isNan() is Not A Number.So in this tutorial we would learn about Check TextInput Entered Value is Number or Not in React Native.

Now what we’re going to do is We would make a TextInput component in react native, Now when user enter value in TextInput and click on the button then using the isNaN method we would check that the typed value is number type or not.

Contents in this project Check TextInput Entered Value is Number or Not in React Native :-

1. Open your project’s main App.js file and import useState, Alert, Button, SafeAreaView, StyleSheet and TextInput component.

2. Creating our main App component.

3. Creating a State named as input with State update method setInput. We would use this State to hold TextInput entered value.

4. Creating a function named as checkValueStatus(). In this function we would check whether entered value is Number type or not and print a Alert message on screen.

5. Creating return() block, Here we would make 1 Text Input component and 1 Button component.

6. Creating Style.

7. Complete Source Code for App.js File :-

Screenshots:-

Check TextInput Entered Value is Number or Not in React Native Check TextInput Entered Value is Number or Not in React Native

Leave a Reply

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