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

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

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

compound assignment operator , swift basic operator , comparison operator , ternary conditional operator , simplyprogrammingIDEA.

Image
# Swift basic operator  In the last blog we start reading swift programming basic operator , we see all about operator and assignment and arithmetic operator in details. And in this blog we see some remaining operator . Compound assignment operator  In compound assignment operator we use ( = ) with other operator. var a = 5 print(a)       // 5 a += 2   the a += 2 is work as a = a + 2 and give the result of a + 2. print(a) // 7 a -= 4 print(a) // 3 Comparison Operators In swift there is comparison operators to compare . swift support all the standard comparison operaors. ·        (a == b) equal to operator ·        (a != b) not equal to operator ·        (a < b ) less than operator ·        (a > b) greater than operator ·        ( a >= b )...
Read more