CODEWITHSUNDEEP
react-native
Nimila Hiranya
Nimila Hiranya

Reputation: 5182

prop issues with DatePickerIOS in React Native

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?

Upvotes: 2

Views: 4498

Answers (3)

Muhammad Amir Mughal
Muhammad Amir Mughal

Reputation: 1

We can't use placeholder and defaultvalue at same time, possibility is you have write both at a time, I have removed one of them and it works for me. enter image description here

Screenshot of mobile screen

Upvotes: 0

Fernando Larra&#241;aga Cahis
Fernando Larra&#241;aga Cahis

Reputation: 86

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!

Upvotes: 6

G. Hamaide
G. Hamaide

Reputation: 7106

It looks like a RN bug. I tried it and am getting the same result. I've opened a Github issue on this. You can track it here. I'll edit the answer once the issue is solved.

Upvotes: 1

Related Questions