Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shadows incrementing in FlatLists (Android only) #22672

Closed
wmonecke opened this issue Dec 16, 2018 · 4 comments
Closed

Shadows incrementing in FlatLists (Android only) #22672

wmonecke opened this issue Dec 16, 2018 · 4 comments
Labels
Bug Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@wmonecke
Copy link

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:

Screenshot

I can only suppose this is a bug.

@hramos
Copy link
Contributor

hramos commented Dec 18, 2018

Can you provide a code example that reproduces the issue?

@wmonecke
Copy link
Author

wmonecke commented Dec 18, 2018

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",

@wmonecke wmonecke changed the title Shadows incrementing in listviews Shadows incrementing in listviews (Android only) Dec 18, 2018
@wmonecke wmonecke changed the title Shadows incrementing in listviews (Android only) Shadows incrementing in FlatLists (Android only) Dec 18, 2018
@hramos hramos added Platform: Android Android applications. and removed ❔Needs More Information labels Dec 18, 2018
@hramos hramos removed the Bug Report label Feb 6, 2019
@stale
Copy link

stale bot commented Aug 4, 2019

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.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 4, 2019
@stale
Copy link

stale bot commented Aug 11, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Aug 11, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Aug 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

5 participants