react-native#Picker JavaScript Examples

function PickerListItem(props) {
	return (
		<View style={styles.wrapper}>
			<Text style={styles.text}>{props.text}</Text>
			<View style={styles.pickerWrapper}>
				<Picker
					prompt={props.title}
					selectedValue={props.settings[props.id]}
					onValueChange={(val) => props.updateSettings({ [props.id]: val })}
					style={styles.picker}>
					{props.items.map((item, i) => (
						<Picker.Item label={item.label} value={item.value} key={i} />
					))}
				</Picker>
			</View>
		</View>
	);
}

PickerSheet = ({
  onValueChange,
  currentOption,
  testID,
  options,
  ...rest
}) => (
  <StyledPicker
    selectedValue={currentOption?.value}
    onValueChange={onValueChange}
    testID={testID}
    {...rest}
  >
    {options.map(option => (
      <Picker.Item
        label={option.label || option.value}
        value={option.value}
        key={option.value}
      />
    ))}
  </StyledPicker>
)

render() {
    const { buttonColor } = this.state;
    const itemStyle = this.props.itemStyle || {};
    return (
      <Modal
        animationType="slide"
        transparent
        visible={this.state.modalVisible}
        onRequestClose={() => {
          console.log('Country picker has been closed.');
        }}
      >
        <View style={styles.basicContainer}>
          <View
            style={[
              styles.modalContainer,
              { backgroundColor: this.props.pickerBackgroundColor || 'white' },
            ]}
          >
            <View style={styles.buttonView}>
              <TouchableOpacity onPress={this.onPressCancel}>
                <Text
                  style={[{ color: buttonColor }, this.props.buttonTextStyle]}
                >
                  {this.props.cancelText || 'Cancel'}
                </Text>
              </TouchableOpacity>

              <TouchableOpacity onPress={this.onPressSubmit}>
                <Text
                  style={[{ color: buttonColor }, this.props.buttonTextStyle]}
                >
                  {this.props.confirmText || 'Confirm'}
                </Text>
              </TouchableOpacity>
            </View>

            <View style={styles.mainBox}>
              <Picker
                ref={ref => {
                  this.picker = ref;
                }}
                style={styles.bottomPicker}
                selectedValue={this.state.selectedCountry}
                onValueChange={country => this.onValueChange(country)}
                itemStyle={itemStyle}
                mode="dialog"
              >
                {Country.getAll().map((country, index) =>
                  this.renderItem(country, index),
                )}
              </Picker>
            </View>
          </View>
        </View>
      </Modal>
    );
  }

PickerItem = Picker.Item

function LangSelect(props) {
	const [sLang, setSLang] = useState('');
	const [tLang, setTLang] = useState('');

	function onSave() {
		if (sLang && tLang) {
			if (sLang === tLang) {
				showToast('Source and target languages cannot be same');
			} else props.updateSettings({ sLang, tLang });
		} else showToast('Please choose source & target languages');
	}

	return (
		<View style={styles.wrapper}>
			<Text style={styles.label}>Choose source language</Text>
			<View style={styles.pickerWrapper}>
				<Picker
					prompt="Choose source language"
					selectedValue={sLang}
					onValueChange={setSLang}
					style={{ flex: 1 }}>
					{languages.map((lang, i) => (
						<Picker.Item label={lang.label} value={lang.value} key={i} />
					))}
				</Picker>
			</View>
			<Text style={styles.label}>Choose target language</Text>
			<View style={styles.pickerWrapper}>
				<Picker
					prompt="Choose target language"
					selectedValue={tLang}
					onValueChange={setTLang}
					style={{ flex: 1 }}>
					{languages.map((lang, i) => (
						<Picker.Item label={lang.label} value={lang.value} key={i} />
					))}
				</Picker>
			</View>
			<TouchableNativeFeedback onPress={onSave}>
				<View style={styles.buttonWrapper}>
					<Text style={styles.buttonText}>Save</Text>
				</View>
			</TouchableNativeFeedback>
			<View style={styles.textWrapper}>
				<Text style={styles.notice}>Select your source and target languages</Text>
				<Text style={styles.subtitle}>(These can be changed later)</Text>
			</View>
		</View>
	);
}

export default function ModalFormNotificacao({ modalVisible, closeModal }) {
  const [observacao, setObservacao] = useState('');
  const [estimativa, setEstimativa] = useState('');
  const [estimativaPicker, setEstimativaPicker] = useState('');
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent
        visible={modalVisible}
        onRequestClose={() => {}}
      >
        <TouchableOpacity
          style={styles.containerTouchable}
          activeOpacity={1}
          onPressOut={() => {
            closeModal();
            setEstimativaPicker('');
            setObservacao('');
          }}
        >
          <TouchableWithoutFeedback onPress={() => {}}>
            <View style={styles.modalView}>
              <Text style={styles.label}>Estimativa de pessoas</Text>
              <View style={styles.inputPicker}>
                <Picker
                  selectedValue={estimativaPicker}
                  onValueChange={(value) => setEstimativaPicker(value)}
                >
                  <Picker.Item label="5 a 9" value="5" />
                  <Picker.Item label="10 a 19" value="10" />
                  <Picker.Item label="20 a 39" value="20" />
                  <Picker.Item label="40 a 79" value="40" />
                  <Picker.Item label="80 a 99" value="80" />
                  <Picker.Item label="100 a 999" value="100" />
                  <Picker.Item label="1000 ou mais" value="1000" />
                </Picker>
              </View>
              <Text style={styles.label}>Observação</Text>
              <TextInput
                style={styles.input}
                placeholder="(Opicional)"
                multiline
                value={observacao}
                onChangeText={(text) => setObservacao(text)}
              />

              <TouchableHighlight
                style={{ ...styles.openButton, backgroundColor: '#94D451' }}
                onPress={() => {
                  if (estimativa != '') {
                    const enviarNotificacao = async () => {
                      try {
                        await enviarNotificacaoAglomeracao(
                          estimativaPicker,
                          observacao
                        );
                      } catch (error) {
                        console.log(`Error ao enviar notificação: ${error}`);
                      }
                    };
                    enviarNotificacao();
                  }
                  setObservacao('');
                  setEstimativaPicker('');
                  closeModal();
                }}
              >
                <Text style={styles.textStyle}>Enviar notificação</Text>
              </TouchableHighlight>
            </View>
          </TouchableWithoutFeedback>
        </TouchableOpacity>
      </Modal>
    </View>
  );
}

render() {
        return (
            <SafeAreaView style={styles.container2}>
              <ScrollView
                alwaysBounceVertical={true} 
                refreshControl={
                <RefreshControl refreshing={this.state.refreshing} 
                onRefresh={this.findCoordinates} />
              }>
              <View style={{flex:8}}>
                <Text style={styles.textareaContainer}>
                    Please fill this forms
                </Text>
                <Text style={styles.textSM}>
                    Select Your Head Division *
                </Text>

                <View style={styles.viewPicker}>            
                  <Picker
                    mode={"dropdown"}
                    selectedValue={this.state.headDivision}
                    style={styles.picker}
                    onValueChange={(itemValue, itemIndex) =>
                      this.setState({
                        headDivision: itemValue
                      })
                    }>
                    <Picker.Item label='' value=''/>
                    {this.state.listHD.map((u,i) => {
                      return (<Picker.Item key={i} label={u.profile.firstname+' '+u.profile.lastname} value={u.username}/>);
                      })
                    }
                  </Picker>
                </View>

                <Text
                  style={styles.textSM}>
                    Project Name *
                </Text>
                <TextInput
                  style={styles.inputText}
                  maxLength={40}
                  onChangeText={text => this.setState({projectName: text})}
                  value={this.state.projectName}>
                </TextInput>

                <Text
                  style={styles.textSM}>
                    Notes *
                </Text>
                <TextInput
                    multiline={true}
                    placeholder="tell us about your health issue"
                    maxLength={200} 
                    style={styles.textInput}
                    onChangeText={text => this.setState({message: text})}
                    value={this.state.message}>
                </TextInput>
                </View>

                <View style={{flex:1, marginTop:30}}>
                  <TouchableOpacity onPress={this.submitAll} style={styles.buttonSubmit}>
                      <Text style={styles.textbtnSubmit} >Submit</Text>
                  </TouchableOpacity>
                </View>
                
            </ScrollView>
          </SafeAreaView>
        )
    }

StyledPicker = styled(Picker)`
  width: 150px;
`

ProfileScreen = () => {
  const [language, setLanguage] = React.useState('English');
  const [cycle, setCycle] = React.useState('20 Days');
  const [lastCycle, setLastCycle] = React.useState('14 July 2020');

  return (
    <View style={styles.container}>
      <Text style={styles.head}>{i18n.t('settings')}</Text>

      <View style={styles.userInfo}>
        <Image source={profile} style={styles.profile} />
        <Text style={styles.wel}>{'\n\n\n '} Samriddhi</Text>
      </View>

      <View style={styles.design}>
        <MaterialIcons name="language" style={styles.create} />
        <Text style={styles.welcome}>
          {i18n.t('language')}
          {/* Language */}
        </Text>
        <Picker
          selectedValue={language}
          style={styles.content}
          onValueChange={language => setLanguage(language)}
        >
          <Picker.Item label="English" value="English" />
        </Picker>
      </View>

      <View style={styles.design}>
        <Entypo name="circular-graph" style={styles.create} />
        <Text style={styles.welcome}>{i18n.t('cycle_length')}</Text>
        <Picker
          selectedValue={cycle}
          style={styles.content}
          onValueChange={cycle => setCycle(cycle)}
        >
          <Picker.Item label="20 Days" value="20" />
        </Picker>
      </View>

      <View style={styles.design}>
        <Feather name="droplet" style={styles.create} />
        <Text style={styles.welcome}>{i18n.t('last_period')}</Text>
        <Picker
          selectedValue={lastCycle}
          style={styles.content}
          onValueChange={lastCycle => setLastCycle(lastCycle)}
        >
          <Picker.Item label="14 july 2020" value="14/07/2020" />
        </Picker>
      </View>
    </View>
  );
}

render() {
    const {intl} = this.props;
    const {
      day,
      nearTotalBluezoner,
      totalBluezoner,
      daySelected,
      total,
      nearTotal,
      fontScale,
      showDay,
    } = this.state;
    const listDay = day.map(item => (
      <Picker.Item
        key={moment(item).format('DD/MM/YYYY')}
        label={moment(item).format('DD/MM/YYYY')}
        value={item}
      />
    ));

    const {formatMessage} = intl;

    return (
      <SafeAreaView style={styles.warper}>
        <Header
          styleTitle={styles.titleHeader}
          title={formatMessage(message.header)}
          styleHeader={styles.header}
        />
        <View style={styles.flex}>
          <View style={styles.flex}>
            <View style={styles.content}>
              <MediumText style={styles.title}>
                {formatMessage(message.totalContact)}
              </MediumText>
              <View style={styles.contentChild}>
                <CountBlueZoner countBlueZone={totalBluezoner} />
              </View>
            </View>
            <View style={styles.content}>
              <MediumText style={styles.title}>
                {formatMessage(message.closeContact)}
              </MediumText>
              <View style={styles.contentChild}>
                <CountBlueZoner
                  countBlueZone={nearTotalBluezoner}
                  backgroundColor={'rgb(11,147,35)'}
                />
              </View>
            </View>
          </View>
          <View style={styles.datePickerL}>
            <View style={styles.datePicker1}>
              {Platform.OS === 'ios' ? (
                <TouchableOpacity
                  style={styles.datePickerO}
                  onPress={this.onShowModalDay}>
                  <Text style={styles.datePickerT}>
                    {moment(daySelected).format('DD/MM/YYYY')}
                  </Text>
                </TouchableOpacity>
              ) : (
                <View style={styles.datePicker}>
                  {fontScale && (
                    <Picker
                      selectedValue={daySelected}
                      style={[
                        styles.pickerAndroid,
                        {
                          width: this.state.fontScale * 83.33 + 66.67,
                        },
                      ]}
                      onValueChange={this.onSetDay}>
                      {listDay}
                    </Picker>
                  )}
                </View>
              )}

              <ButtonIconText
                onPress={this.onSendHistory}
                text={formatMessage(warning.uploadText)}
                source={require('../NotifyWarning/styles/images/send.png')}
                styleBtn={styles.buttonSend}
                styleText={{fontSize: fontSize.normal}}
                styleIcon={styles.buttonIcon}
              />
            </View>
          </View>
        </View>

        {Platform.OS === 'ios' && (
          <Modal isVisible={showDay} style={styles.pickerIOS}>
            <View style={styles.pickerIOSContainer}>
              <TouchableOpacity
                style={styles.buttonOK}
                onPress={this.onHideDay}>
                <Text style={styles.titleButtonOK}>Xong</Text>
              </TouchableOpacity>
              <Picker
                selectedValue={daySelected}
                style={styles.pickerDay}
                onValueChange={this.onSetDay}>
                {listDay}
              </Picker>
            </View>
          </Modal>
        )}
      </SafeAreaView>
    );
  }

render() {
    return (
      <Container style={{backgroundColor: '#F3F9FB'}}>
        <HeaderView navigation={this.props.navigation} title={'Add Employee'} />
        <Content>
          <ScrollView>
            <Body>
              <Text style={styles.heading}>Account</Text>

              <Item floatingLabel style={styles.inputBox}>
                <Label style={styles.label}>First Name</Label>
                <Input
                  style={styles.inputArea}
                  onChangeText={value => {
                    this.setState({fname: value});
                  }}
                />
              </Item>
              <Item floatingLabel style={styles.inputBox}>
                <Label style={styles.label}>Last Name</Label>
                <Input
                  style={styles.inputArea}
                  onChangeText={value => {
                    this.setState({lname: value});
                  }}
                />
              </Item>

              <Item floatingLabel style={styles.inputBox}>
                <Label style={styles.label}>Email ID</Label>
                <Input
                  style={styles.inputArea}
                  keyboardType="email-address"
                  autoCapitalize="none"
                  onChangeText={value => {
                    var mailformat = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})+$/;
                    this.setState({email: value});
                    if (value.match(mailformat)) {
                      this.setState({inval_email: false});
                    } else {
                      this.setState({inval_email: true});
                    }
                  }}
                />
              </Item>
              {this.state.inval_email && this.state.email !== '' && (
                <Text
                  style={{
                    color: 'red',
                    alignSelf: 'flex-start',
                    marginLeft: 40,
                  }}>
                  Invalid Email
                </Text>
              )}

              <Item floatingLabel style={styles.inputBox}>
                <Label style={styles.label}>Password</Label>
                <Input
                  style={styles.inputArea}
                  secureTextEntry
                  onChangeText={value => {
                    this.setState({password: value});
                    var passw = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
                    if (value.length >= 8) {
                      this.setState({inval_pass: false});
                    } else {
                      this.setState({inval_pass: true});
                    }
                  }}
                />
              </Item>
              {this.state.inval_pass && this.state.password !== '' && (
                <Text
                  style={{
                    color: 'red',
                    alignSelf: 'flex-start',
                    marginLeft: 40,
                  }}>
                  Password should be atleast 8 characters
                </Text>
              )}

              <Item floatingLabel style={styles.inputBox}>
                <Label style={styles.label}>Confirm Password</Label>
                <Input
                  style={styles.inputArea}
                  secureTextEntry
                  onChangeText={value => {
                    this.setState({confpass: value});
                  }}
                />
              </Item>
              {this.state.inval_confpass && (
                <Text
                  style={{
                    color: 'red',
                    alignSelf: 'flex-start',
                    marginLeft: 40,
                  }}>
                  Password not matching!
                </Text>
              )}

              <Item floatingLabel style={styles.inputBox}>
                <Label style={styles.label}>Age</Label>
                <Input
                  style={styles.inputArea}
                  onChangeText={value => {
                    this.setState({age: value});
                  }}
                />
              </Item>

              <Item style={styles.inputBox}>
                <Label style={{marginLeft: 28}}>Gender</Label>
                <Picker
                  style={{width: 247, height: 25, marginLeft: 25}}
                  selectedValue={this.state.gender}
                  onValueChange={value => {
                    this.setState({gender: value});
                  }}>
                  <Picker.Item label="Male" value="M" />
                  <Picker.Item label="Female" value="F" />
                  <Picker.Item label="Others" value="Other" />
                </Picker>
              </Item>
              <RadioForm
                radio_props={[
                  {label: 'Employee', value: false},
                  {label: 'Manager', value: true},
                ]}
                labelHorizontal={true}
                formHorizontal={true}
                buttonColor={'#434A5E'}
                labelColor={'#434A5E'}
                labelStyle={{marginRight: 20}}
                style={{paddingLeft: 10, marginTop: 8}}
                onPress={value => {
                  this.setState({is_staff: value});
                }}
              />

              {/* <Text style={{color: 'red'}}>HEY</Text> */}

              <TouchableOpacity
                rounded
                style={styles.regButton}
                onPress={() => {
                  if (
                    this.state.email !== '' &&
                    this.state.password !== '' &&
                    this.state.age !== '' &&
                    this.state.lname !== ''
                  ) {
                    if (
                      this.state.fname !== '' &&
                      this.state.password === this.state.confpass
                    ) {
                      // let formData = new FormData()
                      // formData.append('email', this.state.email)
                      // formData.append('password', this.state.password)
                      // formData.append('first_name', this.state.fname)
                      // formData.append('last_name', this.state.lname)
                      // formData.append('is_staff', true)
                      // formData.append('age', this.state.age)
                      // formData.append('gender', this.state.gender)
                      this.buttonPressed();
                    } else {
                      this.setState({inval_confpass: true});
                    }
                  } else {
                    Alert.alert('Alert', 'Please enter all the fields');
                  }
                }}>
                <Text style={styles.buttonText}>Register</Text>
              </TouchableOpacity>
            </Body>
          </ScrollView>
        </Content>
      </Container>
    );
  }

render() {
    const { photo } = this.state
    return (
      <SafeAreaView style={{flex:1, backgroundColor:'#F9FCFF'}}>
            <ScrollView
                alwaysBounceVertical={true} 
                refreshControl={
                  <RefreshControl refreshing={this.state.refreshing} 
                onRefresh={this.findCoordinates} />
              }>
              <View style={styles.card}>
                <Text style={styles.textTake}>Take Picture as Evidence</Text>
                <View style={styles.viewImage}>
                  <View style={{display: this.state.loadingPhoto === false ? 'flex' : 'none'}}>
                    <Camera width={50} height={50}/>
                  </View>
                  {photo && (
                      <React.Fragment>
                        <Image
                            source={{ uri: photo.uri }}
                            style={styles.image}
                            />  
                        </React.Fragment>
                  )}       
                </View>
                <Text style={styles.textbelowPIC}>The picture should capture your face in it. The data from this form will be sent to your head division for their approval</Text>
                <TouchableOpacity onPress={this.handleChoosePhoto} style={styles.buttonPhoto}>
                    <Text style={styles.textPhoto}>Take Picture</Text>
                </TouchableOpacity>
              </View>
              <View style={{flex:1, marginTop:15, paddingBottom:30}}>
                <Text style={styles.titleText}>Please Fill This Form</Text>
                <Text style={styles.textSM}>
                    Select Your Head Division *
                </Text>

                 <View style={styles.viewPicker}>            
                   <Picker
                    mode={"dropdown"}
                    selectedValue={this.state.headDivision}
                    style={styles.picker}
                    onValueChange={(itemValue, itemIndex) =>
                      this.setState({headDivision: itemValue})
                    }>
                    <Picker.Item label='' value=''/>
                    {this.state.listHD.map((u,i) => {
                      return (<Picker.Item key={i} label={u.profile.firstname+' '+u.profile.lastname} value={u.username}/>);
                      })
                    }
                  </Picker>
                </View>

              <Text
                style={styles.textSM}>
                  Client's Name *
              </Text>
              <TextInput
                style={styles.inputText}
                maxLength={40}
                onChangeText={text => this.setState({client: text})}
                value={this.state.client}>
              </TextInput>
                <Text
                  style={styles.textSM}>
                    Client's Company/Organizations *
                </Text>
                <TextInput 
                style={styles.inputText}
                maxLength={40}
                onChangeText={text => this.setState({clientCompany: text})}
                value={this.state.clientCompany}></TextInput>

                <Text
                  style={styles.textSM}>
                  Project Name *
                </Text>
                <TextInput
                  style={styles.inputText}
                  maxLength={40}
                  onChangeText={text => this.setState({projectName: text})}
                  value={this.state.projectName}>
                </TextInput>

              <TouchableOpacity onPress={this.submitAll} style={styles.buttonSubmit}>
                  <Text style={styles.textbtnSubmit} >Clock In</Text>
              </TouchableOpacity>
              </View>  
            </ScrollView>
          </SafeAreaView>
    )
  }

render() {
        const { photo } = this.state
        return (
          <SafeAreaView style={{flex:1, backgroundColor:'#F9FCFF'}}>
            <ScrollView
                alwaysBounceVertical={true} 
                refreshControl={
                  <RefreshControl refreshing={this.state.refreshing} 
                onRefresh={this.loadLocation} />
              }>
              <View style={styles.card}>
                <Text style={styles.textTake}>Take Picture as Evidence</Text>
                <View style={styles.viewImage}>
                  <View style={{display: this.state.loadingPhoto === false ? 'flex' : 'none'}}>
                    <Camera width={50} height={50}/>
                  </View>
                  {photo && (
                      <React.Fragment>
                        <Image
                            source={{ uri: photo.uri }}
                            style={styles.image}
                            />  
                        </React.Fragment>
                  )}       
                </View>
                <Text style={styles.textbelowPIC}>The picture should capture your face in it. The data from this form will be sent to your head division for their approval</Text>
                <TouchableOpacity onPress={this.handleChoosePhoto} style={styles.buttonPhoto}>
                    <Text style={styles.textPhoto}>Take Picture</Text>
                </TouchableOpacity>
              </View>
              <View style={{flex:1, marginTop:15, paddingBottom:50}}>
                <Text style={styles.titleText}>Please Fill This Form</Text>
                <Text style={styles.textSM}>
                    Select Your Head Division *
                </Text>

                <View style={styles.viewPicker}>            
                  <Picker
                    mode={"dropdown"}
                    value={this.state.headDivision}
                    selectedValue={this.state.headDivision}
                    style={styles.picker}
                    onValueChange={(itemValue, itemIndex) =>
                      this.setState({headDivision: itemValue})
                    }>
                    <Picker.Item label='' value=''/>
                    {this.state.listHD.map((u,i) => {
                      return (<Picker.Item key={i} label={u.profile.firstname+' '+u.profile.lastname} value={u.username}/>);
                      })
                    }
                  </Picker>
                </View>

                <Text
                  style={styles.textSM}>
                    Project Name *
                </Text>
                <TextInput
                  style={styles.inputText}
                  onChangeText={text => this.setState({projectName: text})}
                  value={this.state.projectName}>
                </TextInput>

                <Text style={styles.textSM}>
                    Notes *
                </Text>
                <TextInput
                    multiline={true}
                    numberOfLines={4}
                    maxLength={200}
                    style={styles.textInput}
                    onChangeText={text => this.setState({message: text})}
                    value={this.state.message}>
                </TextInput>

                <TouchableOpacity onPress={this.submitAll} style={styles.buttonSubmit}>
                    <Text style={styles.textbtnSubmit} >Clock In</Text>
                </TouchableOpacity>
              </View>  
            </ScrollView>
          </SafeAreaView>
        )
      }

render() {
        const { show1, show2 } = this.state
        return (
            <SafeAreaView style={styles.container2}>
              <ScrollView>
                <Text style={styles.textareaContainer}>
                    Please fill this forms
                </Text>
                <Text style={styles.textSM}>
                    Select Your Head Division *
                </Text>

                <View style={styles.viewPicker}>            
                  <Picker
                    mode={"dropdown"}
                    selectedValue={this.state.headDivision}
                    style={styles.picker}
                    onValueChange={(itemValue, itemIndex) =>
                      this.setState({headDivision: itemValue})
                    }>
                    <Picker.Item label="" value="" />
                    <Picker.Item label="Java" value="java" />
                    <Picker.Item label="JavaScript" value="js" />
                  </Picker>
                </View>
                

              <View style={styles.Split}>
                <View style={styles.viewDate1}>
                    <Text
                      style={styles.TextDate}>
                        Start Date *
                    </Text> 
                    
                    <View style={styles.viewDate2}>
                      <View style={styles.viewDate3}>
                        <View style={{flex:4, justifyContent:'center',}}>
                          <Text style={{marginLeft:10, fontSize:15}}>{this.state.dateStart}</Text>
                        </View>
                        <View style={{flex:1, justifyContent:'center'}}>
                          <FontAwesome5 style={styles.iconDate} name='calendar' size={25} color='#1A446D' onPress={this.showDatepicker1}/>  
                        </View>              
                      </View>
                    </View>
                    {show1 && (
                    <DateTimePicker
                        testID="dateTimePicker"
                        value={this.state.startDate}
                        mode={'date'}
                        display="calendar"
                        onChange={(event, selectedDate) => {
                            const date = selectedDate.toString()
                            this.setState({
                                startDate: selectedDate,
                                dateStart: date.substr(0, 15),
                                show1: false
                            })
                        }}    
                    />
                    )}
                </View>
                <View style={styles.viewDate1}>
                    <Text
                      style={styles.TextDate}>
                        End Date *
                    </Text>
                    <View style={styles.viewDate22}>
                      <View style={styles.viewDate3}>
                        <View style={{flex:4, justifyContent:'center',}}>
                          <Text style={{marginLeft:10, fontSize:15}}>{this.state.dateEnd}</Text>
                        </View>
                        <View style={{flex:1, justifyContent:'center'}}>
                          <FontAwesome5 style={styles.iconDate} name='calendar' size={25} color='#1A446D' onPress={this.showDatepicker2}/>  
                        </View>
                      </View>
                    </View>
                    
                    {show2 && (
                    <DateTimePicker
                        testID="dateTimePicker"
                        value={this.state.endDate}
                        mode={'date'}
                        display="calendar"
                        onChange={(event, selectedDate) => {
                            const date = selectedDate.toString()
                            this.setState({
                                endDate: selectedDate,
                                dateEnd: date.substr(0, 15),
                                show2: false
                            })
                        }}    
                    />
                    )}              
                </View> 
              </View>
                <Text
                  style={styles.textSM}>
                    Substitute *
                </Text>
                <TextInput
                    multiline={true}
                    maxLength={200}
                    placeholder="" 
                    style={styles.inputText}
                    onChangeText={text => this.setState({message: text})}
                    value={this.state.message}>
                </TextInput>            

                <Text
                  style={styles.textSM}>
                    Reason *
                </Text>            
                <View style={styles.viewPicker}>            
                  <Picker
                    mode={"dropdown"}
                    selectedValue={this.state.reason}
                    style={styles.picker}
                    onValueChange={(itemValue, itemIndex) =>
                      this.setState({reason: itemValue})
                    }>
                    <Picker.Item label="" value="" />
                    <Picker.Item label="Java" value="java" />
                    <Picker.Item label="JavaScript" value="js" />
                  </Picker>
                </View>     

                <TouchableOpacity onPress={() => alert('Under Development!')} style={styles.buttonSubmit}>
                    <Text style={styles.textbtnSubmit} >Submit</Text>
                </TouchableOpacity>
            </ScrollView>                 
          </SafeAreaView>
        )
    }