In this article we are going to implement a Age calculator using React Native. An age calculator app in React Native is a simple application that calculates a person’s age based on their birth date and the current date. It’s a simple utility designed to determine how many years, months, and days have passed since a person was born.
Preview of Final Output: Let us have a look at how the final output will look like.
Prerequisites
Steps to Create & Configure React Native App:
Step 1: Create a new React Native project.
npx react-native init TextEditorApp
Step 2: Navigate to the project directory:
cd TextEditorApp
Project Structure:
Approach
Age calculator app in React Native is a simple application that calculates a person’s age based on their birth date and the current date. Therefore, we will take date of birth as input from user and after entering date of birth when user click on calculate age then they will see their age in the format of years, months and days.
Example
import React, { useState } from "react" ;
import { View,Text,TextInput,
Button,StyleSheet,
} from "react-native" ;
const AgeCalculator = () => { const [birthdate, setBirthdate] =
useState( "" );
const [age, setAge] = useState( "" );
const calculateAge = () => {
const currentDate = new Date();
const birthdateArray =
birthdate.split( "/" );
if ( birthdateArray.length === 3 ) {
const day = parseInt(
birthdateArray[0], 10);
const month = parseInt(
birthdateArray[1], 10);
const year = parseInt(
birthdateArray[2],10);
if (!isNaN(day) &&
!isNaN(month) &&
!isNaN(year)) {
const birthDate =
new Date(year,month - 1,day);
// Calculate the age
const ageInMilliseconds =
currentDate - birthDate;
const ageInYears =
ageInMilliseconds /
(1000 * 60 * 60 * 24 * 365.25);
const ageYears =
Math.floor(ageInYears );
const ageMonths =
Math.floor(
(ageInYears - ageYears) * 12);
const ageDays =
Math.floor(
(ageInYears - ageYears) *
365.25 - ageMonths * 30.44);
setAge(
`Your age is : ${ageYears} years, ${ageMonths} months, and ${ageDays} days.`); return ;}}
setAge(
"Please enter a valid date in the format: dd/mm/yyyy" );};
return (
<View style={styles.container}>
<View style={styles.logo}>
<Text
style={
styles.logotext}>
{ " " }
GeekforGeeks{ " " }
</Text>
</View>
<Text style={styles.header}>
Age Calculator
</Text>
<TextInput
style={styles.input}
placeholder= "Enter your birthdate (dd/mm/yyyy)"
onChangeText={(text) =>
setBirthdate(text)}/>
<Button
title= "Calculate Age"
onPress={calculateAge}/>
<Text style={styles.result}>
{age}
</Text>
</View>
);}; const styles = StyleSheet.create({ container: {
flex: 1,
alignItems: "center" ,
backgroundColor: "#f0f0f0" ,
},
logo: {
width: 150,
height: 150,
backgroundColor: "lightgreen" ,
borderRadius: 150,
marginTop: 50,
},
logotext: {
alignItems: "center" ,
justifyContent: "center" ,
marginLeft: 25,
marginTop: 60,
fontWeight: "bold" ,
fontSize: 15,
},
header: {
fontSize: 24,
marginBottom: 20,
},
input: {
width: 200,
height: 40,
borderColor: "gray" ,
borderWidth: 1,
paddingLeft: 10,
marginBottom: 10,
},
result: {
fontSize: 20,
marginTop: 20,
},
}); export default AgeCalculator;
|
Steps to run your application:
Step 1: Type following command in your terminal.
npx expo start
Step 2: According to your operating system run the following command.
- To run on Android
npx react-native run-android
- To run on IOS
npx react-native run-ios
Output