(Android) Transparent gaps between items on SectionList when using an ItemSeparatorComponent

[reyalpsirc]

React Native version: 0.59.8

React Native Environment Info:
  System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 479.53 MB / 24.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.10.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 5.6.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 17, 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.2, 27.0.3, 28.0.2, 28.0.3
      System Images: android-26 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 10.2/10E125 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.3 => 16.8.3 
    react-native: 0.59.8 => 0.59.8 
  npmGlobalPackages:
    create-react-native-app: 1.0.0
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7

Steps To Reproduce

• Paste the following code on a screen rendering method:

  <View style={{
    flex: 1,
    backgroundColor: 'blue',
    alignSelf: 'stretch',
    opacity: 1
  }}>
    <SectionList
      sections={[
        {title: 'Title1', data: ['item1', 'item2', 'item2', 'item2']},
        {title: 'Title2', data: ['item3', 'item4']},
        {title: 'Title3', data: ['item5', 'item6']}
      ]}
      renderSectionHeader={({section: {title}}) => (
        <Text style={{fontWeight: 'bold'}}>{title}</Text>
      )}
      ItemSeparatorComponent={() => <View style={{ height: 1, width: 333, backgroundColor: 'white' }} />}
      keyExtractor={(item, index) => item + index}
      renderItem={() =>
        <View>
          <View style={{ height: 84, width: 333, backgroundColor: '#CCCCCC' }} />
        </View>
        } />
  </View>
  

• Build the code and test on an Android device

Describe what you expected to happen:

There should be no transparent gaps between the items of the section list. Here's what currently happens:

Snack, code example, or link to a repository:

https://snack.expo.io/@reyalpsirc/sectionlist-transparent-gaps-android

Tested on Google Nexus 5X and Samsung Galaxy A5

[reyalpsirc]

Btw, I forgot to say that this problem seems to exist since react-native 0.54 at least.

Some designs are not affected by this but other types of background vs the items on the list become horrible due to this transparency thing (it gives a feeling that the items are clickable and that are being pressed)

[reyalpsirc]

Is there any news about this? I saw that @olegbl made some work before on Android scrollview and such. Maybe you have some input about this?

[olegbl]

@reyalpsirc Sorry, I'm not on the React Native team :)

From personal experience, I've seen this kind of thing before when using a simulator and resizing it to some random screen size where pixels don't match 1:1 with pixels on screen. As a result, aliasing causes random pixels to be omitted all together. It's easy to tell if that's the case as grabbing the corner of a simulator and slowly resizing it causes different rows to flicker in and out as aliasing sometimes gets them and sometimes doesn't.

[reyalpsirc]

Ah, sorry for that @olegbl .

In this case I tested it on 2 different phones and the exact same rows were showing transparency between the items like on the image. And it seems that the resolution between the phones is different:

• Nexus 5X: 1080 x 1920 pixels, 16:9 ratio (~423 ppi density)
• Samsung Galaxy A5: 720 x 1280 pixels, 16:9 ratio (~294 ppi density)

Don't know who to mention about this :/

[olegbl]

Yeah, I've never seen it on physical devices (since there's no scaling) so this is probably some other issue outside of my experience.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[reyalpsirc]

The issue is still around and can still be checked on the given snack.expo link. It happens when checking on a real Android device (and not on Appetize.io virtual ones)

I think this has been around on React Native for a very long time but it's only noticeable with the contrast of some colours.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[reyalpsirc]

The issue is still around. It still happens on the given snack with latest Expo version

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[reyalpsirc]

The issue is still around

[Aryk]

I'm getting this is as well on Expo on iOS simulator.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[reyalpsirc]

The issue is still around

[satheeshwaran]

We still see this issue with React native 0.59

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[serenitytee]

Setting the height of list items like this PixelRatio.roundToNearestPixel(84) helped me

[raphaelPloomes]

any workaround?

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[WSY93]

This issue still occurs in version 0.67.2