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.

Add support for ListItem underlayColor

See original GitHub issue

Before filling out an issue, be sure to check the version of react-native-elements you are using and the docs for that version over here.

Explain what you did I added the underlayColor option to a ListItem. Because I am using the onPress function, react-native-elements renders a TouchableHighlight for the component, but underlayColor is not an exposed property in the type signature.

Expected behaviour I expect to be able to add underlayColor to a ListItem when it is rendering as a TouchableHighlight (or any other component that accepts an underlayColor attribute).

Describe the bug I see a type error, but the code itself executes fine. The bug is only in what appears to be inconsistent typings.

Possible Solution I believe there is a way with TypeScript to allow that property if and only if the underlying component supports it, but I’m not quite sure how to tackle that. @iRoachie mentioned he may be able to help guide me through the type annotations.

Your Environment (please complete the following information):

software	version
react-native-elements	1.0.0
react-native	https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz
npm or yarn	yarn

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:7

Top GitHub Comments

5reactions

iRoachiecommented, Nov 24, 2019

Just set underlayColor prop https://snack.expo.io/@roach_iam/honest-salsa

3reactions

iRoachiecommented, Jul 14, 2019

Just merged in a fix for this. Will be available in 1.2.0

Top Results From Across the Web

React Native Elements Handle ListItem click - Stack Overflow

Here is a sample code snippet, this might help you : ... <ListItem underlayColor="#ff0000" activeOpacity={1} title="Title" ...

TouchableHighlight - React Native

On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the...

Migration Guide | React Native Elements

React Native Elements v4 introduces many features including few new components, fully typescript support and some breaking changes whose migration is being ...

react-native-elements - npm

Install react-native-vector-icons (if you do not already have it) ... import { List, ListItem } from 'react-native-elements' const list ...

react-native-elements | Yarn - Package Manager

fix padding in list item for web #2416 · Have IconObject extend TouchableHighlightProps so that HeaderIcon can support props like underlayColor #2185 ·...