@react-native-picker/pickerで「’Picker’ を JSX コンポーネントとして使用することはできません。」の回避策

エラー内容

import { Picker } from '@react-native-picker/picker';

export const ExamplePicker = () => {
  return (
    <Picker>
      <Picker.Item />
      <Picker.Item />
    </Picker>
  )
} 

上記のようなコードを書いた場合に、以下のエラーになります。
tsxの場合に発生し、jsxだと問題ありません。

'Picker' を JSX コンポーネントとして使用することはできません。
そのインスタンスの型 'Picker<string>' は、有効な JSX 要素ではありません。
'render()' によって返された型は、これらの型同士で互換性がありません。
型 'import("C:/Users/ishibashi/Documents/Repos/PokemonHOMESearch/node_modules/@types/react/index").ReactNode' を型 'React.ReactNode' に割り当てることはできません。
型 '{}' を型 'ReactNode' に割り当てることはできません。

発生環境

“react-native": “0.64.3"
“expo": “~44.0.0"
“@react-native-picker/picker": “2.2.1"

回避策

一旦anyに入れる事で回避できました。

import { Picker } from '@react-native-picker/picker';

const WrapPicker: any = Picker;

export const ExamplePicker = () => {
  return (
    <WrapPicker>
      <WrapPicker.Item />
      <WrapPicker.Item />
    </WrapPicker>
  )
}

未分類

Posted by ababa