React-native: [DatePickerIOS] Warnings failed propType unexpected

Created on 3 Mar 2016 · 13Comments · Source: facebook/react-native

I'm currently trying out the DatePickerIOS and this simple example throws two warnings :


constructor(props) {
  super(props);

  this.state = {
    timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
    date: new Date(),
    color: '#007AFF',
    minimumDate: this.props.minimumDate,
  }
}

onDateChange = (date) => {
  this.setState({date: date});
};

render () {
  return (
    <View style={styles.basicContainer}>
      <DatePickerIOS
        date={this.state.date}
        mode="datetime"
        timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours}
        onDateChange={() => this.onDateChange}
        minimumDate={this.state.minimumDate}
       />
    </View>
  );
};

I'm getting these warnings :

2016-03-03 09:32:58.829 [warn][tid:com.facebook.React.JavaScript] Warning: Failed propType: Invalid prop `date` of type `Number` supplied to `RCTDatePicker`, expected instance of `Date`. Check the render method of `DatePickerIOS`.
2016-03-03 09:32:58.830 [warn][tid:com.facebook.React.JavaScript] Warning: Failed propType: Required prop `onDateChange` was not specified in `RCTDatePicker`. Check the render method of `DatePickerIOS`.

I did aconsole.log(this.props) in react-native's file DatePickerIOS.ios.js in Libraries/Components and the output is the following :

{ date: Thu Mar 03 2016 09:32:58 GMT+0100 (CET),
  mode: 'datetime',
  timeZoneOffsetInMinutes: 1,
  onDateChange: [Function],
  minimumDate: undefined }

Any chances I'm doing this wrongly ?

Help Wanted iOS Ran Commands Locked

Source

ghamaide

Most helpful comment

I'm still having the warning. Why is the pull request closed?

evollu on 16 May 2016

👍8

All 13 comments

+1 Getting the same error.

nHiRanZ on 3 Mar 2016

@facebook-github-bot label iOS

brentvatne on 7 Mar 2016

@ghamaide - seems like a bug! if someone can investigate this it would be appreciated. It's worth trying the DatePickerIOS example in UIExplorer and ensuring that works as expected without warnings, if not then use that as the test case to fix.

brentvatne on 7 Mar 2016

because of requireNativeComponent, the RCTDatePickerIOS will be verify props base on the DatePickerIOS.propTypes.

but using RCTDatePickerIOS in the DatePickerIOS#render() was wrong, the date is number, undefined the onChange

daifee on 10 Mar 2016

👍2

Good discovery @epooren - that makes a lot of sense.

ajwhite on 10 Mar 2016

i fixed it at my branch

daifee on 10 Mar 2016

Would you mind opening a Pull Request with your changes? It'd be great to introduce a solution to this!

ajwhite on 10 Mar 2016

I'm still having the warning. Why is the pull request closed?

evollu on 16 May 2016

👍8

I implemented the pull request changes in my DatePickerIOS.ios.js and it didn't solve the problem. I now get:

JSON value '2016-05-17 20:24:59 +0000' of type NSDate cannot be converted to a date

Any other ideas how to make the DatePickerIOS component work?
I'm on react-native v0.24.1

rosiakr on 17 May 2016

@brentvatne If I make a pr so that datePicker can accept both a Number or a Date object and check the date to see if it can getTime would that be fine? This way the verification at the native level will be fine with the number