Binding redux form input.value to a datetimepicker - react-native

Question

I have a react native/redux/redux form setup which is (mostly) working, so everything is hooked up and running.
When I set up a form with an asynchronous update, I get a date field, for which I defined a custom component to be used as <Field> in redux-form.
Here's my component:
import React, { Component } from "react";
import { TouchableOpacity, StyleSheet } from "react-native";
import { Text, theme, Button, Block, Input } from "galio-framework";
import DateTimePicker from "react-native-modal-datetime-picker";
export class DateInputField extends Component {
constructor(props) {
super(props);
this.state = { isDateTimePickerVisible: false };
this.handleChange = this.handleChange.bind(this);
}
showDateTimePicker = () => {
this.setState({ isDateTimePickerVisible: true });
};
hideDateTimePicker = () => {
this.setState({ isDateTimePickerVisible: false });
};
handleChange = date => {
console.log("date->" + date);
this.setState({ isDateTimePickerVisible: false, date: date });
this.props.input.onChange(date);
};
render() {
const { input, meta, ...inputProps } = this.props;
return (
<Block style={styles.container}>
<TouchableOpacity onPress={this.showDateTimePicker}>
<DateTimePicker
date={new Date(input.value)}
cancelTextIOS="Annulla"
confirmTextIOS="Conferma"
isVisible={this.state.isDateTimePickerVisible}
onConfirm={this.handleChange}
onCancel={() => this.setState({ isDateTimePickerVisible: false })}
/>
<Input
color={"black"}
editable={false}
// onTouch={this.showDateTimePicker}
// onFocus={this.showDateTimePicker}
label={this.props.label}
style={styles.input}
placeholder={this.props.placeholder}
value={
this.state.date != undefined
? this.state.date.getDate() +
"/" +
(this.state.date.getMonth() + 1) +
"/" +
this.state.date.getFullYear()
: "gg/mm/aaaa"
}
/>
</TouchableOpacity>
</Block>
);
}
}
export const styles = StyleSheet.create({
container: {},
label: {},
input: { flex: 1, color: "red", padding: 0, height: 50 }
});
and my field:
<Field name={"consignment_date"} label="Fine" component={DateInputField} />
This component works, when I press the field the datepicker shows up with the correct date coming from the connected "model" field connected to it.
Now my problem is I can't figure way an elegant way to update the field value when the field is not updated by a human "onChange" event but the component's state is updated (and subsequently the component is rendered). I tried many combinations of setting the state date field, but I always ended in infinite loops because updating the state would cause a render, and so on.
I tried many Component lifecycle events to put my reading of the input.value and setting it on a state.displayedDate property, but I guess I am missing a very obvious way to do this because of my scarce knowledge of React's dynamics.
Any help is really appreciated.

Answer 1

Posting the solution that works:
import React, { Component } from "react";
import { TouchableOpacity, StyleSheet } from "react-native";
import { Text, theme, Button, Block, Input } from "galio-framework";
import DateTimePicker from "react-native-modal-datetime-picker";
export class DateInputField extends Component {
constructor(props) {
super(props);
this.state = { isDateTimePickerVisible: false }; //no more date in state
this.handleChange = this.handleChange.bind(this);
}
showDateTimePicker = () => {
this.setState({ isDateTimePickerVisible: true });
};
hideDateTimePicker = () => {
this.setState({ isDateTimePickerVisible: false });
};
handleChange = date => {
this.setState({ isDateTimePickerVisible: false });
this.props.input.onChange(date);
};
render() {
const { input, meta, ...inputProps } = this.props;
return (
<Block style={styles.container}>
<TouchableOpacity onPress={this.showDateTimePicker}>
<DateTimePicker
style={styles.label}
date={new Date(input.value)}//date is transformed from input
onDateChange={this.handleChange}
cancelTextIOS="Annulla"
confirmTextIOS="Conferma"
isVisible={this.state.isDateTimePickerVisible}
onConfirm={this.handleChange}
onCancel={() => this.setState({ isDateTimePickerVisible: false })}
/>
<Input
color={"gray"}
editable={false}
enabled={false}
label={this.props.label}
style={styles.input}
placeholder={this.props.placeholder}
value={ //value is transformed to a date, then to the local string representation
input.value !== ""
? new Date(input.value).toLocaleDateString()
: new Date().toLocaleDateString()
}
/>
</TouchableOpacity>
</Block>
);
}
}
export const styles = StyleSheet.create({
container: {},
input: {
flex: 1,
color: "red",
height: 50,
borderWidth: 0,
borderBottomWidth: 1
}
});