BMI Calculator

Overview

A modern, full-featured BMI Calculator mobile app built with React Native and Expo. This production-ready application provides accurate BMI calculations with support for both metric and imperial units, age-adjusted results, and an intuitive, animated user interface. Perfect for health and fitness applications.

Features

• Dual Unit System: Toggle seamlessly between metric (kg/cm) and imperial (lb/in) measurements with automatic conversion
• Comprehensive Input Controls:
  • Gender selection (Male, Female, Other)
  • Age slider (10-100 years)
  • Weight slider with unit-specific ranges
  • Height slider with unit-specific ranges
• Live BMI Preview: Real-time BMI calculation displayed as you adjust inputs
• Animated UI: Smooth entrance animations on home screen with staggered card reveals and spring effects
• Results Screen: Detailed BMI analysis with visual gauge, category classification, and health insights
• Responsive Design: Optimized for all mobile screen sizes with safe area handling
• Dark Theme: Modern dark UI with accent colors (purple, green, yellow) for visual hierarchy
• Cross-Platform: Works on iOS and Android with platform-specific shadow rendering

Tech Stack

• Framework: React Native with Expo Router for navigation
• Language: TypeScript
• State Management: React Hooks (useState, useRef)
• Animations: React Native Animated API with spring and timing animations
• UI Components: React Native built-ins (View, Text, ScrollView, Pressable, TextInput)
• Safe Area: react-native-safe-area-context for notch/safe zone handling
• Styling: StyleSheet with custom theme system (colors, fonts, spacing, shadows)

Setup & Usage

Installation

# Install dependencies
npm install
# or
yarn install

# Start Expo development server
npx expo start

# Run on iOS simulator
i

# Run on Android emulator
a

# Run on web
w

Project Structure

├── app/
│   ├── _layout.tsx          # Root navigation layout
│   ├── index.tsx            # Home screen with hero section
│   ├── calculator.tsx       # BMI calculator input screen
│   └── results.tsx          # Results display screen
├── src/
│   ├── theme.ts             # Color, font, spacing constants
│   └── components/
│       ├── GenderSelector.tsx
│       ├── AnimatedSlider.tsx
│       └── InputCard.tsx