React-native-web: Warning: Failed prop type: Invalid prop `children` supplied to `Picker`

[jp928]

Warning: Failed prop type: Invalid prop children supplied to Picker

How to reproduce

<Picker>
  <Picker.Item label="test" />
</Picker>

Simplified test case:

Steps to reproduce:

1. React Native 0.58+
2. Add <Picker.Item> and child of <Picker>

Expected behavior
No warning shows up.

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.10.0
• React (version): 16.8.3
• Browser: Chrome
  

[necolas]

Link to a codesandbox test case please

[d4rky-pl]

Uhhhhh, it took me an hour to debug this!

The reason this is happening is because of react-hot-loader wrapping the Picker.Item in it's ProxyComponent via ES6ProxyComponentFactory. When it happens, the child.type !== Picker.Item check is no longer true because child.type has been wrapped.

This is the Picker.Item:

And this is child.type:

Notice different [[FunctionLocation]] which points to VM97:4 in the latter case, which is react-hot-loader's proxy:

@necolas I know I'm supposed to provide a codesandbox test case but this one is super tricky and I've already spent way too much time on this. Would it be possible for you to loosen this check without this test case or should I spend another hour or two creating something reproducible? I have very strong opinions about code failing propTypes in development, even if it's ultimately the library not us 😜

[NishargShah]

How to solve that? @d4rky-pl

[necolas]

Upgrade to the latest version. There is no runtime PropTypes checking anymore

[NishargShah]

Ohk, I just found out https://github.com/react-native-community/react-native-picker, I am using the deprecated picker, thanks for the reply :)