How to use DatePicker inside tcomb-forn-native template? - react-native

Question

I am working with
React Native
Expo
react-native-datepicker
tcomb-form-native
forms using templates
I did a register form that have the following struct
name: t.String,
email: formValidation.email,
password: formValidation.password,
gender: t.Boolean,
birthday: t.Date,
cellphone: t.Number
import React from "react";
import t from "tcomb-form-native";
import formValidation from "../utils/Validation";
import inputTemplate from "../forms/templates/Input";
import buttonGroupTemplate from "../forms/templates/ButtonGroup";
import datePickerTemplate from "../forms/templates/DatePicker";
import phoneInputTemplate from "../forms/templates/PhoneInput";
export const RegisterStruct = t.struct({
name: t.String,
email: formValidation.email,
password: formValidation.password,
gender: t.Boolean,
birthday: t.Date,
cellphone: t.Number
});
export const RegisterOptions = {
fields: {
name: {
template: inputTemplate,
config: {
placeholder: "Introduce tu nombre completo",
iconType: "material-community",
iconName: "account-outline"
}
},
email: {
template: inputTemplate,
config: {
placeholder: "Introduce tu correo electrónico",
iconType: "material-community",
iconName: "at"
}
},
password: {
template: inputTemplate,
config: {
placeholder: "Introduce tu clave",
iconType: "material-community",
iconName: "lock-outline",
password: true,
secureTextEntry: true
}
},
gender: {
template: buttonGroupTemplate,
config: {
buttons: ["Masculino", "Femenino"]
}
},
birthday: {
template: datePickerTemplate,
config: {
placeholder: "Selecciona tu fecha de nacimiento",
date: "2016-05-15"
}
},
cellphone: {
template: phoneInputTemplate,
config: {
placeholder: "Introduce tu número de celular"
}
}
}
};
And this is my template
import React from "react";
import { StyleSheet, View } from "react-native";
import DatePicker from "react-native-datepicker";
import { Dimensions } from "react-native";
import { red } from "ansi-colors";
export default (datePickerTemplate = locals => {
return (
<View style={styles.viewContainer}>
<DatePicker
style={styles.customDatePicker}
date={date}
mode="date"
placeholder={locals.config.placeholder}
format="DD-MM-YYYY"
minDate="01-05-2016"
maxDate="01-06-2020"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
position: "absolute",
right: 0,
top: 4,
marginRight: 0
},
dateInput: {
borderColor: "#FFFFFF",
borderBottomColor: "#3F3F3F"
},
placeholderText: {
alignSelf: "flex-start",
fontSize: 17
}
}}
onDateChange={date => locals.onChange(date)}
/>
</View>
);
});
const styles = StyleSheet.create({
viewContainer: {
flexDirection: "row",
marginTop: 12,
marginBottom: 12
},
customDatePicker: {
flex: 1,
marginRight: 10,
marginLeft: 10
}
});
When I choose a date on the calendar in the state it changes correctly but on the screen I see the same date, the date field in the user interface does not change should show the selected date.
I use the code below to show the date change on the console.
onChangeFormRegister = formValue => {
console.log(formValue);
this.setState({
formData: formValue
});
};
updateIndex(selectedIndex) {
this.setState({ selectedIndex });
}
render() {
const { registerStruct, registerOptions, formErrorMessage } = this.state;
return (
<ScrollView style={styles.viewBody}>
<Form
ref="registerForm"
type={RegisterStruct}
options={RegisterOptions}
value={this.state.formData}
onChange={formValue => this.onChangeFormRegister(formValue)}
/>