Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ListItem crashes unexpectedly on Web

See original GitHub issue

I upgraded React Native Elements to v2.3.1 and expo-cli to 3.25.1. I expected the web application to work with warnings about deprecated props on ListItem but when I start the app in web version an unexpected error occures in ListItem: ListItem.js:41 Uncaught TypeError: Cannot read property 'grey' of undefined at renderIcon (ListItem.js:41) at ListItem (ListItem.js:220)

Here is an example on Snack to reproduce. https://snack.expo.io/yzVlD7RBS

I don’t know if it helps but debugging it turned out the theme.colors.platform (at line 41 of ListItem) object doesn’t contain any “default” property

These are the lines where I put the breakpoint in the ListItem file and where the error occurs: const renderIcon = (content, theme) => renderNode(Icon, content, { color: Platform.select(theme.colors.platform).grey, size: 24, });

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

mikehenkencommented, Sep 7, 2020

Really easy fix!

I resolved this locally by adding grey to the theme for platform “default”.

import { ListItem, ThemeProvider} from 'react-native-elements';
const theme = {  
  colors: {
    platform: {
      "default": {
        "grey": "#FFF"
      }
    }
  }
};

<ThemeProvider theme={theme}>
  <ListItem bottomDivider>
    <ListItem.Content>
      <ListItem.Title>
        Tracks
      </ListItem.Title>
    </ListItem.Content>
    <ListItem.Chevron />
  </ListItem>
</ThemeProvider>

Apparently someone put grey0 instead of grey as platform default. IOS & Android use grey, default uses grey0. See: https://github.com/react-native-elements/react-native-elements/blob/ed6e90d55f18f371ce606019c28f937f816ea3a8/src/list/ListItem.js#L41 And https://github.com/react-native-elements/react-native-elements/blob/62066e442e49630bb8490f5eb9f24412024945a1/src/config/colors.js#L8

0reactions

pranshuchittoracommented, Sep 17, 2020

Closing the issue. Fixed in #2561 If the issue still persists then feel free to reopen the issue. Happy Hacking 😃