React Native Mini Project (BMI Calaculator)

bmi.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableOpacity,
  Image,
  Alert
} from 'react-native';

export default class LoginView extends Component {
    
    state = {
height: 0,
mass: 0,
resultNumber: 0,
resultText: ""
};
handleCalculate = () => {
let imc = this.state.mass / (this.state.height * 0.01) ** 2;
this.setState({
resultNumber: imc.toFixed(2)
});
if (imc < 18.5) {
this.setState({ resultText: "Underweight" });
} else if (imc > 18.5 && imc < 25) {
this.setState({ resultText: "Normal Weight" });
} else if (imc >= 25 && imc < 30) {
this.setState({ resultText: "Overweight" });
} else {
this.setState({ resultText: "Obesity" });
}
};

  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.result}>BMI Calculator</Text>
        <View style={styles.inputContainer}>
          
          <Image style={styles.inputIcon} source={{uri:    
          'https://png.icons8.com/message/ultraviolet/50/3498db'}}/>
        <TextInput
          placeholder="Enter Mass"
          keyboardType="numeric"
          style={styles.input}
          onChangeText={mass => {
          this.setState({ mass });
          }}
          />
        </View>
        
        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri:    
          'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}/>
        <TextInput
           placeholder="Enter Height"
           keyboardType="numeric"
           style={styles.input}
           onChangeText={height => {
           this.setState({ height });
           }}
        />
        </View>

       

            <TouchableOpacity
style={styles.button}
onPress={this.handleCalculate}
>
<Text style={styles.buttonText}>Calculate </Text>
</TouchableOpacity>
<Text style={styles.result}>{this.state.resultNumber}</Text>
<Text style={[styles.result, { fontSize: 35 }]}>
{this.state.resultText}
</Text>
        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#7FFFD4',
  },
  inputContainer: {
      borderBottomColor: '#F5FCFF',
      backgroundColor: '#FFFFFF',
      borderRadius:30,
      borderBottomWidth: 1,
      width:250,
      height:45,
      marginBottom:20,
      flexDirection: 'row',
      alignItems:'center'
  },
 
  inputIcon:{
    width:30,
    height:30,
    marginLeft:15,
    justifyContent: 'center'
  },
  button: {
backgroundColor: "#1D1D1B"
},
buttonText: {
alignSelf: "center",
padding: 10,
fontSize: 20,
color: "#FFCB1F",
fontWeight: "bold"
},
result: {
alignSelf: "center",
color: "#FFCB1F",
fontSize: 35,
padding: 10,
fontWeight: "bold"
}
});