question-mark
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.

ListItems in 1.0.0-beta7 have black backgrounds when pressed

See original GitHub issue

Explain what you did Utilize the ListItem component

Expected behaviour Normal ListItem component

Describe the bug There is now a black background when pressing ListItem components. I do not see anywhere in the updated documentation that shows how to edit the color of the ListItem’s outermost container.

To Reproduce Upgrade from 1.0.0-beta5 to 1.0.0-beta7 and voila! Now all your ListItem components will have an ugly black background when pressed (you can hold the press to further illustrate the issue).

Example: I am aware I need to adjust my scale props.

<ListItem
   leftAvatar={(this.props.imageUrl) ?
      <Avatar
         source={{ uri: this.props.imageUrl }}
         title={`${this.props.firstName.substring(0, 1)}${this.props.lastName.substring(0, 1)}`}
         titleStyle={{ fontFamily: 'Nexa Light' }}
         size='large'
         rounded
      />
   :
      <Avatar
         title={`${this.props.firstName.substring(0, 1)}${this.props.lastName.substring(0, 1)}`}
         titleStyle={{ fontFamily: 'Nexa Light' }}
         overlayContainerStyle={{ backgroundColor: COLORS.color1 }}
         size='large'
         rounded
      />
   }
   title={`${this.props.firstName} ${this.props.lastName}`}
   titleStyle={[commonStyles.text_normal, { color: (this.props.enableDark) ? COLORS.darkTheme.text : COLORS.lightTheme.text }]}
   subtitle={`${this.props.phone}\n${this.props.email}`}
   subtitleStyle={[commonStyles.text_normal, { color: COLORS.placeholderText }]}
   chevron
   chevronColor={(this.props.enableDark) ? COLORS.darkTheme.text : COLORS.lightTheme.text}
   onPress={() => this.props.navigation.navigate('UserInfo')}
   scaleProps={{
      friction: 90,
      tension: 100,
      activeScale: 0.90,
   }}
   containerStyle={[commonStyles.card_viewStyle, { backgroundColor: (this.props.enableDark) ? COLORS.darkTheme.view : COLORS.lightTheme.view }]}
/>

Screenshots

simulator screen shot - iphone 6s - 2018-11-13 at 23 58 43

simulator screen shot - iphone 6s - 2018-11-14 at 00 07 29

Your Environment (please complete the following information):

software version
react-native-elements 1.0.0-beta7
react-native 0.56.0
npm or yarn yarn

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:11

github_iconTop GitHub Comments

4reactions
SinanBaymammadlicommented, Nov 29, 2018

better just give underlayColor="transparent"

0reactions
jacobsmithcommented, Mar 25, 2019

@iRoachie I opened up https://github.com/react-native-training/react-native-elements/issues/1842 to move it to a separate issue. Thanks for any guidance you can provide!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Minecraft Wiki:Issues/1.0.0 - Fandom
I have just now re-tested tilled earth, wood slabs, cobblestone slab, and ice blocks (100% legit) still do not displace items in 1.0.0...
Read more >
CameraX | Android Developers
This table lists all the artifacts in the androidx.camera group. Artifact, Stable Release, Release Candidate, Beta Release, Alpha Release. camera-camera2, 1.2.
Read more >
Create 2022.3.0 Beta - NVIDIA Omniverse Documentation
Parity with 103.1 branch after Create beta release. - Several fixes. - Production sample content location. - Add visualization nodes dependency for samples....
Read more >
Angularjs setting list elements background-colour according to ...
i have tried it's working fine check following code ... <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet"> ...
Read more >
Release notes - @pnp/spfx-controls-react
Enhancements¶. ListView control got extended with the ability to specify a set of preselected items. Beta 1.0.0-beta.8 ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found