React-native: shadow will cut by scrollView

[yozman]

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
    Memory: 5.06 GB / 20.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    Yarn: 1.16.0 - ~/.nvm/versions/node/v12.4.0/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.4.0/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 25, 27, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.0
      System Images: android-27 | Intel x86 Atom_64, android-28 | Intel x86 Atom_64, android-29 | Intel x86 Atom_64
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.0 => 0.60.0

Steps To Reproduce

1. init project with v0.60
2. make a horizontal contain with ShadowProps

Describe what you expected to happen:
the vertical shadow is cut by ScrollView although with overflow: 'visible'

Snack, code example, or link to a repository:

<ScrollView
  horizontal
>
  <View
    style={{
      width: 80,
      height: 80,
      backgroundColor: '#fff',
      shadowOpacity: 1,
      shadowColor: '#f00',
      shadowOffset: {
        height: 0,
        width: 0,
      },
      shadowRadius: 4,
    }}
  />
</ScrollView>

[bohehe]

Can confirm this bug The FLatlist component （Android ）

[bohehe]

Setting parent component height helps me.

[emzet93]

I'm facing exactly the same issue, only in horizontal mode (Both platforms, React Native 0.60.5).
@bohehe answer is more like workaround than real solution. Temporary I solved it by wrapping shadow component with another View with paddingBottom set.

[tareqdayya]

can confirm the same issue on [email protected] for horizontal sides of objects within a regular (vertical-scrolling) scroll view, even if horizontal padding is added on the scrolling view.

BTW, the same issue arises if you replace the ScrollView with a normal view with overflow: 'hidden'.

Thanks @emzet93 for the workaround.

[MasterTeus]

Defina um padding para contentContainerStyle, o resultado é um espaçamento interno!
<ScrowView contentContainerStyle={{padding: 20}}>

[IdkMan2]

I am also experiencing the issue on latest version 0.61. Any progress on it?

[Tiltorito]

Same problem here

[yigithanyucedag]

overflow: 'visible'}} ...
This is the solution

[PositronicBrain]

Same problem, using a vertical FlatList the horizontal portion of the elevation if each list item gets clipped. React-native 0.62.2

[samipshah100]

Like @MasterTeus said, set padding in contentContainerStyle on your flatlist or scrollview

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

[stale[bot]]

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.