How can I have a dropdown option for user (React-Native App)?-CodePudding

I am creating a BMI Calculator in react-native. One of the things I am unable to figure out is how to place a dropdown either within the TextInput field or beside it.

Here is my code:

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

 import DropDownPicker from 'react-native-dropdown-picker';

 class Inputs extends Component {
    state = {
       height: '',
       weight: '',
       bmi: '',
       BmiResult: '',
    }
    handleHeight = (text) => {
       this.setState({ height: text })
    }
    handleWeight = (text) => {
       this.setState({ weight: text })
    }
    calculate = (height, weight) => {
       //calculation
       var result = (parseFloat(weight)*10000)/(parseFloat(height)*parseFloat(height));
       result = result.toFixed(2);
       //display result
       this.setState({ bmi: result })
       if(result<18.5){
          this.setState({BmiResult:'Underweight'})
       }
       else if(result>=18.5&&result<25){
          this.setState({BmiResult:'Normal weight'})
       }
       else if(result>=25&&result<30){
          this.setState({BmiResult:'Overweight'})
       }
       else if(result>=30){
          this.setState({BmiResult:'Obese'})
       }
       else{
          alert('Incorrect Input!');
          this.setState({BmiResult:''})
       }
    }
    render() {
       return (
          <View style = {styles.container}>
 <Text style={styles.title}>BMI Calculator</Text>


             <Text  style = {styles.label}>Height</Text>
             <TextInput style = {styles.input}
                underlineColorAndroid = "transparent"
                placeholder = "Height (Cm)"
                autoCapitalize = "none"
                onChangeText = {this.handleHeight}/>
              //<Text style = {styles.label}>CMS or FT</Text>

              <Text  style = {styles.label}>Weight</Text>
              <TextInput style = {styles.input}
                underlineColorAndroid = "transparent"
                placeholder = "Weight (Kg)"
                autoCapitalize = "none"
                onChangeText = {this.handleWeight}/>
              //<Text style = {styles.label}>cms or ft</Text>

             <TouchableOpacity
                style = {styles.submitButton}
                onPress = {
                   () => this.calculate(this.state.height, this.state.weight)
                }>
                <Text style = {styles.submitButtonText}> Calculate </Text>
             </TouchableOpacity>
 <Text style = {styles.output}>{this.state.bmi}</Text>
             <Text style = {styles.resultText}>{this.state.BmiResult}</Text>
 </View>
       )
    }
 }
 export default Inputs
 const styles = StyleSheet.create({
    container: {
       paddingTop: 23,

    },
    input: {
       margin: 15,
       height: 40,
       borderWidth: 1,
       padding: 10,
    },
    submitButton: {
       backgroundColor: '#ff6666',
       padding: 10,
       margin: 15,
       height: 40,
    },
    submitButtonText:{
       textAlign: "center",
       color: 'white',
      // fontWeight:"bold",
       fontSize: 18,
    },
    output:{
       textAlign: "center",
       fontSize: 30,
    },
    title:{
       paddingTop:30,
       paddingBottom:10,
       textAlign: "center",
       fontSize: 30,
       fontWeight:"bold",
    },
    resultText:{
       paddingTop:20,
       paddingBottom:10,
       textAlign: "center",
       fontSize: 30,
       color: 'blue'
    },
    label:{
       marginLeft: 15,
    }
 })

Here is a screenshot of the app running:

Click Here To View Screenshot Of App Running

I want to add a dropdown where the user can pick either

KG or LBS for the weight.
CMS or FT for the height.

Any help or guidance will be appreciated.

Thank you.

CodePudding user response：

This will help you

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

    import DropDownPicker from 'react-native-dropdown-picker';

    class Inputs extends Component {
     state = {
        height: '',
        weight: '',
        bmi: '',
        BmiResult: '',
        heightOpen: false,
        heightValue: null,
        heightItems : [
          {label: 'CMS', value: 'CMS'},
          {label: 'FT', value: 'FT'}
        ],
        weightOpen: false,
        weightValue: null,
        weightItems : [
          {label: 'KG', value: 'KG'},
          {label: 'LBS', value: 'LBS'}
        ]

      };

      setWeightOpen = (weightOpen) => {
        this.setState({
          weightOpen,
          heightOpen: false
        });
      }

      setWeightValue = (callback) => {
        this.setState(state => ({
          weightValue: callback(state.weightValue)
        }));
      }

      setWeightItems = (callback) => {
        this.setState(state => ({
          weightItems: callback(state.weightItems)
        }));
      }

      setHeightOpen = (heightOpen) => {
        this.setState({
          heightOpen,
          weightOpen: false
        });
      }

      setHeightValue = (callback) => {
        this.setState(state => ({
          heightValue: callback(state.heightValue)
        }));
      }

      setHeightItems = (callback) => {
        this.setState(state => ({
          heightItems: callback(state.heightItems)
        }));
      }

      handleHeight = (text) => {
        this.setState({ height: text });
      };
      handleWeight = (text) => {
        this.setState({ weight: text });
      };
      calculate = (height, weight) => {
        //calculation
        var result =
          (parseFloat(weight) * 10000) / (parseFloat(height) * parseFloat(height));
        result = result.toFixed(2);
        //display result
        this.setState({ bmi: result });
        if (result < 18.5) {
          this.setState({ BmiResult: 'Underweight' });
        } else if (result >= 18.5 && result < 25) {
          this.setState({ BmiResult: 'Normal weight' });
        } else if (result >= 25 && result < 30) {
          this.setState({ BmiResult: 'Overweight' });
        } else if (result >= 30) {
          this.setState({ BmiResult: 'Obese' });
        } else {
          alert('Incorrect Input!');
          this.setState({ BmiResult: '' });
        }
      };
      
    render() {
        return (
          <View style={styles.container}>
            <Text style={styles.title}>BMI Calculator</Text>
            <Text style={styles.label}>Height</Text>
            <DropDownPicker
              placeholder={'Select Height'}
              open={this.state.heightOpen}
              value={this.state.heightValue}
              style={[styles.input, {flexDirection: 'row'}]}
              items={this.state.heightItems}
              setOpen={this.setHeightOpen}
              setValue={this.setHeightValue}
              setItems={this.setHeightItems}
            />

            <TextInput
              disabled={ this.state.heightValue == null ? true : false}
              style={styles.input}
              underlineColorAndroid="transparent"
              placeholder={this.state.weightValue == null ? "Height " : "Height in 
              " this.state.weightValue}
              autoCapitalize="none"
              onChangeText={this.handleHeight}
            />
            //<Text style={styles.label}>CMS or FT</Text>
            <Text style={styles.label}>Weight</Text>

            <DropDownPicker
              placeholder={'Select Weight'}
              open={this.state.weightOpen}
              value={this.state.weightValue}
              style={[styles.input, {flexDirection: 'row'}]}
              items={this.state.weightItems}
              setOpen={this.setWeightOpen}
              setValue={this.setWeightValue}
              setItems={this.setWeightItems}
            />

            <TextInput
              disabled={ this.state.weightValue == null ? true : false}
              style={styles.input}
              underlineColorAndroid="transparent"
              placeholder={this.state.weightValue == null ? "Weight " : "Weight in 
              " this.state.weightValue}
              autoCapitalize="none"
              onChangeText={this.handleWeight}
            />
            //<Text style={styles.label}>cms or ft</Text>
            <TouchableOpacity
              style={styles.submitButton}
              onPress={() => this.calculate(this.state.height, this.state.weight)}>
                 <Text style={styles.submitButtonText}> Calculate </Text>
            </TouchableOpacity>
            <Text style={styles.output}>{this.state.bmi}</Text>
            <Text style={styles.resultText}>{this.state.BmiResult}</Text>
          </View>
        );
      }
    }
    export default Inputs;
    const styles = StyleSheet.create({
      container: {
        paddingTop: 23,
      },
      input: {
        margin: 15,
        height: 40,
        borderWidth: 1,
        padding: 10,
      },
      submitButton: {
        backgroundColor: '#ff6666',
        padding: 10,
        margin: 15,
        height: 40,
      },
      submitButtonText: {
        textAlign: 'center',
        color: 'white',
        // fontWeight:"bold",
        fontSize: 18,
      },
      output: {
        textAlign: 'center',
        fontSize: 30,
      },
      title: {
        paddingTop: 30,
        paddingBottom: 10,
        textAlign: 'center',
        fontSize: 30,
        fontWeight: 'bold',
      },
      resultText: {
        paddingTop: 20,
        paddingBottom: 10,
        textAlign: 'center',
        fontSize: 30,
        color: 'blue',
      },
      label: {
        marginLeft: 15,
      },
    });

Also, you can add Styling on your own. For better knowledge about the dropdown library check this link out.