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

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]

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.

[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.