Loyola–ICAM Page No:

College of Engineering and Technology (LICET)

(Autonomous)
Loyola Campus, Nungambakkam, Chennai –600034

EX NO: 1
DATE:

Using react native, build a cross platform application for a BMI calculator

AIM:

PROCEDURE:
Step 1: Install Node Js from the following link
https://nodejs.org/en/download

Step 2: Install the necessary npx commands using

1. npm install create-expo-app

2. npm install expo-cli

3. npm install [email protected]
4. npm install react-native-web@~0.19.13

NAME:BETINA SELVIS B REG NO: 311122205010

 Loyola–ICAM Page No:
College of Engineering and Technology (LICET)
(Autonomous)
Loyola Campus, Nungambakkam, Chennai –600034

Step 3: Create a react-native application using the command

> npx create-expo-app BMICalculatorApp –template blank

Step 4: Now open the application in VSCode

Step 5: Now make changes to the index.tsx file to create the BMI Calculator
Step 6: First define the required variables
Step 7: Create the function countBmi to calculate the BMI based on the input values
Step 8: Read input from the user using the TextInput to get the height, weight, age and Gender
Step 9: Validate the user input using the validateForm function to get the proper details.
Step 10: Run the application on the web using the command
npm run web
Step 11: View the output in the browser by going to the url
http://locaslhost:8081/

PROGRAM:
//App.js

import React, { useState } from 'react';

import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
const App = () => {
const [age, setAge] = useState('');
const [height, setHeight] = useState('');
const [weight, setWeight] = useState('');
const [gender, setGender] = useState('');
const [bmiResult, setBmiResult] = useState(null);
const validateForm = () => {
if (!age || !height || !weight || !gender) {
alert('All fields are required!');
} else {
countBmi(); } };
const countBmi = () => {
const bmi = (parseFloat(weight) /
((parseFloat(height) / 100) ** 2)).toFixed(2);

let result = '';

if (bmi < 18.5) {
result = 'Underweight';
} else if (bmi >= 18.5 && bmi <= 24.9) {

NAME:BETINA SELVIS B REG NO: 311122205010

 Loyola–ICAM Page No:
College of Engineering and Technology (LICET)
(Autonomous)
Loyola Campus, Nungambakkam, Chennai –600034

result = 'Healthy';
} else if (bmi >= 25 && bmi <= 29.9) {
result = 'Overweight';
} else if (bmi >= 30 && bmi <= 34.9) {
result = 'Obese';
} else if (bmi >= 35) { result = 'Extremely obese'; }

setBmiResult({ bmi, result });

setAge('');
setHeight('');
setWeight('');
setGender(''); };

return (
<View style={styles.container}>
<Text style={styles.header}>BMI Calculator </Text>
<View style={styles.form}>
<View style={styles.inputRow}>
<Text style={styles.label}> Age </Text>
<TextInput
style={styles.textInput}
placeholder="Enter your age"
onChangeText={setAge}
value={age}
keyboardType="numeric" /> </View>
<View style={styles.inputRow}>
<Text style={styles.label}> Height (cm) </Text>
<TextInput style={styles.textInput}
placeholder="Enter your height"
onChangeText={setHeight}
value={height}
keyboardType="numeric" /> </View>
<View style={styles.inputRow}>
<Text style={styles.label}> Weight (kg) </Text>
<TextInput
style={styles.textInput}
placeholder="Enter your weight"
onChangeText={setWeight}
value={weight}
keyboardType="numeric" /> </View>

NAME:BETINA SELVIS B REG NO: 311122205010

 Loyola–ICAM Page No:
College of Engineering and Technology (LICET)
(Autonomous)
Loyola Campus, Nungambakkam, Chennai –600034

<View style={styles.genderRow}>
<TouchableOpacity
style={[
styles.genderButton,
gender === 'male' && styles.selectedGender,]}
onPress={() => setGender('male')} >
<Text style={styles.genderText}> Male </Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.genderButton,
gender === 'female' && styles.selectedGender,
]}
onPress={() => setGender('female')}>
<Text style={styles.genderText}>Female</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={styles.submitButton}
onPress={validateForm} >
<Text style={styles.submitButtonText}>
Calculate BMI
</Text>
</TouchableOpacity>
{bmiResult && (
<View style={styles.resultContainer}>
<Text style={styles.resultLabel}>
BMI:
</Text>
<Text style={styles.resultText}>
{bmiResult.bmi}
</Text>
<Text style={styles.resultLabel}>
Result:
</Text>
<Text style={styles.resultText}>
{bmiResult.result}
</Text> </View>)} </View></View>);};

const styles = StyleSheet.create({

container: {

NAME:BETINA SELVIS B REG NO: 311122205010

 Loyola–ICAM Page No:
College of Engineering and Technology (LICET)
(Autonomous)
Loyola Campus, Nungambakkam, Chennai –600034

flex: 1,
backgroundColor: '#eef2f3',
alignItems: 'center',
justifyContent: 'center', },
header: {
fontSize: 28,
fontWeight: 'bold',
color: '#289df6',
marginBottom: 20, },
form: {
backgroundColor: '#fff',
borderRadius: 20,
padding: 20,
width: '90%',
elevation: 5,
},
inputRow: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 20,
},
label: {
flex: 1,
fontSize: 18,
fontWeight: 'bold',
marginRight: 10,
},
textInput: {
flex: 2,
height: 40,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 10,
paddingLeft: 10,
fontSize: 16,
},
genderRow: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 20, },

NAME:BETINA SELVIS B REG NO: 311122205010

 Loyola–ICAM Page No:
College of Engineering and Technology (LICET)
(Autonomous)
Loyola Campus, Nungambakkam, Chennai –600034

genderButton: {
flex: 1,
height: 40,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#dbeffe',
padding: 10,
margin: 10,
},
selectedGender: {
backgroundColor: '#289df6',
},
genderText: {
fontSize: 16,
fontWeight: 'bold',
color: '#333',
},
submitButton: {
backgroundColor: '#289df6',
borderRadius: 10,
height: 50,
justifyContent: 'center',
alignItems: 'center', },
submitButtonText: {
fontSize: 18,
fontWeight: 'bold',
color: '#fff', },
resultContainer: {
marginTop: 20, },
resultLabel: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 5, },
resultText: { fontSize: 16, },});
export default App;

OUTPUT:

NAME:BETINA SELVIS B REG NO: 311122205010

 Loyola–ICAM Page No:
College of Engineering and Technology (LICET)
(Autonomous)
Loyola Campus, Nungambakkam, Chennai –600034

RESULT:

NAME:BETINA SELVIS B REG NO: 311122205010