ps

import React from 'react';
import { StyleSheet, View, ScrollView, SafeAreaView, Text, Alert, Modal, TouchableOpacity, Picker, RefreshControl, ActivityIndicator } from 'react-native';
import { NavigationScreenProp } from 'react-navigation';
import CustomHeader from "../custom/CustomHeader";
import css from '../../constants/Css';
import color from '../../constants/Colors';
import { RFValue } from 'react-native-responsive-fontsize';
import FAButton from '../custom/FAButton';
import Screen from '../../common/components/screens/Screen';
import { DataColumn } from '../../common/components/widgets/table/column/DataColumn';
import { ActionColumn } from '../../common/components/widgets/table/column/ActionColumn';
import * as WebBrowser from 'expo-web-browser';
import ReduxComponentWrapper from '../../common/components/widgets/reduxConnected/ReduxComponentWrapper';
import { IRestDataSourceParams } from '../../common/dataSource/IRestDataSourceParams';
import { Table as TableModel } from '../../common/components/widgets/table/Table';
import { SupplierMeeting, ISupplierMetting } from '../models/SupplierMeeting';
import { File as FileModel } from '../models/File';
import { DataProvider } from '../../common/model/DataProvider';
import { TextInput } from '../../common/components/widgets/form/input/TextInput';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faCloudDownloadAlt, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
import { CustomActionColumn } from '../custom/CustomActionColumn';
import moment from 'moment';
import { BasicFilter } from '../../common/components/widgets/table/filter/BasicFilter';
import { BasicPaging, PagerSize } from '../../common/components/widgets/table/paging/BasicPaging';
import { AxiosResponse, AxiosError } from 'axios';
import { Supplier } from '../models/Supplier';
import { DropdownInput } from '../../common/components/widgets/form/input/DropdownInput';
import * as DocumentPicker from 'expo-document-picker';
import Util from '../custom/Util';
import { DateInput } from '../../common/components/widgets/form/input/DateInput';


interface IMeetingsScreenProps {
  navigation: NavigationScreenProp<any, any>
}

interface IMeetingsScreenComponent {
  isLoading: boolean,
  refreshing: boolean,

  isEditLoading: boolean,

  showForm: boolean,
  currentModel: any,
  visibleModal: string | null,
  textInputValue: string,
  fileUrl: string | null,
  countries: any[],
  supplierList: any[],
  isCreate: boolean,

  file: any,
  waitForUpload: boolean,

  selectedSupplierOption: string
  selectedDateOption: string | boolean
}

export class MeetingsScreen extends Screen<IMeetingsScreenProps, IMeetingsScreenComponent>{

  private supplierMeetings = new SupplierMeeting(false);
  private supplierModel = new Supplier(false);
  private meetingsDP = new DataProvider<ISupplierMetting>();
  private fileModel: FileModel = new FileModel();

  private submitted = false;

  private supplierMeetingInputs: { [attr: string]: React.RefObject<any> } = {
    supplier_id: React.createRef(),
    supplier_attendants: React.createRef(),
    vl_attendants: React.createRef(),
    subject: React.createRef(),
    meeting_location: React.createRef(),
    meeting_date: React.createRef(),
    attachment: React.createRef(),
  };

  private httpReq = [];

  constructor(props) {
    super(props);

    this.delete = this.delete.bind(this);
    this.readInputs = this.readInputs.bind(this);
    this.fillInputsWithErrors = this.fillInputsWithErrors.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.setInputValues = this.setInputValues.bind(this);
    this.addFile = this.addFile.bind(this);
    this.removeFile = this.removeFile.bind(this);
    this.sendReq = this.sendReq.bind(this);
    this.searchCallback = this.searchCallback.bind(this)

    this.state = {
      refreshing: false,
      isLoading: true,

      isEditLoading: true,

      showForm: false,
      currentModel: null,
      visibleModal: null,
      textInputValue: '',

      file: null,
      fileUrl: null,
      countries: [],
      supplierList: [],


      waitForUpload: false,

      selectedSupplierOption: null,
      selectedDateOption: null,
      isCreate: true
    }
    this.openModal = this.openModal.bind(this)
    this.edit = this.edit.bind(this)
  }

  openModal(row?) {

    this.setState({
      showForm: !this.state.showForm,
      isEditLoading: false,
      currentModel: row && null
    })

    this.searchCallback = this.searchCallback.bind(this)
  }

  delete(row) {

    Alert.alert(
      'Delete',
      'Are you sure you want to delete this?',
      [
        { text: 'Cancel', onPress: () => { this.setState({ showForm: false }) }, style: 'cancel', },
        {
          text: 'Delete', onPress: () => {
            this.supplierMeetings.del(row.id);
            this.setState({ currentModel: null })
          }, style: 'destructive'
        },
      ],
      { cancelable: false },
    );

  }


  setInputValues(values: any) {
    let inputs = this.supplierMeetingInputs;

    for (let key in values) {
      if (inputs[key] && inputs[key].current) {
        inputs[key].current.setValue(values[key]);
      }
    }
  }

  private readInputs(): any {

    const plainObject = {};
    const inputs = this.supplierMeetingInputs;

    for (const key in inputs) {

      if (inputs.hasOwnProperty(key) && inputs[key].current) {

        plainObject[key] = inputs[key].current.getValue();
        inputs[key].current.removeError();
      }
    }

    this.supplierMeetings.setFromPlainObject({ ...this.supplierMeetings.asPlainObject(), ...plainObject });

    return plainObject;
  }


  addFile = async (ref: React.RefObject<any>, event) => {

    return await DocumentPicker.getDocumentAsync({ type: 'application/pdf' })
      .then((file) => {

        if (file.type === 'success') {
          ref.current.setValue(file.name)
        }

        this.setState({ file })

      });
  }

  removeFile(ref: React.RefObject<any>, e) {
    const inputElement: HTMLInputElement = document.getElementById(ref.current.props.id) as HTMLInputElement

    inputElement.value = ''

    ref.current.setValue(null);
    this.supplierMeetings.attachment = null;

    this.supplierMeetings.update(this.supplierMeetings).then((response: AxiosResponse) => {
      Util.notification('Meeting successfully updated')
      this.setState({
        showForm: false
      })

    });
  }


  private fillInputsWithErrors(errors: { [attr: string]: string }, inputs: any) {

    for (const key in errors) {
      if (errors.hasOwnProperty(key) && inputs[key] !== undefined && inputs[key].current) {
        inputs[key].current.setError(errors[key]);
      }
    }
  }

  private validate(event: any): boolean {
    this.readInputs();
    let inputs = this.supplierMeetingInputs;
    const valid = this.supplierMeetings.validate();

    if (this.submitted && !valid) {
      const errors: { [attr: string]: string } = this.supplierMeetings.getErrors();
      this.fillInputsWithErrors(errors, inputs);
    }

    event.preventDefault();

    return valid;
  }


  sendReq() {
    let promise: Promise<AxiosResponse>;

    if (this.state.isCreate) {
      promise = this.supplierMeetings.createNew();
    } else {
      promise = this.supplierMeetings.update(this.supplierMeetings);
    }

    promise.then((response: AxiosResponse) => {

      this.setState({ waitForUpload: false }) // ??
      this.setState({ showForm: false, selectedSupplierOption: '', selectedDateOption: '', isEditLoading: true }) // ??

      Util.notification('Success')

    })
      .catch((error: AxiosError) => {
        const aError: AxiosError = error;

        switch (aError.response.status) {
          case 422:

            if (aError.response && aError.response.data && aError.response.data.errors) {
              const respErrors: any[] = aError.response.data.errors;
              const errors: { [attr: string]: string } = {};

              respErrors.forEach((error: any) => {
                errors[error.fieldName] = error.errorMessage;
              });

              this.fillInputsWithErrors(errors, this.supplierMeetingInputs);
            }
            break;
          default:

            Util.notification('Error', 'danger')
            break;
        }

        this.setState({ selectedSupplierOption: '', selectedDateOption: '' })
      });
  }

  handleSupplierChange = (selectedOption: any, ref: any) => {
    let value = selectedOption;

    this.setState({
      selectedSupplierOption: value
    });

    ref.current.setValue(value)

  }

  handleDateChange = (selectedOption: any, ref: any) => {
    let value = selectedOption;

    this.setState({
      selectedDateOption: value
    });

    ref.current.setValue(value)

  }

  uploadFilesToServer() {
    let data = new FormData();

    let file = this.state.file;

    file = {
      name: file.name,
      uri: file.uri,
      type: 'application/pdf'
    }

    if (file) {
      data.append('files', file, file.name);

      this.fileModel.createNew(data).then((response: AxiosResponse) => {

        let files: string[] = response.data;
        this.setState({
          fileUrl: files[0]
        })
      })
    }
  }


  protected handleSubmit(event: any): void {

    this.submitted = true;

    if (this.validate(event)) {

      if (this.state.file) {

        this.uploadFilesToServer();
        this.setState({
          waitForUpload: true
        })

        setTimeout(() => {

          this.supplierMeetings.attachment = this.state.fileUrl;

          this.sendReq()
        }, 1000);
      } else {
        this.sendReq()
      }
    }

    this.submitted = false;
  }



  getDestroyableMembers() {
    return [];
  }

  searchCallback() {

    if (this.state.isCreate) return (params: IRestDataSourceParams): void => {

      if (!params.filters) {
        params.filters = [{
          attr: "meeting_date",
          operator: "gte",
          val: moment().format("YYYY-MM-DD")
        }]
      }
      this.meetingsDP.refreshWithHeaders(
        this.supplierMeetings.getListPlain({
          ...params,
          sort: {
            attr: "meeting_date",
            ascending: false
          }
        })
      )
    }
  }


  edit(row?: any) {
    this.supplierMeetings.loadById(row.id)
      .then((response: any) => {

        this.supplierMeetings.setFromPlainObject(response);
        this.setInputValues(response);

        this.setState({
          selectedSupplierOption: response.supplier_id,
          selectedDateOption: response.meeting_date
        });

      }).then(() => {
        this.setState({
          isEditLoading: false
        });
      })
      .catch((error: AxiosError) => {
        Util.notification('Data could not be loaded', 'danger')
      });

    this.setState({
      showForm: !this.state.showForm,
      currentModel: row && null,
      isCreate: !this.state.isCreate
    });
  }

  catchData() {
    this.httpReq.push(this.supplierModel.getListPlain({
      sort: {
        attr: "name",
        ascending: true
      }
    })
      .then((response: AxiosResponse) => {
        this.setState({
          supplierList: response.data,
          isLoading: false
        });

      }).catch((e: AxiosError) => {
        Util.notification('Supplier list cannot be loaded', 'danger')
      })
    )

    return Promise.all(this.httpReq).then((results) => {
      this.setState({
        isLoading: false
      });
    });
  }

  componentDidMount() {
    this.catchData()
  }

  render() {

    const colsMeeting: any[] = [
      new DataColumn('Subject', 'subject', null, new BasicFilter(false, 'Search meetings'), true),
      new DataColumn('Date', 'meeting_date', null, null),
      new DataColumn('Supplier', 'supplier.name', null, null),
      new DataColumn('Supplier attenddants', 'supplier_attendants', null, null),
      new DataColumn('VL attenddants', 'vl_attendants', null, null),
      new DataColumn('Location', 'meeting_location', null, null),
      new CustomActionColumn(
        null,
        (row: Object) => {
          this.delete(row)
        },
        (row: Object) => {
          this.edit(row)
        },
        10,
        false
      ),
      new ActionColumn("", null, null, 10,
        [{
          operationCb: async (row: any) => {
            if (row.attachment) {

              await WebBrowser.openBrowserAsync(row.attachment);
            } else {
              alert("No attachments")
            }
          },
          iconClassName: "table-edit",
          message: null,
          icon: <FontAwesomeIcon icon={faCloudDownloadAlt} size={RFValue(23, css.standardScreenHeight)} style={styles.icon} />,
          iconStyle: {}
        }],
        "File"
      )
    ];

    let supplierList = [];

    if (this.state.supplierList) {
      for (let i = 0; i < this.state.supplierList.length; i++) {
        supplierList.push({
          key: this.state.supplierList[i].id,
          value: this.state.supplierList[i].id,
          label: this.state.supplierList[i].name,
        });
      }
    }

    let form
    form = (
      <Modal transparent={true} animationType="slide">
        <View style={[{ height: '100%', width: '100%', position: 'absolute', justifyContent: 'center', alignItems: 'center' }, [!this.state.isEditLoading ? { display: 'none' } : {}]]}>
          <ActivityIndicator size="large" color={color.primary} />
        </View>
        <ScrollView>
          <View style={this.state.isEditLoading ? { display: 'none' } : {}}>
            <View style={styles.modalBox}>

              <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

                <Text style={styles.modalTitle}>Edit meeting</Text>

                <TextInput style={styles.modalInputBox}
                  ref={this.supplierMeetingInputs.subject}
                  placeholder="Subject"
                  placeholderTextColor={color.primaryBlue}
                  selectionColor="#fff"
                />

                <DropdownInput
                  listItems={supplierList}
                  ref={this.supplierMeetingInputs.supplier_id}
                  initialValue={this.state.selectedSupplierOption}
                  placeholder={{label: 'Supplier', value: null} }
                  label=""
                  onChange={(option) => { this.handleSupplierChange(option, this.supplierMeetingInputs.supplier_id) }}
                />

                <DateInput
                  ref={this.supplierMeetingInputs.meeting_date}
                  initialValue={this.state.selectedDateOption}
                  onChange={(option) => { this.handleDateChange(option, this.supplierMeetingInputs.meeting_date) }}
                  mode="date"
                  format="YYYY-MM-DD"
                  confirmBtnText="Confirm"
                  cancelBtnText="Cancel"
                />

                <TextInput style={styles.modalInputBox}
                  placeholder="Supplier attendants"
                  ref={this.supplierMeetingInputs.supplier_attendants}
                  placeholderTextColor={color.primaryBlue}
                  selectionColor="#fff"
                />

                <TextInput style={styles.modalInputBox}
                  placeholder="VL attendants"
                  ref={this.supplierMeetingInputs.vl_attendants}
                  placeholderTextColor={color.primaryBlue}
                  selectionColor="#fff"
                />


                <TextInput style={styles.modalInputBox}
                  placeholder="Location"
                  ref={this.supplierMeetingInputs.meeting_location}
                  placeholderTextColor={color.primaryBlue}
                  selectionColor="#fff"
                />

                <View style={{ justifyContent: 'center', alignItems: 'center' }}>

                  <TextInput style={styles.modalInputBox}
                    placeholder="Attachment"
                    ref={this.supplierMeetingInputs.attachment}
                    placeholderTextColor={color.primaryBlue}
                    selectionColor="#fff"
                    disabled={true}
                  />

                  <FontAwesomeIcon onPress={(e) => this.addFile(this.supplierMeetingInputs.attachment, e)}
                    style={styles.uploadFile}
                    icon={faPlus} size={RFValue(20, css.standardScreenHeight)} />


                  <FontAwesomeIcon icon={faTrash} size={RFValue(20, css.standardScreenHeight)} style={styles.deleteFile} />


                </View>

                <TouchableOpacity onPress={(e) => this.handleSubmit(e)} style={[styles.button, { backgroundColor: color.primary }]}>
                  <Text style={[styles.buttonText, { color: color.whiteInput }]}>Submit</Text>
                </TouchableOpacity>

                <TouchableOpacity onPress={() => { this.setState({ showForm: false, isEditLoading: true, selectedDateOption: '', selectedSupplierOption: '' }) }} style={[styles.button, { backgroundColor: color.whiteInput }]}>
                  <Text style={[styles.buttonText, { color: color.primary }]}>Cancel</Text>
                </TouchableOpacity>

              </View>
            </View>
          </View>
        </ScrollView>

      </Modal>
    )

    let content;
    if (!this.state.isLoading) {
      content = (
        <>
          <ScrollView style={styles.scrollView}
            refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={() => { this.refresh() }} />}>
            <ReduxComponentWrapper component={TableModel} componentPropsCallback={(state: any) => ({
              provider: this.meetingsDP,
              title: null,
              searchCallback: this.searchCallback(),
              columns: colsMeeting,
              loader: [4, 10],
              // paging: new BasicPaging({
              //   pageSize: 2,
              //   pagerSize: PagerSize.LARGE
              // })
            })} />
          </ScrollView>

          <FAButton function={() => this.openModal()} />

          {this.state.showForm ? form : null}
        </>
      )
    } else {
      content = (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" color={color.primary} />
        </View>
      )
    }


    return (
      <SafeAreaView style={styles.container} >
        <CustomHeader navigation={this.props.navigation} withBack={true} name="Meetings" marginBottom={-1} />

        {content}

      </SafeAreaView >
    );
  }
}


const styles = StyleSheet.create({
  icon: {
    color: color.primaryBlue,
    marginHorizontal: 10
  },
  container: {
    flex: 1,
    backgroundColor: color.backgroundColor
  },
  scrollView: {
    paddingBottom: 10,
  },
  searchBox: {
    backgroundColor: "white",
    marginBottom: 15
  },
  searchInput: {
    backgroundColor: color.backgroundColor,
    marginVertical: 5,
    marginHorizontal: 20,
    paddingHorizontal: 10,
    borderRadius: 10,
    fontSize: RFValue(css.defaultFontSize, css.standardScreenHeight)
  },
  modalBox: {
    flex: 1,
    backgroundColor: 'white',
    margin: 5,
    padding: css.defaultPadding,
    borderRadius: css.appBorderRadius,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.18,
    shadowRadius: 1.00,
    elevation: 1,
  },
  modalTitle: {
    color: color.primary,
    fontSize: RFValue(css.defaultTitleFontSize, css.standardScreenHeight),
    fontWeight: "bold"
  },
  modalInputBox: {
    width: 300,
    backgroundColor: color.backgroundColor,
    borderRadius: css.inputBorderRadius,
    paddingHorizontal: 16,
    paddingVertical: 12,
    fontSize: RFValue(css.defaultFontSize, css.standardScreenHeight),
    color: color.blackInput,
    marginVertical: 10,
  },
  button: {
    width: 300,
    backgroundColor: color.primary,
    borderRadius: css.buttonBorderRadius,
    marginVertical: 10,
    paddingVertical: 12
  },
  buttonText: {
    fontSize: RFValue(css.defaultFontSize, css.standardScreenHeight),
    fontWeight: '500',
    color: '#ffffff',
    textAlign: 'center'
  },
  uploadFile: {
    position: 'absolute',
    right: RFValue(50, css.standardScreenHeight)
  },
  deleteFile: {
    position: 'absolute',
    right: RFValue(15, css.standardScreenHeight),
  }
});



 ---- *----



import * as React from 'react';
import { FormInput, IFormInputProps } from "../FormInput";
import Colors from '../../../../../constants/Colors';
import { TextInput } from './TextInput';
import ModalSelector from 'react-native-modal-selector';
import Css from '../../../../../constants/Css';
import { RFValue } from 'react-native-responsive-fontsize';
import { StyleSheet, Text, Picker, View, Modal, Platform } from 'react-native';
import DatePicker from 'react-native-datepicker'

export interface IDateInputProps extends IFormInputProps {
    label?: string,
    placeholder?: string,
    error?: string,
    id?: string,
    mode?: string
    format?: string
    confirmBtnText?: string,
    cancelBtnText?: string
}

export class DateInput<T extends IDateInputProps = IDateInputProps> extends TextInput<T> {
    protected renderLabel(): React.ReactNode {
        return;
    }

    protected renderInput(): React.ReactNode {
        const additionalProps: any = {};

        return (
            <>
                <View style={[styles.viewDateInputBox, this.error !== null ? styles.errorInput : null]}>
                    <DatePicker
                        style={styles.dateInputBox} //with props
                        onDateChange={this.props.onChange}
                        date={this.props.initialValue}
                        mode={this.props.mode}
                        placeholder={"Date"}
                        format={this.props.format}
                        confirmBtnText={this.props.confirmBtnText}
                        cancelBtnText={this.props.cancelBtnText}
                        showIcon={false}
                        customStyles={{ //with props
                            dateInput: {
                                borderWidth: 0,
                                alignItems: "flex-start",
                            },
                            placeholderText: {
                                fontSize: RFValue(Css.defaultFontSize, Css.standardScreenHeight),
                                color: Colors.primaryBlue,
                            },
                            dateText: {
                                fontSize: RFValue(Css.defaultFontSize, Css.standardScreenHeight),
                                color: Colors.blackInput,
                            }
                        }}
                    />
                </View>
                <TextInput
                    id={this.props.id}
                    ref={this.inputRef}
                    style={styles.hidden}
                    value={this.props.initialValue ? this.props.initialValue.toString() : this.props.initialValue}
                />
            </>

        );
    }

    public getValue(): any {

        return this.props.initialValue;
    }

    protected renderError(): React.ReactNode {

        return (<Text style={(this.error !== null) ? { color: 'red', display: 'flex' } : { display: 'none' }}>{(this.error !== null) ? this.error : ""}</Text>);
    }

    public getReadOnly(val: any): any {
        return;
    }
}


const styles = StyleSheet.create({
    dateInputBox: {
        width: 300,
        paddingHorizontal: 16,
        paddingVertical: Platform.OS === 'ios' ? 2 : 6,
        backgroundColor: "#f3f3f3",
        overflow: 'hidden',
    },
    viewDateInputBox: {
        borderRadius: Css.inputBorderRadius,
        overflow: 'hidden',
        marginVertical: 10,
    },
    hidden: {
        display: "none"
    },
    errorInput: {
        borderWidth: 1,
        borderColor: '#cc0000',
    },
});



---- ** ----


import * as React from 'react';
import { FormInput, IFormInputProps } from "../FormInput";
import Colors from '../../../../../constants/Colors';
import { TextInput } from './TextInput';
import ModalSelector from 'react-native-modal-selector';
import Css from '../../../../../constants/Css';
import { RFValue } from 'react-native-responsive-fontsize';
import { StyleSheet, Text, View } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';

export interface IDropdownListItem {
    value: number | string,
    label: string,
    key: number
}

export interface IDropdownInputProps extends IFormInputProps {
    label?: string,
    placeholder?: any,
    error?: string,
    listItems?: IDropdownListItem[],
    noEmptyOption?: boolean,
    id?: string,
}

export class DropdownInput<T extends IDropdownInputProps = IDropdownInputProps> extends TextInput<T> {
    protected renderLabel(): React.ReactNode {
        return;
    }

    protected renderInput(): React.ReactNode {
        const additionalProps: any = {};
        let listItems: IDropdownListItem[] | undefined = [];

        if (this.props.listItems && this.props.listItems.length) {
            for (let i = 0; i < this.props.listItems.length; i++) {
                listItems.push({
                    value: this.props.listItems[i].value,
                    label: this.props.listItems[i].label,
                    key: this.props.listItems[i].key
                });
            }
        }

        return (
            <View>
                <RNPickerSelect
                    onValueChange={this.props.onChange}
                    value={this.props.initialValue}
                    items={listItems}
                    style={{ inputAndroid: [styles.RNPicker, this.error !== null ? styles.errorInput : null], inputIOS: [styles.RNPickerIOS, this.error !== null ? styles.errorInput : null], placeholder: { color: Colors.primaryBlue } }}
                    useNativeAndroidPickerStyle={false}
                    placeholder={this.props.placeholder}
                />

                <TextInput
                    id={this.props.id}
                    ref={this.inputRef}
                    style={styles.hidden}
                    value={this.props.initialValue ? this.props.initialValue.toString() : this.props.initialValue}
                />
            </View>

        );
    }

    public getValue(): any {

        return this.props.initialValue;
    }

    protected renderError(): React.ReactNode {

        return (<Text style={(this.error !== null) ? { color: 'red', display: 'flex' } : { display: 'none' }}>{(this.error !== null) ? this.error : ""}</Text>);
    }

    public getReadOnly(val: any): any {
        const listItems: IDropdownListItem[] | undefined = this.props.listItems ? this.props.listItems : [];

        if (listItems) {
            if (listItems.length) {
                let result: any = '';

                listItems.forEach((listItem: IDropdownListItem) => {
                    if (listItem.key == val) {
                        result = listItem.label;
                    }
                });

                return result;
            }
        }

        return "";
    }
}


const styles = StyleSheet.create({
    hidden: {
        display: "none"
    },
    RNPicker: {
        fontSize: RFValue(Css.defaultFontSize, Css.standardScreenHeight),
        width: 300,
        paddingHorizontal: 16,
        paddingVertical: 11,
        backgroundColor: "#f3f3f3",
        color: Colors.blackInput,
        paddingRight: 30, // to ensure the text is never behind the icon
        borderRadius: Css.inputBorderRadius,
        overflow: 'hidden',
        marginVertical: 10,
    },
    RNPickerIOS: {
        fontSize: RFValue(Css.defaultFontSize, Css.standardScreenHeight),
        width: 300,
        paddingHorizontal: 16,
        paddingVertical: 12,
        backgroundColor: "#f3f3f3",
        color: Colors.blackInput,
        paddingRight: 30, // to ensure the text is never behind the icon
        borderRadius: Css.inputBorderRadius,
        overflow: 'hidden',
        marginVertical: 10,
    },
    errorInput: {
        borderWidth: 1,
        borderColor: '#cc0000',
    },
});