react-native-elements#Input JavaScript Examples

render() {
        return(
            <Input
                containerStyle={{
                    width: '100%',
                }}
                inputContainerStyle={{
                    borderColor: this.props.screenProps.theme.notVeryVisibleColour,
                    borderWidth: this.props.disabled ? 0 : 1,
                    borderRadius: 2,
                    width: '100%',
                    height: 30,
                }}
                inputStyle={{
                    color: this.props.screenProps.theme.primaryColour,
                    fontSize: 14,
                    backgroundColor: this.props.disabled ?
                                     this.props.screenProps.theme.disabledColour :
                                     this.props.screenProps.theme.backgroundColor,
                }}
                maxLength={64}
                value={this.props.paymentID}
                onChangeText={(text) => {
                    if (this.props.onChange) {
                        this.props.onChange(text);
                    }
                }}
                errorMessage={this.props.error}
                editable={!this.props.disabled}
                placeholder={this.props.disabled ? 'Disabled when using an integrated address' : ''}
            />
        );
    }

render() {
        return(
            <Input
                containerStyle={{
                    width: '100%',
                }}
                inputContainerStyle={{
                    borderColor: this.props.screenProps.theme.notVeryVisibleColour,
                    borderWidth: 1,
                    borderRadius: 2,
                    width: '100%',
                    height: 30,
                }}
                inputStyle={{
                    color: this.props.screenProps.theme.primaryColour,
                    fontSize: 14,
                }}
                maxLength={Config.integratedAddressLength}
                value={this.props.address}
                onChangeText={(text) => {
                    if (this.props.onChange) {
                        this.props.onChange(text);
                    }
                }}
                errorMessage={this.props.error}
            />
        );
    }

ForgotPasswordScreen = ({ navigation }) => {
  const [inputEmailBorder, setInputEmailBorder] = React.useState(false)
  
  const [email, setEmail] = React.useState('')

  return (
    <View style={globalStyles.container}>
      <ChevronLeft size={24} style={styles.backButton} 
        onPress={navigation.goBack}
      />
      <Text style={styles.title}>Forget Password ?</Text>
      <Text style={[ styles.label, globalStyles.mt16, globalStyles.mb32 ]}>
        Please enter your email address to receive 4-digit code via email to create a new password.
      </Text>
      <Input
        placeholder="Enter Registered Email" 
        keyboardType="email-address"
        onFocus={() => setInputEmailBorder(true)}
        onBlur={() => setInputEmailBorder(false)}
        containerStyle={[ styles.inputMainContainer, {borderWidth: inputEmailBorder ? 1 : 0 } ]}
        inputStyle={styles.inputStyle}
        inputContainerStyle={[ styles.inputContainerStyle, { paddingTop: 5 }]}
        onChangeText={setEmail}
      />
      <Button
        title="Send Me Now"
        buttonStyle={styles.buttonBlockStyle}
        titleStyle={globalStyles.latoBold16}
        onPress={() => navigation.navigate('EnterCode')}
      />
    </View>
  )
}

EnterCodeScreen = ({ navigation }) => {
  return (
    <View style={globalStyles.container}>
      <ChevronLeft size={24} style={styles.backButton} 
        onPress={navigation.goBack}
      />
      <Text style={styles.title}>Enter Code</Text>
      <Text
        style={[ styles.label, globalStyles.mt16, globalStyles.mb32 ]}
      >
         We have sent an email with 4-digit password reset code. Enter code below to continue.
      </Text>
      <View style={{flexDirection: 'row'}}>
        <View style={ styles.inputRoundedContainer }>
          <Input style={styles.inputRoundedBackground} />
        </View>
        <View style={ styles.inputRoundedContainer }>
          <Input style={styles.inputRoundedBackground} />
        </View>
        <View style={ styles.inputRoundedContainer }>
          <Input style={styles.inputRoundedBackground} />
        </View>
        <View style={ styles.inputRoundedContainer }>
          <Input style={styles.inputRoundedBackground} />
        </View>
      </View>
      <Button
        title="Submit & Continue"
        buttonStyle={styles.buttonBlockStyle}
        titleStyle={globalStyles.latoBold16}
        onPress={() => navigation.navigate('ResetPassword')}
      />
    </View>
  )
}

render() {
        const {goBack} = this.props.navigation;
        return (
            <SafeAreaView style={{flex: 1,}}>
                <KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
                    enableAutomaticScroll={(Platform.OS === 'ios')}>
                        <Image source={require('../../assets/images/authBackground.png')} style={styles.backgroundContainer}/>
                    <Spinner
                        visible={this.state.spinner}
                        textContent={'Please wait...'}
                        overlayColor="rgba(0, 0, 0, 0.5)"
                        textStyle={{color: 'white'}}
                    />
                    <View style={styles.logoContainer}>
                        <Image source={require('../../assets/images/logo.png')} style={styles.logo}/>
                    </View>
                    <View style={styles.inputContainer}>
                        <Text style={styles.subtitle}>Please enter your email address</Text>
                        <Input inputContainerStyle={styles.inputStyle}
                               leftIcon={<Icon name="envelope" style={styles.iconSmallStyle} />}
                               inputStyle={styles.inputInnerStyle}
                               placeholder="Email" autoCapitalize="none" keyboardType="email-address"
                               onChangeText={(email) => { this.setState({email}); }}
                               value={this.state.email}
                               errorMessage={this.state.errorMessage} errorStyle={{paddingLeft: 20}} />
                    </View>
                    <View style={styles.buttonsContainer}>
                        <Button raised buttonStyle={styles.backButton} title="Back" onPress={() => goBack()} />
                        <Button raised buttonStyle={styles.loginButton} title="Send" onPress={this.onSend} />
                    </View>
                </KeyboardAwareScrollView>
            </SafeAreaView>
        );
    }

TextField = ({
  placeholder,
  keyboardType,
  containerStyle,
  inputStyle,
  inputContainerStyle,
  rightElement,
  onChangeText,
  value,
}) => {
  const [inputBorder, setInputBorder] = React.useState(false)

  return (
    <View>
      <Input
        placeholder={placeholder || "Please Apply a placeholder"}
        keyboardType={keyboardType || "default"}
        onFocus={() => setInputBorder(true)}
        onBlur={() => setInputBorder(false)}
        containerStyle={[containerStyle, {
          borderColor: inputBorder ? colors.primary : '#ccc',
        }]}
        inputStyle={ inputStyle || globalStyles.latoRegular}
        inputContainerStyle={inputContainerStyle || { borderBottomColor: '#fff'}}
        rightIcon={() => rightElement}
        onChangeText={onChangeText}
        value={value}
        // onEndEditing={() => console.log(value)}      
      />
    </View>
  )
}

render() {
        return(
            <Input
                containerStyle={{
                    width: '100%',
                }}
                inputContainerStyle={{
                    borderColor: this.props.screenProps.theme.notVeryVisibleColour,
                    borderWidth: 1,
                    borderRadius: 2,
                    width: '100%',
                    height: 30,
                }}
                inputStyle={{
                    color: this.props.screenProps.theme.primaryColour,
                    fontSize: 14,
                }}
                value={this.props.memo}
                onChangeText={(text) => {
                    if (this.props.onChange) {
                        this.props.onChange(text);
                    }
                }}
            />
        );
    }

render() {
        return(
            <Input
                containerStyle={{
                    width: '100%',
                }}
                inputContainerStyle={{
                    borderColor: this.props.screenProps.theme.notVeryVisibleColour,
                    borderWidth: 1,
                    borderRadius: 2,
                    width: '100%',
                    height: 30,
                }}
                inputStyle={{
                    color: this.props.screenProps.theme.primaryColour,
                    fontSize: 14,
                }}
                value={this.props.nickname}
                onChangeText={(text) => {
                    if (this.props.onChange) {
                        this.props.onChange(text);
                    }
                }}
                errorMessage={this.props.error}
            />
        );
    }

render() {
        return(
            <Input
                containerStyle={{
                    width: '100%',
                }}
                inputContainerStyle={{
                    borderColor: this.props.screenProps.theme.notVeryVisibleColour,
                    borderWidth: 1,
                    borderRadius: 2,
                    width: '100%',
                    height: 30,
                }}
                inputStyle={{
                    color: this.props.screenProps.theme.primaryColour,
                    fontSize: 14,
                }}
                maxLength={Config.integratedAddressLength}
                value={this.props.address}
                onChangeText={(text) => {
                    if (this.props.onChange) {
                        this.props.onChange(text);
                    }
                }}
                errorMessage={this.props.error}
            />
        );
    }

render() {
        return(
            <Input
                containerStyle={{
                    width: '100%',
                }}
                inputContainerStyle={{
                    borderColor: this.props.screenProps.theme.notVeryVisibleColour,
                    borderWidth: 1,
                    borderRadius: 2,
                    width: '100%',
                    height: 30,
                }}
                inputStyle={{
                    color: this.props.screenProps.theme.primaryColour,
                    fontSize: 14,
                }}
                value={this.props.nickname}
                onChangeText={(text) => {
                    if (this.props.onChange) {
                        this.props.onChange(text);
                    }
                }}
                errorMessage={this.props.error}
            />
        );
    }

render() {
        return(
            <Input
                containerStyle={{
                    width: '100%',
                }}
                inputContainerStyle={{
                    borderColor: this.props.screenProps.theme.notVeryVisibleColour,
                    borderWidth: 1,
                    borderRadius: 2,
                    width: '100%',
                    height: 30,
                }}
                inputStyle={{
                    color: this.props.screenProps.theme.primaryColour,
                    fontSize: 14,
                }}
                maxLength={Config.integratedAddressLength}
                value={this.props.address}
                onChangeText={(text) => {
                    if (this.props.onChange) {
                        this.props.onChange(text);
                    }
                }}
                errorMessage={this.props.error}
            />
        );
    }

render() {
        return(
            <Input
                containerStyle={{
                    width: '100%',
                }}
                inputContainerStyle={{
                    borderColor: this.props.screenProps.theme.notVeryVisibleColour,
                    borderWidth: this.props.disabled ? 0 : 1,
                    borderRadius: 2,
                    width: '100%',
                    height: 30,
                }}
                inputStyle={{
                    color: this.props.screenProps.theme.primaryColour,
                    fontSize: 14,
                    backgroundColor: this.props.disabled ?
                                     this.props.screenProps.theme.disabledColour :
                                     this.props.screenProps.theme.backgroundColor,
                }}
                maxLength={64}
                value={this.props.paymentID}
                onChangeText={(text) => {
                    if (this.props.onChange) {
                        this.props.onChange(text);
                    }
                }}
                errorMessage={this.props.error}
                editable={!this.props.disabled}
                placeholder={this.props.disabled ? 'Disabled when using an integrated address' : ''}
            />
        );
    }

render() {
        return(
            <Input
                containerStyle={{
                    width: '100%',
                }}
                inputContainerStyle={{
                    borderColor: this.props.screenProps.theme.notVeryVisibleColour,
                    borderWidth: 1,
                    borderRadius: 2,
                    width: '100%',
                    height: 30,
                }}
                inputStyle={{
                    color: this.props.screenProps.theme.primaryColour,
                    fontSize: 14,
                }}
                value={this.props.nickname}
                onChangeText={(text) => {
                    if (this.props.onChange) {
                        this.props.onChange(text);
                    }
                }}
                errorMessage={this.props.error}
            />
        );
    }

render() {
        return(
            <Input
                containerStyle={{
                    width: '100%',
                }}
                inputContainerStyle={{
                    borderColor: this.props.screenProps.theme.notVeryVisibleColour,
                    borderWidth: this.props.disabled ? 0 : 1,
                    borderRadius: 2,
                    width: '100%',
                    height: 30,
                }}
                inputStyle={{
                    color: this.props.screenProps.theme.primaryColour,
                    fontSize: 14,
                    backgroundColor: this.props.disabled ?
                                     this.props.screenProps.theme.disabledColour :
                                     this.props.screenProps.theme.backgroundColor,
                }}
                maxLength={64}
                value={this.props.paymentID}
                onChangeText={(text) => {
                    if (this.props.onChange) {
                        this.props.onChange(text);
                    }
                }}
                errorMessage={this.props.error}
                editable={!this.props.disabled}
                placeholder={this.props.disabled ? 'Disabled when using an integrated address' : ''}
            />
        );
    }

render() {
      const { t } = this.props;

        return(
            <View style={{ flex: 1, backgroundColor: this.props.screenProps.theme.backgroundColour }}>
                <View style={{
                    justifyContent: 'flex-start',
                    alignItems: 'flex-start',
                    marginTop: 60,
                    marginLeft: 30,
                    marginRight: 10,
                }}>
                    <Text style={{ fontFamily: 'Montserrat-SemiBold', color: this.props.screenProps.theme.primaryColour, fontSize: 25, marginBottom: 5 }}>
                        {t('whichBlock')}
                    </Text>
                </View>

                <View style={{ justifyContent: 'center', alignItems: 'flex-start' }}>
                    <Input
                        containerStyle={{
                            width: '90%',
                            marginLeft: 20,
                        }}
                        inputContainerStyle={{
                            borderColor: 'lightgrey',
                            borderWidth: 1,
                            borderRadius: 2,
                        }}
                        label={this.props.label}
                        labelStyle={{
                            marginBottom: 5,
                            marginRight: 2,
                        }}
                        keyboardType={'number-pad'}
                        inputStyle={{
                            color: this.props.screenProps.theme.primaryColour,
                            fontSize: 30,
                            marginLeft: 5
                        }}
                        errorMessage={this.state.errorMessage}
                        value={this.state.value}
                        onChangeText={(text) => this.onChangeText(text)}
                    />
                </View>

                <BottomButton
                    title={t('continue')}
                    onPress={() => this.props.navigation.navigate('ImportKeysOrSeed', { scanHeight: Number(this.state.value) })}
                    disabled={!this.state.valid}
                    {...this.props}
                />
            </View>
        );
    }

render() {
    let errorText = this.state.errorText;
    return (
      <Modal {...this.props} visible={undefined} style={styles.modal} avoidKeyboard={true}>
        <TouchableWithoutFeedback
          onPress={() => {
            Keyboard.dismiss();
          }}>
          <View style={styles.container}>
            <ProgressHUD ref={ref => (this.hud = ref)} />
            <View style={styles.wrap}>
              <View style={styles.titleWrap}>
                <View>
                  <TouchableHighlight activeOpacity={0.6} underlayColor="transparent" onPress={this.cancel.bind(this)}>
                    <View style={styles.closeBtn}>
                      <Image source={require("@img/qunfabao/icon_x.png")}></Image>
                    </View>
                  </TouchableHighlight>
                </View>
                <Text style={styles.title}>{i18n.t("qunfabao-paste-title")}</Text>
                <View style={{ width: 56 }}></View>
              </View>
              <View
                style={{
                  paddingHorizontal: 16,
                  paddingTop: 20,
                }}>
                <Input
                  multiline={true}
                  placeholder={this.placeholder}
                  placeholderTextColor={"#cccc"}
                  autoCapitalize="none"
                  returnKeyType="done"
                  underlineColorAndroid="transparent"
                  containerStyle={styles.containerStyle}
                  inputContainerStyle={styles.inputContainerStyle}
                  inputStyle={[
                    styles.inputStyle,
                    {
                      textAlignVertical: "top",
                    },
                  ]}
                  onChangeText={this.textChange}></Input>
                <Text
                  style={{
                    color: errorText ? "#EB4E3D" : Theme.textColor.mainTitle,
                    fontSize: 14,
                    paddingTop: 20,
                    lineHeight: 20,
                  }}>
                  {errorText ? errorText : i18n.t("qunfabao-paste-notice")}
                </Text>
                <View style={styles.foot}>
                  <Button
                    title={
                      this.state.recipientList.length > 0
                        ? i18n.t("qunfabao-paste-btn-2")
                        : i18n.t("qunfabao-paste-btn-1")
                    }
                    containerStyle={styles.nextButtonContainer}
                    buttonStyle={styles.nextButton}
                    onPress={this.confirm.bind(this)}></Button>
                </View>
              </View>
            </View>
          </View>
        </TouchableWithoutFeedback>
      </Modal>
    );
  }

render() {
        return(
            <Input
                containerStyle={{
                    width: '90%',
                    marginLeft: 20,
                    marginBottom: this.props.marginBottom || 0,
                }}
                inputContainerStyle={{
                    borderColor: this.props.screenProps.theme.notVeryVisibleColour,
                    borderWidth: 1,
                    borderRadius: 2,
                }}
                label={this.props.label}
                labelStyle={{
                    marginBottom: 5,
                    marginRight: 2,
                    color: this.props.screenProps.theme.slightlyMoreVisibleColour,
                }}
                rightIcon={
                    <Text style={{
                        fontSize: this.props.fontSize || 30,
                        marginRight: 10,
                        color: this.props.screenProps.theme.primaryColour
                    }}
                >
                        {Config.ticker}
                    </Text>
                }
                keyboardType={'number-pad'}
                inputStyle={{
                    color: this.props.screenProps.theme.primaryColour,
                    fontSize: this.props.fontSize || 30,
                    marginLeft: 5
                }}
                errorMessage={this.props.errorMessage}
                value={this.props.value}
                onChangeText={(text) => this.props.onChangeText(text)}
            />
        );
    }

ResetPasswordScreen = ({ navigation }) => {
  const [newPasswordSecureEntryToggle, setNewPasswordSecureEntryToggle] = useState(true)
  const [confPasswordSecureEntryToggle, setConfPasswordSecureEntryToggle] = useState(true)

  const [inputPasswordBorder, setInputPasswordBorder] = useState(false)
  const [inputConfPasswordBorder, setInputConfPasswordBorder] = useState(false)

  const [password, setPassword] = useState('')
  const [confPassword, setConfPassword] = useState('')

  return (
    <View style={globalStyles.container}>
      <ChevronLeft size={24} style={styles.backButton} 
        onPress={navigation.goBack}
      />
      <Text style={styles.title}>Reset Password</Text>
      <Text
        style={[ styles.label, globalStyles.mt16, globalStyles.mb32 ]}
      >
        Hi John Doe. Create new password for your Spree Shop account.
      </Text>
      <View style={globalStyles.containerFluid}>
        <Input
          placeholder="New Password" 
          onFocus={() => setInputPasswordBorder(true)}
          onBlur={() => setInputPasswordBorder(false)}
          secureTextEntry={newPasswordSecureEntryToggle}
          containerStyle={[ styles.inputMainContainer, { borderWidth: inputPasswordBorder ? 1 : 0 }]}
          inputStyle={ styles.inputStyle }
          inputContainerStyle={ styles.inputContainerStyle }
          rightIcon={<Eye size={24} style={{color: colors.gray}} onPress={() => setNewPasswordSecureEntryToggle(!newPasswordSecureEntryToggle)} />}
          onChangeText={setPassword}
        />
        <Input
          placeholder="Re-enter Password"
          onFocus={() => setInputConfPasswordBorder(true)}
          onBlur={() => setInputConfPasswordBorder(false)}
          secureTextEntry={confPasswordSecureEntryToggle}
          containerStyle={[ styles.inputMainContainer, { borderWidth: inputConfPasswordBorder ? 1 : 0 }]}
          inputStyle={ styles.inputStyle }
          inputContainerStyle={ styles.inputContainerStyle }
          rightIcon={<Eye size={24} style={{color: colors.gray}} onPress={() => setConfPasswordSecureEntryToggle(!confPasswordSecureEntryToggle)} />}
          onChangeText={setConfPassword}
        />
        <Button
          title="Submit & Login"
          buttonStyle={ styles.buttonBlockStyle }
          titleStyle={ globalStyles.latoBold16 }
          onPress={() => navigation.navigate('SignIn')}
        />
        <View style={styles.footer}>
          <Text style={styles.label}>Don't have an account ? </Text>
          <Text
            style={styles.footerAction}
            onPress={() => navigation.navigate('SignUp')}
          > Signup</Text>
        </View>
      </View>
    </View>
  )
}

SignInScreen = ({ navigation, dispatch }) => {
  const [secureTextEntryToggle, setSecureTextEntryToggle] = useState(true)
  const [inputPasswordBorder, setInputPasswordBorder] = useState(false)

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleLogin = () =>  {
    dispatch(userLogin({
      username: email, 
      password: password,
      grant_type: "password"
    }))
  }

  return (
    <View style={globalStyles.container}>
      <ChevronLeft size={24} style={styles.backButton}
        onPress={navigation.goBack}
      />
      <Text style={styles.title}>Welcome Back!</Text>
      <View style={styles.mainContainer}>
        <TextField
          placeholder="Email"
          inputStyle={styles.inputStyle}
          containerStyle={[styles.containerStyle, globalStyles.mb16]}
          inputContainerStyle={styles.inputContainerStyle}
          onChangeText={setEmail}
          value={email}
        />
        <Input
          placeholder="Password" 
          secureTextEntry={secureTextEntryToggle}
          onFocus={() => setInputPasswordBorder(true)}
          onBlur={() => setInputPasswordBorder(false)}
          containerStyle={[ styles.inputMainContainer, {borderWidth: inputPasswordBorder ? 1 : 0 }]}
          inputStyle={styles.inputStyle}
          inputContainerStyle={styles.inputContainerStyle}
          rightIcon={<Eye size={24} style={{color: colors.gray}} onPress={() => setSecureTextEntryToggle(!secureTextEntryToggle)} />}
          onChangeText={setPassword}
        />
        <Button 
          title="Password help ?"
          type="clear"
          containerStyle={{ alignSelf: 'flex-end' }}
          titleStyle={styles.formClearActionButton}
          onPress={() => navigation.navigate('ForgotPassword')}
        />
        <Button
          title="Login to Spree Shop"
          buttonStyle={ styles.buttonBlockStyle }
          titleStyle={ globalStyles.latoBold16 }
          onPress={ handleLogin }
        />
        <View style={styles.footer}>
          <Text style={styles.label}>Don't have an account ? </Text>
          <Text
            style={styles.footerAction}
            onPress={() => navigation.navigate('SignUp')}
          > Signup</Text>
        </View>
      </View>
    </View>
  )
}

render() {
      const { t } = this.props;
        return(
            <View style={{ flex: 1, backgroundColor: this.props.screenProps.theme.backgroundColour }}>
                <View style={{
                    justifyContent: 'flex-start',
                    alignItems: 'flex-start',
                    marginTop: 60,
                    marginLeft: 30,
                    marginRight: 10,
                }}>
                    <Text style={{ fontFamily: 'Montserrat-SemiBold', color: this.props.screenProps.theme.primaryColour, fontSize: 25, marginBottom: 5 }}>
                        {t('enterMnemonic')}
                    </Text>

                    <Text style={{ fontFamily: 'Montserrat-Regular', color: this.props.screenProps.theme.primaryColour, fontSize: 16, marginBottom: 30 }}>
                        {t('enterMnemonicSubtitle')}
                    </Text>
                </View>

                <View style={{
                    justifyContent: 'flex-start',
                    alignItems: 'flex-start',
                    marginLeft: 20,
                    flex: 1,
                }}>
                    <Input
                        containerStyle={{
                            width: '90%',
                            marginBottom: 30,
                        }}
                        inputContainerStyle={{
                            borderColor: 'lightgrey',
                            borderWidth: 1,
                            borderRadius: 2,
                        }}
                        label={t('mnemonicSeed')}
                        labelStyle={{
                            marginBottom: 5,
                            marginRight: 2,
                            fontFamily: 'Montserrat-Regular',
                        }}
                        inputStyle={{
                            color: this.props.screenProps.theme.primaryColour,
                            fontSize: 15,
                            marginLeft: 5
                        }}
                        value={this.state.seed}
                        onChangeText={(text) => {
                            this.setState({
                                seed: text,
                            }, () => this.checkErrors());
                        }}
                        errorMessage={this.state.seedError}
                        autoCapitalize={'none'}
                    />
                </View>

                <BottomButton
                    title={t('continue')}
                    onPress={() => this.importWallet()}
                    disabled={!this.state.seedIsGood}
                    {...this.props}
                />
            </View>
        );
    }

render() {
        const {goBack} = this.props.navigation;
        return (
            <SafeAreaView style={{flex: 1,}}>
                <KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
                                         resetScrollToCoords={{ x: 0, y: 0 }}
                                         scrollEnabled={true}>
                    <Spinner
                        visible={this.state.spinner}
                        textContent={'Sending to Coach...'}
                        overlayColor='rgba(0, 0, 0, 0.5)'
                        textStyle={{color: 'white'}}
                    />


                    <View style={styles.photoContainer}>
                        <TouchableOpacity style={{flex: 1,}} onPress={this.onCamera}>
                            <Image source={this.state.photo} style={[styles.photo, {resizeMode: this.state.isEmptyPhoto ? "center" : "contain",}]}/>
                        </TouchableOpacity>
                    </View>

                    <View style={{marginTop: 10}}>
                        <View style={styles.itemContainer}>
                            <Text style={{paddingLeft: 20}}>Subject</Text>
                            <Input ref={(input) => { this._subjectInput = input; }}
                                   inputContainerStyle={styles.inputStyle}
                                   inputStyle={styles.inputInnerStyle}
                                   placeholder='' returnKeyType='next'
                                   onSubmitEditing={() => { this._commentInput.focus(); }}
                                   blurOnSubmit={false}
                                   onChangeText={(subject) => { this.setState({subject});}}
                                   value={this.state.subject}
                                   errorMessage={this.state.errorMessage1} errorStyle={{paddingLeft: 20}} />
                        </View>
                        <View style={styles.itemContainer}>
                            <Text style={{paddingLeft: 20}}>Comment</Text>
                            <Input ref={(input) => { this._commentInput = input; }}
                                   inputContainerStyle={styles.multilineInputStyle}
                                   inputStyle={styles.multilineInnerStyle} multiline={true} numberOfLines={6}
                                   placeholder=''
                                   onChangeText={(comment) => { this.setState({comment}); }}
                                   value={this.state.comment}
                                   errorMessage={this.state.errorMessage2} errorStyle={{paddingLeft: 20}} />
                        </View>
                    </View>
                    <View style={styles.buttonsContainer}>
                        <Button raised buttonStyle={styles.cancelButton} title='Cancel' onPress={() => goBack()} />
                        <Button raised buttonStyle={styles.submitButton} title='Submit' onPress={this.onSubmit} />
                    </View>
                </KeyboardAwareScrollView>
            </SafeAreaView>
        )
    }

render() {
        const { goBack } = this.props.navigation;
        return (<SafeAreaView style={{ flex: 1, }}>
                    <KeyboardAwareScrollView contentContainerStyle={styles.container}
                        enableOnAndroid={true}
                        resetScrollToCoords={{ x: 0, y: 0 }}
                        scrollEnabled={true}>
                        <Spinner visible={this.state.spinner}
                            textContent={'Sending to Coach...'}
                            overlayColor='rgba(0, 0, 0, 0.5)'
                            textStyle={{ color: 'white' }}
                        />
                        <View style={{ marginTop: 10 }}>
                            <View style={styles.itemContainer} >
                                <Text style={{ paddingLeft: 20 }}> Subject </Text> 
                                <Input ref={(input) => { this._subjectInput = input; }}
                                    inputContainerStyle={styles.inputStyle}
                                    inputStyle={styles.inputInnerStyle}
                                    placeholder=''
                                    returnKeyType='next'
                                    onSubmitEditing={() => { this._commentInput.focus(); }}
                                    blurOnSubmit={false}
                                    onChangeText={(subject) => { this.setState({ subject }); }}
                                    value={this.state.subject}
                                    errorMessage={this.state.errorMessage1}
                                    errorStyle={{ paddingLeft: 20 }}
                                /> 
                            </View>
                            <View style={styles.itemContainer} >
                                <Text style={{ paddingLeft: 20 }}> Comment </Text> 
                                <Input ref={(input) => { this._commentInput = input; }}
                                    inputContainerStyle={styles.multilineInputStyle}
                                    inputStyle={styles.multilineInnerStyle}
                                    multiline={true}
                                    numberOfLines={6}
                                    placeholder=''
                                    onChangeText={(comment) => { this.setState({ comment }); }}
                                    value={this.state.comment}
                                    errorMessage={this.state.errorMessage2}
                                    errorStyle={{ paddingLeft: 20 }}
                                /> </View>
                            </View> 
                            <View style={styles.buttonsContainer}>
                                <Button raised buttonStyle={styles.cancelButton}
                                    title='Cancel'
                                    onPress={() => goBack()}
                                /> 
                                <Button raised buttonStyle={styles.submitButton}
                                    title='Send'
                                    onPress={this.onSubmit}
                                /> 
                            </View>
                            </KeyboardAwareScrollView>
                        </SafeAreaView >
                    )
                }

render() {
        const {goBack} = this.props.navigation;
        return (
            <SafeAreaView>
                <KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
                                         resetScrollToCoords={{ x: 0, y: 0 }}
                                         scrollEnabled={true}>
                    <Spinner
                        visible={this.state.spinner}
                        textContent={'Please wait...'}
                        overlayColor='rgba(0, 0, 0, 0.5)'
                        textStyle={{color: 'white'}}
                    />

                    <View style={styles.boxContainer}>
                        <Text style={[styles.textStyle, {fontWeight: 'bold',}]}>Eves Body Organic Med Spa</Text>
                        <Text style={styles.textStyle}>10300 Southside Blvd Ste 101</Text>
                        <Text style={styles.textStyle}>Jacksonville, FL 32256</Text>
                        <Text style={styles.textStyle}>904-309-9937</Text>
                    </View>

                    <View style={styles.boxContainer}>
                        <Text style={styles.textStyle}>Corporate</Text>
                        <Text style={styles.textStyle}>50 N. Laura Street</Text>
                        <Text style={styles.textStyle}>Jacksonville FL 32202</Text>
                        <Text style={styles.textStyle}>Toll Free (877) 709-Eves</Text>
                        <Text style={styles.textStyle}>Fax 904-309-9956</Text>
                        <Text style={styles.textStyle}>[email protected]</Text>
                    </View>

                    <View style={{marginTop: 10}}>
                        <View style={[styles.itemContainer]}>
                            <Input ref={(input) => { this._nameInput = input; }}
                                   inputContainerStyle={styles.inputStyle}
                                   inputStyle={styles.inputInnerStyle}
                                   placeholder='Full Name' returnKeyType='next'
                                   onSubmitEditing={() => { this._emailInput.focus(); }}
                                   blurOnSubmit={false}
                                   onChangeText={(fullName) => { this.setState({name: fullName});}}
                                   value={this.state.name}
                                   errorMessage={this.state.errorMessage1} errorStyle={{paddingLeft: 20}} />
                        </View>
                        <View style={styles.itemContainer}>
                            <Input ref={(input) => { this._emailInput = input; }}
                                   inputContainerStyle={styles.inputStyle}
                                   inputStyle={styles.inputInnerStyle}
                                   placeholder='Email' autoCapitalize='none' keyboardType='email-address' returnKeyType='next'
                                   onSubmitEditing={() => { this._messageInput.focus(); }}
                                   blurOnSubmit={false}
                                   onChangeText={(email) => { this.setState({email}); }}
                                   value={this.state.email}
                                   errorMessage={this.state.errorMessage2} errorStyle={{paddingLeft: 20}} />
                        </View>
                        <View style={styles.itemContainer}>
                            <Input ref={(input) => { this._messageInput = input; }}
                                   inputContainerStyle={styles.multilineInputStyle}
                                   inputStyle={styles.multilineInnerStyle} multiline={true} numberOfLines={6}
                                   placeholder='Message'
                                   onChangeText={(message) => { this.setState({message}); }}
                                   value={this.state.message}
                                   errorMessage={this.state.errorMessage3} errorStyle={{paddingLeft: 20}} />
                        </View>
                    </View>
                    <View style={styles.buttonsContainer}>
                        <Button raised buttonStyle={styles.submitButton} title='Submit' onPress={this.onSubmit} />
                    </View>
                </KeyboardAwareScrollView>
            </SafeAreaView>
        )
    }

render() {
    return (
      <Modal visible={true} style={styles.modal} avoidKeyboard={true}>
        <View style={styles.container}>
          <ProgressHUD ref={ref => (this.hud = ref)} />
          <View style={styles.wrap}>
            <View style={styles.titleWrap}>
              <View>
                <TouchableWithoutFeedback underlayColor="transparent" onPress={this.onClosePress}>
                  <View style={styles.closeBtn}>
                    <Image source={require("@img/qunfabao/icon_x.png")}></Image>
                  </View>
                </TouchableWithoutFeedback>
              </View>
              <Text style={styles.title}>{i18n.t("qunfabao-enter-password")}</Text>
              <View style={{ width: 56 }}></View>
            </View>

            <Text style={styles.totalText}>
              {this.totalAmount} {this.coin.name}
            </Text>
            <Text style={styles.feeText}>
              {i18n.t("qunfabao-total-fee")}: {this.totalFee} ETH
            </Text>
            <View
              style={{
                paddingHorizontal: 16,
                paddingTop: 12,
              }}>
              <Input
                onChangeText={this.onPasswordChange.bind(this)}
                multiline={false}
                placeholder={i18n.t("qunfabao-enter-password")}
                placeholderTextColor={"#ccc"}
                autoCapitalize="none"
                underlineColorAndroid="transparent"
                containerStyle={styles.containerStyle}
                inputContainerStyle={styles.inputContainerStyle}
                inputStyle={styles.inputStyle}
                secureTextEntry={true}></Input>
              {this.renderFeeComponent()}
              <View style={styles.foot}>
                {this.errorMessage && (
                  <Text style={{ fontSize: 14, paddingBottom: 10, color: "#EB4E3D", textAlign: "center" }}>
                    {this.errorMessage}
                  </Text>
                )}
                <Button
                  disabled={this.isConfirmDisable}
                  title={i18n.t("qunfabao-password-ok")}
                  containerStyle={styles.nextButtonContainer}
                  buttonStyle={styles.nextButton}
                  onPress={this.onConfirmPress}
                />
              </View>
            </View>
          </View>
        </View>
      </Modal>
    );
  }

render() {
        const {goBack} = this.props.navigation;
        return (
            <SafeAreaView style={styles.container}>
                <KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
                                         resetScrollToCoords={{ x: 0, y: 0 }}
                                         scrollEnabled={true}>
                    <Spinner
                        visible={this.state.spinner}
                        textContent={'Please wait...'}
                        overlayColor='rgba(0, 0, 0, 0.5)'
                        textStyle={{color: 'white'}}
                    />

                    <View style={[styles.itemContainer, styles.topRow, styles.normalHeight]}>
                        <Text style={styles.labelStyle}>Size</Text>
                        <View style={styles.dropdownContainer}>
                        <Dropdown inputContainerStyle={styles.dropdownStyle} inputStyle={styles.dropdownTextStyle}
                                  pickerStyle={styles.dropdownItemContainer}
                                  selectedItemColor='mediumvioletred'
                                  dropdownOffset={{top: 0, bottom: 0}} rippleInsets={{top: 0, bottom: 0}}
                                  onChangeText={(value, index, data) => { this.setState({value}); }}
                                  data={this.state.sizeOptions} value={this.state.value} />
                            <Text style={[styles.labelStyle, {paddingLeft: 5}]}>{this.state.unit}</Text>
                        </View>
                        <Text style={[styles.errorStyle, {marginTop: -3}]}>{this.state.errorMessage1}</Text>
                    </View>
                    <View style={[styles.itemContainer, styles.bigHeight]}>
                        <Text style={styles.labelStyle}>Comments</Text>
                        <Input inputContainerStyle={styles.commentInputStyle} inputStyle={styles.commentInnerStyle}
                               onChangeText={(comment) => { this.setState({comment}); }}
                               value={this.state.comment} multiline={true}
                               errorMessage={this.state.errorMessage2} errorStyle={{paddingLeft: 20}} />
                    </View>
                    {/*
                    <View style={[styles.itemContainer, styles.normalHeight]}>
                        <Text style={styles.labelStyle}>Date</Text>
                        <DatePicker style={styles.dateTimeStyle} showIcon={false}
                                    mode="date" placeholder="Select Date" format="MM-DD-YYYY"
                                    date={this.state.date}
                                    confirmBtnText="OK" cancelBtnText="Cancel"
                                    customStyles={{
                                        dateInput: {borderWidth: 0,},
                                        dateText: styles.dateTimeInputStyle,
                                        placeholderText: styles.dateTimeInputStyle,
                                        btnTextConfirm: {color: 'mediumvioletred'},
                                        btnTextCancel: {color: 'lightseagreen'},
                                    }}
                                    onDateChange={(date) => {this.setState({date: date})}} />
                        <Text style={styles.errorStyle}>{this.state.errorMessage3}</Text>
                    </View>
                    */}
                    <View style={[styles.itemContainer, styles.normalHeight]}>
                        <Text style={styles.labelStyle}>Time</Text>
                        <DatePicker style={styles.dateTimeStyle} showIcon={false}
                                    mode="time" placeholder="Select Time" format="hh:mm A"
                                    date={this.state.time}
                                    confirmBtnText="OK" cancelBtnText="Cancel"
                                    customStyles={{
                                        dateInput: {borderWidth: 0,},
                                        dateText: styles.dateTimeInputStyle,
                                        placeholderText: styles.dateTimeInputStyle,
                                        btnTextConfirm: {color: 'mediumvioletred'},
                                        btnTextCancel: {color: 'lightseagreen'},
                                    }}
                                    onDateChange={(time) => {this.setState({time: time})}} />
                        <Text style={styles.errorStyle}>{this.state.errorMessage4}</Text>
                    </View>

                    <View style={styles.buttonsContainer}>
                        <Button raised buttonStyle={styles.backButton} title='Cancel' onPress={() => goBack()} />
                        <Button raised buttonStyle={styles.createButton} title='OK' onPress={this.onSave} />
                    </View>
                </KeyboardAwareScrollView>
            </SafeAreaView>
        )
    }

renderGasComponent() {
    if (this.manually) {
      return (
        <View>
          <View style={styles.textContainer}>
            <Input
              underlineColorAndroid="transparent"
              value={this.manuallyGasPrice + ""}
              placeholder={i18n.t("qunfabao-custom-gas-price")}
              placeholderTextColor="#ccc"
              onChangeText={text => (this.manuallyGasPrice = text)}
              autoCapitalize="none"
              clearButtonMode="while-editing"
              keyboardType="decimal-pad"
              containerStyle={styles.containerStyle}
              inputContainerStyle={styles.inputContainerStyle}
              inputStyle={styles.inputStyle}
              returnKeyType="done"
              rightIcon={<Text style={styles.patchText}>gwei</Text>}
            />
          </View>
          <View style={styles.textContainer}>
            <Input
              underlineColorAndroid="transparent"
              value={this.manuallyGasLimit + ""}
              placeholder={i18n.t("qunfabao-custom-gas")}
              placeholderTextColor="#ccc"
              onChangeText={text => (this.manuallyGasLimit = text)}
              onFocus={() => this.setState({ showFee: true })}
              onEndEditing={() => this.setState({ showFee: false })}
              autoCapitalize="none"
              clearButtonMode="while-editing"
              keyboardType="decimal-pad"
              containerStyle={styles.containerStyle}
              inputContainerStyle={styles.inputContainerStyle}
              inputStyle={styles.inputStyle}
              returnKeyType="done"
            />
          </View>
        </View>
      );
    } else {
      return [
        <Slider
          key="Slider"
          minimumTrackTintColor={Theme.linkColor}
          thumbTintColor="#FFFFFF"
          thumbStyle={{
            borderColor: "#B6B6B6",
            borderWidth: StyleSheet.hairlineWidth,
            width: 24,
            height: 24,
            borderRadius: 24,
            // shadowRadius: 0,
            shadowOpacity: 0.5,
            shadowColor: "#B6B6B6",
            shadowOffset: {
              h: 2,
              w: 0,
            },
          }}
          step={0.02}
          minimumValue={this.minimumSliderValue}
          onValueChange={sliderValue => (this.sliderValue = sliderValue)}
          trackStyle={{ height: 2, backgroundColor: "#B6B6B6" }}
          value={this.sliderValue}></Slider>,
        <View key="status" style={styles.row}>
          <Text style={styles.speedText}>{i18n.t("qunfabao-custom-slow")}</Text>
          <Text style={styles.speedText}>{i18n.t("qunfabao-custom-fast")}</Text>
        </View>,
      ];
    }
  }

render() {
        const {goBack} = this.props.navigation;
        return (
            <SafeAreaView style={styles.container}>
                <KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
                                         resetScrollToCoords={{ x: 0, y: 0 }}
                                         scrollEnabled={true}>
                    <Spinner
                        visible={this.state.spinner}
                        textContent={'Please wait...'}
                        overlayColor='rgba(0, 0, 0, 0.5)'
                        textStyle={{color: 'white'}}
                    />

                    <View style={[styles.itemContainer, styles.topRow, styles.normalHeight]}>
                        <Text style={styles.labelStyle}>Food Type</Text>
                        <Input inputContainerStyle={styles.normalInputStyle} inputStyle={styles.inputInnerStyle}
                               returnKeyType='next' onSubmitEditing={() => { this._commentInput.focus(); }} blurOnSubmit={false}
                               onChangeText={(value) => { this.setState({value});}}
                               value={this.state.value}
                               errorMessage={this.state.errorMessage1} errorStyle={{paddingLeft: 20}} />
                    </View>
                    <View style={[styles.itemContainer, styles.bigHeight]}>
                        <Text style={styles.labelStyle}>Comments</Text>
                        <Input ref={(input) => { this._commentInput = input; }}
                               inputContainerStyle={styles.commentInputStyle} inputStyle={styles.commentInnerStyle}
                               onChangeText={(comment) => { this.setState({comment}); }}
                               value={this.state.comment} multiline={true}
                               errorMessage={this.state.errorMessage2} errorStyle={{paddingLeft: 20}} />
                    </View>
                    {/*
                    <View style={[styles.itemContainer, styles.normalHeight]}>
                        <Text style={styles.labelStyle}>Date</Text>
                        <DatePicker style={styles.dateTimeStyle} showIcon={false}
                                    mode="date" placeholder="Select Date" format="MM-DD-YYYY"
                                    date={this.state.date}
                                    confirmBtnText="OK" cancelBtnText="Cancel"
                                    customStyles={{
                                        dateInput: {borderWidth: 0,},
                                        dateText: styles.dateTimeInputStyle,
                                        placeholderText: styles.dateTimeInputStyle,
                                        btnTextConfirm: {color: 'mediumvioletred'},
                                        btnTextCancel: {color: 'lightseagreen'},
                                    }}
                                    onDateChange={(date) => {this.setState({date: date})}} />
                        <Text style={styles.errorStyle}>{this.state.errorMessage3}</Text>
                    </View>
                    */}
                    <View style={[styles.itemContainer, styles.normalHeight]}>
                        <Text style={styles.labelStyle}>Time</Text>
                        <DatePicker style={styles.dateTimeStyle} showIcon={false}
                                    mode="time" placeholder="Select Time" format="hh:mm A"
                                    date={this.state.time}
                                    confirmBtnText="OK" cancelBtnText="Cancel"
                                    customStyles={{
                                        dateInput: {borderWidth: 0,},
                                        dateText: styles.dateTimeInputStyle,
                                        placeholderText: styles.dateTimeInputStyle,
                                        btnTextConfirm: {color: 'mediumvioletred'},
                                        btnTextCancel: {color: 'lightseagreen'},
                                    }}
                                    onDateChange={(time) => {this.setState({time})}} />
                        <Text style={styles.errorStyle}>{this.state.errorMessage4}</Text>
                    </View>

                    <View style={styles.buttonsContainer}>
                        <Button raised buttonStyle={styles.backButton} title='Cancel' onPress={() => goBack()} />
                        <Button raised buttonStyle={styles.createButton} title='OK' onPress={this.onSave} />
                    </View>
                </KeyboardAwareScrollView>
            </SafeAreaView>
        )
    }

render() {
        return (
            <SafeAreaView style={{flex: 1,}}>
                <KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
                        enableAutomaticScroll={true}>
                    <Image source={require('../../assets/images/authBackground.png')} style={styles.backgroundContainer}/>
                    <Spinner visible={this.state.spinner}
                             textContent={'Please wait...'}
                             overlayColor="rgba(0, 0, 0, 0.5)"
                             textStyle={{color: 'white'}} />
                    <View style={styles.logoContainer}>
                        <Image source={require('../../assets/images/logo.png')} style={styles.logo}/>
                    </View>
                    <View style={styles.titleContainer}>
                        <Text style={styles.title}>Login to Experience</Text>
                        <Text style={styles.subtitle}>Natural beautification from the inside out.</Text>
                    </View>
                    <View style={styles.inputContainer}>
                        <Input ref={(input) => { this.emailInput = input; }}
                               inputContainerStyle={styles.inputStyle}
                               leftIcon={<Icon name="envelope" style={styles.iconSmallStyle} />}
                               inputStyle={styles.inputInnerStyle}
                               placeholder="Email" autoCapitalize="none" keyboardType="email-address" returnKeyType="next"
                               onSubmitEditing={() => { this.passwordInput.focus(); }}
                               blurOnSubmit={false}
                               onChangeText={(email) => { this.setState({email}); }}
                               value={this.state.email}
                               errorMessage={this.state.errorMessage1} errorStyle={{paddingLeft: 20}} />
                        <View style={{width: '100%', alignItems: 'flex-end'}}>
                            <Input ref={(input) => { this.passwordInput = input; }}
                                   inputContainerStyle={styles.inputStyle}
                                   leftIcon={<Icon name="lock" style={styles.iconNormalStyle} />}
                                   inputStyle={styles.inputInnerStyle}
                                   secureTextEntry={true}
                                   placeholder="Password"
                                   onChangeText={(password) => { this.setState({password}); }}
                                   value={this.state.password}
                                   errorMessage={this.state.errorMessage2} errorStyle={{paddingLeft: 20}} />
                            <TouchableOpacity  onPress={this.onForgotPassword}>
                                <Text style={styles.forgotButton}>Forgot password?</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={styles.buttonsContainer}>
                        <Button raised buttonStyle={styles.backButton} title="Back" onPress={this.onBack} />
                        <Button raised buttonStyle={styles.loginButton} title="Login" onPress={this.onLogin} />
                    </View>
                </KeyboardAwareScrollView>
            </SafeAreaView>
        );
    }

render() {
    if (this.state.IsBookRequestActive === true) {
      return (
        <View style={{ flex: 1}}>
          <View
            style={{
              flex: 0.1,
            }}
          >
            <MyHeader title="Book Status" navigation={this.props.navigation} />
          </View>
          <View
            style={styles.ImageView}
          >
            <Image
              source={{ uri: this.state.requestedImageLink }}
              style={styles.imageStyle}
            />
          </View>
          <View
            style={styles.bookstatus}
          >
            <Text
              style={{
                fontSize: RFValue(20),

              }}
            >
              Name of the book
            </Text>
            <Text
              style={styles.requestedbookName}
            >
              {this.state.requestedBookName}
            </Text>
            <Text
              style={styles.status}
            >
              Status
            </Text>
            <Text
              style={styles.bookStatus}
            >
              {this.state.bookStatus}
            </Text>
          </View>
          <View
            style={styles.buttonView}
          >
            <TouchableOpacity
              style={styles.button}
              onPress={() => {
                this.sendNotification();
                this.updateBookRequestStatus();
                this.receivedBooks(this.state.requestedBookName);
              }}
            >
              <Text
                style={styles.buttontxt}
              >
                Book Recived
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 0.1 }}>
          <MyHeader title="Request Book" navigation={this.props.navigation} />
        </View>
        <View style={{ flex: 0.9 }}>
          <Input
            style={styles.formTextInput}
            label={"Book Name"}
            placeholder={"Book name"}
            containerStyle={{ marginTop: RFValue(60) }}
            onChangeText={(text) => this.getBooksFromApi(text)}
            onClear={(text) => this.getBooksFromApi("")}
            value={this.state.bookName}
          />
          {this.state.showFlatlist ? (
            <FlatList
              data={this.state.dataSource}
              renderItem={this.renderItem}
              enableEmptySections={true}
              style={{ marginTop: RFValue(10) }}
              keyExtractor={(item, index) => index.toString()}
            />
          ) : (
            <View style={{ alignItems: "center" }}>
              <Input
                style={styles.formTextInput}
                containerStyle={{ marginTop: RFValue(30) }}
                multiline
                numberOfLines={8}
                label={"Reason"}
                placeholder={"Why do you need the book"}
                onChangeText={(text) => {
                  this.setState({
                    reasonToRequest: text,
                  });
                }}
                value={this.state.reasonToRequest}
              />
              <TouchableOpacity
                style={[styles.button, { marginTop: RFValue(30) }]}
                onPress={() => {
                  this.addRequest(
                    this.state.bookName,
                    this.state.reasonToRequest
                  );
                }}
              >
                <Text
                  style={styles.requestbuttontxt}
                >
                  Request
                </Text>
              </TouchableOpacity>
            </View>
          )}
        </View>
      </View>
    );
  }