prop issues with DatePickerIOS in React Native

Question

I'm using a DatePickerIOS inside a Modal to return the selected date to the main page.

DateTimeController Component

var DateTimeController = React.createClass({
    show: function () {
        this.setState({modalVisible: true});
    },
    getInitialState: function () {
        return {
            timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
            date: this.props.date,
            color: this.props.color || '#007AFF',
            minimumDate: this.props.minimumDate,
            modalVisible: false
        };
    },
    onDateChange: function (date) {
        this.setState({date: date});
    },
    cancelButtonPressed: function() {
        this.setState({modalVisible: false});
    },
    confirmButtonPressed: function() {
        if(this.props.onSubmit) this.props.onSubmit(this.state.date);
        this.setState({modalVisible: false});
    },
    render: function () {
        return (
            <Modal
                animated={true}
                transparent={true}
                visible={this.state.modalVisible}>
                <View style={styles.basicContainer}>
                    <View style={styles.modalContainer}>
                        <View style={styles.buttonView}>
                            <Button onPress={this.cancelButtonPressed} style={styles.timeSectionButtons}>&#xf057;</Button>
                            <Button onPress={this.confirmButtonPressed} style={styles.timeSectionButtons}>&#xf058;</Button>
                        </View>
                        <View style={styles.mainBox}>
                            <DatePickerIOS
                                date={this.state.date}
                                mode="datetime"
                                timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours}
                                onDateChange={this.onDateChange}
                                minimumDate={this.state.minimumDate}
                            />
                        </View>

                    </View>
                </View>
            </Modal>
        );
    }
});

Implementation of the Component

getInitialState: function () {
    return {
        date: new Date(),
        timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
    };
},

onDateChange: function (date) {
    this.setState({date: date});
},

return (
    <View style={styles.mainContainer}>
        <Text
            style={styles.secondaryText}
            onPress={()=>{
            this.refs.picker.show();
        }}>
            {
                this.state.date.toLocaleDateString() +
                ' ' +
                this.state.date.toLocaleTimeString()
            }
        </Text>

        <DateTimeController ref={'picker'} timeZoneOffsetInHours={this.state.timeZoneOffsetInHours * 60}
                            date={this.state.date} minimumDate={new Date()}
                            onSubmit={(date)=>{
            this.setState({date: date})
        }}
        />
    <View>
);

I'm getting the following YellowBox Warnings when the Modal opens render the DatePickerIOS.

Warning: Failed propType: Invalid prop date of type Number supplied to RCTDatePicker, expected instance of Date. Check the render method of DatePickerIOS.

Warning: Failed propType: Required prop onDateChange was not specified in RCTDatePicker. Check the render method of DatePickerIOS.

Warning: Failed propType: Invalid prop minimumDate of type Number supplied to RCTDatePicker, expected instance of Date. Check the render method of DatePickerIOS.

How to avert these warnings and fix this?

Fernando Larrañaga Cahis Fernando Larrañaga Cahis · Accepted Answer · 2016-03-04T04:47:57

I ran into this problem a while back. I think a couple of issues have been opened asking the team to address this, not sure if they did. I was using RN 0.16.0, so it might have been fixed by now.

A small hack that worked for me back then was to modify the render method in DatePickerIOS.ios.js (lives in node_modules/react-native/Libraries/Components/DatePicker).

Props there call the getTime() function which returns a number and ends up throwing that warning. I got rid of the getTime call and just left the property by itself and the warning was gone while saving the data correctly.

Hope that helps!

prop issues with DatePickerIOS in React Native

3 Answers