Scribd
Upload
14 views2 pages

CCS332 App Lab Ex Set 1

Uploaded by

revathi udhayakumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
14 views2 pages

CCS332 App Lab Ex Set 1

Uploaded by

revathi udhayakumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 2

1.design a cross platform application to find body mass index.

use react
native to do the same

1. Set Up Your Development Environment

Before starting, make sure you have Node.js, npm (or Yarn), and React Native CLI installed
on your machine. You'll also need an emulator or a physical device to test your app.

2. Create a New React Native Project


npx react-native init BMICalculator
cd BMICalculator

3. Install Dependencies

You may need some additional libraries for styling and form handling, such as react-
native-paper for UI components.

npm install react-native-paper

4. Create the BMI Calculator Component

Here’s a basic example of how you could create the BMI calculator in React Native:

App.js

import React, { useState } from 'react';


import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { Provider as PaperProvider, TextInput as PaperInput, Button as
PaperButton } from 'react-native-paper';

const App = () => {


const [weight, setWeight] = useState('');
const [height, setHeight] = useState('');
const [bmi, setBmi] = useState(null);

const calculateBMI = () => {


const weightNum = parseFloat(weight);
const heightNum = parseFloat(height);
if (weightNum > 0 && heightNum > 0) {
const result = weightNum / (heightNum * heightNum);
setBmi(result.toFixed(2));
} else {
alert('Please enter valid numbers for weight and height.');
}
};

return (
<PaperProvider>
<View style={styles.container}>
<Text style={styles.title}>BMI Calculator</Text>
<PaperInput
label="Weight (kg)"
value={weight}
onChangeText={setWeight}
keyboardType="numeric"
style={styles.input}
/>
<PaperInput
label="Height (m)"
value={height}
onChangeText={setHeight}
keyboardType="numeric"
style={styles.input}
/>
<PaperButton mode="contained" onPress={calculateBMI}
style={styles.button}>
Calculate BMI
</PaperButton>
{bmi && (
<Text style={styles.result}>Your BMI is {bmi}</Text>
)}
</View>
</PaperProvider>
);
};

const styles = StyleSheet.create({


container: {
flex: 1,
justifyContent: 'center',
padding: 16,
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 16,
textAlign: 'center',
},
input: {
marginBottom: 16,
},
button: {
marginTop: 16,
},
result: {
marginTop: 16,
fontSize: 18,
textAlign: 'center',
},
});

export default App;

5. Run the Application

To see your application in action, use the following command:

npx react-native run-android


# or
npx react-native run-ios

You might also like