Age Calculator Application In React Native

In this Blog we are going to develop a  Application in React-native in  which user enter there date of birth and get their age 

run following command to Create Project

npx react-native init AgeCalculator

now project is create in the folder 

import moment from "moment";

now do some magic  

import React,{ Component }from 'react';
import {View,Text,TouchableOpacity,TextInput,Platform,} from 'react-native';
import moment from "moment";

export default class HomeScreen extends Component {
  constructor(props){
    super(props)
      this.state={
        age: 'Age',
        dateofbirth: ' ',
        calculateAge: ' ',

}

calculateAge(){
var a = moment(new Date)
var b = moment(this.state.dateofbirth)
var years = a.diff(b, 'year');
b.add(years, 'years');
var months = a.diff(b, 'months');
b.add(months, 'months');
var days = a.diff(b, 'days');
var totalage = (years + ' years ' + months + ' months ' + days + ' days');
this.setState({calculateAge: totalage})
}  

render(){

return(

<View style={{flex: 1,backgroundColor: '#f6f6f6',alignItems: 'center'}}> 

<TextInput
                style ={{height: 40, marginLeft: 15,paddingLeft: 10,marginRight: 15,
                borderWidth: 1,borderRadius: 2, marginTop: 15,width: Dimensions.get('window').width-30}}
                value={this.state.dateofbirth}
                keyboardType="number-pad"
                placeholder = "YYYY-MM-DD"
                onChangeText={(text)=> {this.setState({dateofbirth: text});}}
                onSubmitEditing={()=>{this.calculateAge(this.state.dateofbirth);setTimeout(()=>{this.setState({age: this.state.calculateAge})},1000)
              }}     
                    ></TextInput>

 <Text  style =
               {{height: 40, marginLeft: 15,paddingLeft: 10,marginRight: 15,borderWidth: 1,borderRadius: 5,alignSelf: 'center',marginTop: 15,textAlign: 'center',width: Dimensions.get('window').width-30,padding: 10}}> {this.state.dateofbirth}</Text>

</View>

)

} 

}

npx react-native start

npx react-native run-ios

npx react-native run-android

 

Thank you.
  

Comments

Post a Comment

Popular posts from this blog

React-native pop up ,React-native Pop up hide on the touch of outside the pop up,

Image
Hide the Modal on the touch of outside the view Working with react-native there are many cases when you want and need to show the pop up,like when verification is done of password, Otp verification or you want to make custom Drop dwon and many other cases, and all these case you want on touch of out side the pop-up, pop-up should be dismiss, you can do this with the help of Modal in react-native, you can mangae the touch of out side the view and in side the view both , we can use the touchablewithoutfeedback but with the help of touchablewithoutfeedback you can't stop the touch of inside, if you use touchablewithoutfeedback and your user touch inside the view your view will be disapper, In this Post we learn how to manage the touch out side and inside the view:-   first of all import Modal from the react-native  import{Modal,View,TouchableOpacityWithOutFeedBack,Text}  After Importing the Modal set the state -  *if Your are using the Class component:- constructor(prop...
Read more

Simple function to Encryption on Mobile No,email id or any user information in react-native

Image
 Hii, EveryOne , today i am going to write a simple java script function , in which we change the format of number, suppose you get a mobile number form back-end or from the user and now you want to encrypt that number , mobile no is  - 9876543210 and you have to show the number in the following format mobile no is - 98XXXXXX10 , if you are beginner in mobile application development  you see this kind of situation,  so here is the function with the help of the this function you can handle the situation like this, you can convert e-mail, mobile no, card no, name and any user information , const changeTheNumber=(number)=>{ var newNum = number.toString() var res = ''; for(var i = 0; i<newNum.length; i++){ if (i > 1 && i < 8){ res = res + newNum[i].replace(newNum[i],'X') //console.log(res) }else { res = res + newNum[i] } } //console.log(newNum) //co...
Read more

Counter function for adding item in cart and select the item in the list

 Hii Friends , In this Blog  I am going to explore how can we make custom counter. the counter is very important in a Application and if you are going to develop a e-commerce application or and application in which you have to show the count of item you must have to use counter to count the item , I recently use counter for my application that is  similar  to Zomato application , in this application user can add the food in the cart so i need to counter to show how much item user has selected, this is very simple Program suppose you have a list of item which you want to select, from that list you pick some item in some quantity first you have to select the item which user tapped then you send the item in the parameter of function and implement the function design your view according to your need use two Touchableopacity for Plus and minus icon and one text to show the count of item, here is the simple function: - // function to select the item and perform action acco...
Read more