Create a BMI Calculator App using React-Native

This project demonstrates how to build a BMI (Body Mass Index) Calculator using React Native, allowing users to estimate body fat based on height and weight. It provides a simple and interactive way for users to calculate their BMI and understand their health category.

• Input fields for age, height, weight, and gender to calculate BMI accurately.
• Automatically computes BMI and displays the corresponding health category.
• Helps learn React Native concepts like user input handling, state management, and dynamic UI updates.

Here, We start implementing the React Native BMI Calculator App step by step, from setup to task management features.

Step 1: Create a React Native Application

Create a new React Native project for BMICalculatorApp

npx create-expo-app BMICalculatorApp

Step 2: ​Change the directory to the project folder

cd BMICalculatorApp

Project Structure

👁 Image

Package.json

{
 "dependencies": {
 "react-native-paper": "4.9.2",
 "@expo/vector-icons": "^13.0.0"
 }
}

Approach

• validateForm function: Checks whether all required fields (age, height, weight, and gender) are filled. If any field is empty, it shows an alert asking the user to complete the form.
• countBmi function: Calculates BMI using the formula BMI = weight (kg) / height² (m²) and displays the result up to two decimal places using .toFixed(2).
• BMI categorization: Assigns a health category such as Underweight, Healthy, or Overweight based on the calculated BMI to help users understand their health status.

Example: Here, We are using the above-explained apporach.

App.js

Step 3: To run react native application use the following command:

npx expo start

To run on Android:

npx react-native run-android

To run on iOS:

npx react-native run-ios

Output: