react-naive-elements ListItem causing below listed Errors in my project

Question

please help me fix the below errors

ListItem.js:41 Uncaught TypeError: Cannot read property 'grey' of undefined

at renderIcon (ListItem.js:41)
at ListItem (ListItem.js:220)
at renderWithHooks (react-dom.development.js:16241)
at mountIndeterminateComponent (react-dom.development.js:18775)
at beginWork$1 (react-dom.development.js:20137)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at beginWork$$1 (react-dom.development.js:25738)
at performUnitOfWork (react-dom.development.js:24662)
at workLoopSync (react-dom.development.js:24638)
at performSyncWorkOnRoot (react-dom.development.js:24237)
at scheduleUpdateOnFiber (react-dom.development.js:23665)
at updateContainer (react-dom.development.js:27061)
at react-dom.development.js:27485
at unbatchedUpdates (react-dom.development.js:24400)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:27484)
at render (react-dom.development.js:27572)
at renderApplication (renderApplication.js:21)
at Object.run (index.js:49)
at Function.runApplication (index.js:89)
at registerRootComponent (registerRootComponent.web.tsx:14)
at Module.E:\React-Native\Confusion\index.js (index.js:8)
at __webpack_require__ (bootstrap:789)
at fn (bootstrap:100)
at Object.1 (log.js:59)
at __webpack_require__ (bootstrap:789)
at bootstrap:856
at bootstrap:856

Dependencies:

"react-native": "~0.62.2",
"react-native-elements": "^2.3.2",
"expo": "~38.0.9",
"react": "~16.11.0",
"react-native-vector-icons": "^7.1.0",
"react-native-web": "~0.11.7"

The following error is displayed on simulating it on web:

Answer 1

Looks to me as if there are no colours defined when the platform is web. I am getting the same issue too after updating to 2.3.2 with a similar set of dependencies too.

It seems there is a fix for this. Hopefully it will be released soon.

https://github.com/react-native-elements/react-native-elements/commit/dac4ef535565c1feb266bddf7233d277b8517554

Answer 2

As @markb said, there is a solution underway, see https://github.com/react-native-elements/react-native-elements/pull/2561

For the time being, you can use this fix:

import { colors } from 'react-native-elements'

// FIXME: https://github.com/react-native-elements/react-native-elements/pull/2561

// @ts-ignore The typings are also missing "web"
if (colors.platform.web == null) {
  // @ts-ignore The typings are also missing "web"
  colors.platform.web = {
    primary: '#2089dc',
    secondary: '#ca71eb',
    grey: '#393e42',
    searchBg: '#303337',
    success: '#52c41a',
    error: '#ff190c',
    warning: '#faad14'
  }
}