Shadows incrementing in FlatLists (Android only)

[wmonecke]

Environment

 React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 260.22 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.9.4 - /usr/local/bin/node
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 26.0.2, 26.0.3, 27.0.2, 27.0.3, 28.0.2
        System Images: android-P | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.1 AI-173.4720617
      Xcode: 9.2/9C40b - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.6.3 => 16.6.3
      react-native: ^0.57.8 => 0.57.8
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

When rendering shadows in list views, the shadows offset starts to increase for no apparent reason. This is very annoying since shadows become ridiculous in long lists. See screenshot:

I can only suppose this is a bug.

[hramos]

Can you provide a code example that reproduces the issue?

[wmonecke]

import React, { Component } from 'react';
import { TouchableOpacity, FlatList, View, Platform } from 'react-native';

const JobSections = [{ num: 1 }, { num: 2 }, { num: 3 }, { num: 4 }, { num: 5 }, { num: 6 }, { num: 7 }, { num: 8 }, { num: 9 }];

class HomeComponent extends Component {
  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
  }

  renderRow(el) {
    const { buttonContainerStyle } = styles;

    return (
      <TouchableOpacity
        style={buttonContainerStyle}
        onPress={() => {}}
      >
      </TouchableOpacity>
    );
  }

  render() {
    const {
      contentContainerStyle,
      componentContainerStyle,
    } = styles;

    return (
        <View style={componentContainerStyle}>
          <View style={contentContainerStyle}>
            <FlatList
              showsVerticalScrollIndicator={false}
              keyExtractor={(item, index) => index}
              data={JobSections}
              renderItem={this.renderRow}
              ListFooterComponent={() => <View style={{ height: 11 }}/>}
            />
          </View>
        </View>
    );
  }
}

const styles = {
  componentContainerStyle: {
    flex: 1,
    backgroundColor: 'rgb(235,235,235)',
  },
  contentContainerStyle: {
    flex: 1,
    paddingLeft: 10,
    paddingRight: 10,
  },
  buttonContainerStyle: {
    height: 56,
    marginTop: 11,
    width: '100%',
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 3,
    paddingBottom: 3,
    flexDirection: 'row',
    backgroundColor: 'white',
    borderWidth: Platform.OS === 'ios' ? .5 : 0,
    borderRadius: 2,
    borderColor:  Platform.OS === 'ios' ? 'rgb(225, 225, 225)' : 'rgba(0,0,0,.0)',
    
    // shadow
    shadowColor: "#000",
    shadowOffset: {
        width: 0,
        height: 1,
    },
    shadowOpacity: 0.15,
    shadowRadius: 2.5,

    elevation: 2,
  },
}

Hello @hramos!

This is a simple component where you can see the bug. It only appears on Android devices.

In this example the bug appears while using the FlatList component. However, you can also use ListViews or any other kind of listing component.

"react": "^16.6.3",
"react-native": "^0.57.8",