BMI-Rechner-App in React Native

Der BMI-Rechner ist die klassische "Formular mit Berechnung"-App – ein gutes Beispiel für numerische Eingabevalidierung, abgeleitete Werte und eine visuelle Ergebnisdarstellung mit Kategorien-Farben.

1. Beschreibung

Body-Mass-Index: Gewicht (kg) / Größe (m)². Die App nimmt Größe (in cm, intern umgerechnet) und Gewicht als Text-Eingabe entgegen, wandelt sie in Zahlen um, berechnet den BMI und ordnet ihn einer von vier WHO-Kategorien mit passender Farbe zu.

2. Kurzes Beispiel

const bmi = gewichtKg / (groesseM * groesseM);
// z.B. 70 / (1.75 * 1.75) = 22.86

3. Komplettes Projekt: BMI-Rechner mit Kategorien

npx create-expo-app bmi-calculator-app
cd bmi-calculator-app

utils/bmi.js

export function berechneBmi(groesseCm, gewichtKg) {
  const groesseM = groesseCm / 100;
  return gewichtKg / (groesseM * groesseM);
}

export function bmiKategorie(bmi) {
  if (bmi < 18.5) return { label: 'Untergewicht', farbe: '#3b82f6' };
  if (bmi < 25) return { label: 'Normalgewicht', farbe: '#16a34a' };
  if (bmi < 30) return { label: 'Übergewicht', farbe: '#f59e0b' };
  return { label: 'Adipositas', farbe: '#dc2626' };
}

App.js

import { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import { berechneBmi, bmiKategorie } from './utils/bmi';

export default function App() {
  const [groesse, setGroesse] = useState('175');
  const [gewicht, setGewicht] = useState('70');
  const [ergebnis, setErgebnis] = useState(null);
  const [fehler, setFehler] = useState(null);

  function berechnen() {
    const groesseZahl = parseFloat(groesse.replace(',', '.'));
    const gewichtZahl = parseFloat(gewicht.replace(',', '.'));

    if (!groesseZahl || !gewichtZahl || groesseZahl <= 0 || gewichtZahl <= 0) {
      setFehler('Bitte gültige, positive Zahlen eingeben.');
      setErgebnis(null);
      return;
    }

    setFehler(null);
    const bmi = berechneBmi(groesseZahl, gewichtZahl);
    setErgebnis({ bmi, kategorie: bmiKategorie(bmi) });
  }

  return (
    <View style={styles.container}>
      <Text style={styles.titel}>BMI-Rechner</Text>

      <Text style={styles.label}>Größe (cm)</Text>
      <TextInput
        style={styles.input}
        value={groesse}
        onChangeText={setGroesse}
        keyboardType="decimal-pad"
      />

      <Text style={styles.label}>Gewicht (kg)</Text>
      <TextInput
        style={styles.input}
        value={gewicht}
        onChangeText={setGewicht}
        keyboardType="decimal-pad"
      />

      <TouchableOpacity style={styles.button} onPress={berechnen}>
        <Text style={styles.buttonText}>BMI berechnen</Text>
      </TouchableOpacity>

      {fehler && <Text style={styles.fehlerText}>{fehler}</Text>}

      {ergebnis && (
        <View style={[styles.ergebnisBox, { borderColor: ergebnis.kategorie.farbe }]}>
          <Text style={[styles.bmiWert, { color: ergebnis.kategorie.farbe }]}>
            {ergebnis.bmi.toFixed(1)}
          </Text>
          <Text style={[styles.kategorieText, { color: ergebnis.kategorie.farbe }]}>
            {ergebnis.kategorie.label}
          </Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 80, paddingHorizontal: 24 },
  titel: { fontSize: 24, fontWeight: 'bold', marginBottom: 24, textAlign: 'center' },
  label: { color: '#6b7280', marginBottom: 4 },
  input: { borderWidth: 1, borderColor: '#d1d5db', borderRadius: 8, padding: 10, marginBottom: 16, fontSize: 16 },
  button: { backgroundColor: '#2563eb', padding: 14, borderRadius: 8, alignItems: 'center' },
  buttonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
  fehlerText: { color: '#dc2626', marginTop: 12, textAlign: 'center' },
  ergebnisBox: { marginTop: 24, borderWidth: 2, borderRadius: 12, padding: 24, alignItems: 'center' },
  bmiWert: { fontSize: 36, fontWeight: 'bold' },
  kategorieText: { fontSize: 16, marginTop: 4 },
});

4. Erklärung

groesse.replace(',', '.') – berücksichtigt, dass deutsche Nutzer oft ein Komma statt eines Punkts als Dezimaltrennzeichen eingeben; ohne diese Normalisierung würde parseFloat('1,75') nur 1 liefern.
keyboardType="decimal-pad" zeigt eine numerische Tastatur MIT Dezimalpunkt – nutzerfreundlicher als die Standardtastatur für reine Zahlen-Eingabefelder.
Die Validierung (!groesseZahl || groesseZahl <= 0) prüft GLEICHZEITIG auf NaN (bei ungültiger Eingabe wie "abc", parseFloat liefert NaN, das ist "falsy") UND auf unsinnige negative/Null-Werte in einem einzigen Ausdruck.
bmiKategorie() ist bewusst als REINE Funktion (kein Component-State, keine Seiteneffekte) ausgelagert – leicht isoliert testbar und wiederverwendbar, sollte die App später um eine Verlaufsansicht erweitert werden.

5. Ausgaben

Ausgabe

Titel "BMI-Rechner", zwei beschriftete Eingabefelder (vorausgefüllt "175"/"70"), blauer "BMI berechnen"-Button. Nach Antippen erscheint eine umrandete Ergebnisbox mit großer Zahl "22.9" und Text "Normalgewicht", beide in Grün eingefärbt (Farbe wechselt zu Blau/Orange/Rot je nach BMI-Bereich). Bei ungültiger Eingabe (z.B. leeres Feld) erscheint stattdessen roter Text "Bitte gültige, positive Zahlen eingeben.".