Activity:

Create a simple BMI Calculator

Build an APK file.

● Include your name in the application

● Create a short video demo showing that the app is working then upload it to your
youtube channel then post the link here.

● Follow the Module for Creating a project

https://drive.google.com/file/d/1ULB0YHkFuc2TJG0fWIkLtPOIxx60d_oi/view?
usp=drive_web&authuser=0

● Follow the Module for Creating APK file

https://docs.google.com/document/d/1dx8WfiuUFWIkO-
er3u3QSMfZWtUFQfdbVyDLoUp8KeM/edit?usp=drive_web&authuser=0

Sample Source Code:

App.js

import React, { useState } from 'react';

import { StyleSheet, View, Button, Alert, TextInput, Image, Input, Text } from 'react-native';
export default function App() {
const [number1, setNumber1] = useState(0);
const [number2, setNumber2] = useState(0);
const [total, setTotal] = useState(number1 + number2);

function addTogether() {
const newTotal = number1 + number2;
setTotal(newTotal);
document.getElementById("demo").innerHTML = "SUM: " + newTotal;
Alert.alert('Alert', 'SUM: ' + newTotal); // total has the old value in the render
}

return (
<View style={styles.container}>
<Text style={styles.txtcolor}>Welcome To my Page</Text>
<Text>Jopher F. Reyes</Text>

<TextInput
type="number"
placeholder="0"
value={number1}
onChangeText={v => {
setNumber1(Number.parseInt(v)); // Use parsed value from onChangeText
}}
/>
<TextInput
type="number"
placeholder="0"
value={number2}
onChange={e => {
setNumber2(Number.parseInt(e.nativeEvent.text)); // or get correct value from
nativeEvent onChange
}}
/>
<p id="demo"></p>
<Button onPress={addTogether} title="SUM" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-evenly',
},
image: {
width: 250,
height: 100,
},
input: {
width: 200,
borderColor: 'gray',
borderWidth: 1,
},
txtcolor: {
color: 'red',
},

});