Skip to content

Instantly share code, notes, and snippets.

@ismusidhu
Created February 6, 2020 12:39
Show Gist options
  • Save ismusidhu/01d47c078955349df9473c41f5049a1d to your computer and use it in GitHub Desktop.
Save ismusidhu/01d47c078955349df9473c41f5049a1d to your computer and use it in GitHub Desktop.
Work around for react-native-datepicker TouchableComponent not working
import React, { Fragment, useRef } from 'react'
import DatePicker from 'react-native-datepicker';
import { TextField, FilledTextField, OutlinedTextField, } from 'react-native-material-textfield';
export default function DatePickerField({ label, onBlur, error, onChange, value, style, textFieldProps, datePickerProps, ...props }) {
let dateTextFieldRef = useRef(null);
let datePickerRef = useRef(null);
const triggerDatePickerClick = () => {
datePickerRef.onPressDate();
}
return (
<Fragment>
<OutlinedTextField
ref={(ref) => dateTextFieldRef = ref}
labelFontSize={16}
spellCheck={true} multiline={false}
onFocus={triggerDatePickerClick}
value={value}
label={label}
onBlur={onBlur}
editable={true}
keyboardType="default"
error={error}
style={style}
{...textFieldProps}
/>
<DatePicker
style={{
opacity: 0.0, height: 0, width: 0, fontSize: 0, backgroundColor: "transparent",
borderWidth: 0, marginBottom: 0, marginRight: 0
}}
ref={(ref) => datePickerRef = ref}
date={value}
mode="date"
format="YYYY-MM-DD"
minDate="01-01-2018"
// maxDate={maxDate}
confirmBtnText="Confirm"
cancelBtnText="Cancel"
showIcon={false}
onDateChange={(...params) => {
onChange.apply(null, params);
dateTextFieldRef.setValue(params[0]);
}}
{...datePickerProps}
/>
</Fragment>
)
}
@ismusidhu
Copy link
Author

usage

<DatePickerField
    value={this.state.date}
    label='Date'
    onBlur={this.onDateBlur}
    error={this.state.error.date}
    onChange={this.onDateChange}
/>}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment