ScrollView with zIndex

[gunnartorfis]

Description

The ScrollView component is not respecting zIndexes. I have prepared an example as well as a repository with a newly created React Native project that demonstrates this.

The goal is to get the circle on top of the "header" and not getting cut-off like it is now.

Note: When swapping the <ScrollView> with <View> - it works, the zIndex is respected.

import React from 'react';
import {SafeAreaView, ScrollView, StyleSheet, View} from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <View style={styles.header} />
      <ScrollView style={styles.scrollView}>
        <View style={styles.box}>
          <View style={styles.circle} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  header: {height: 200, backgroundColor: 'orange', zIndex: 0},
  scrollView: {
    backgroundColor: 'pink',
    zIndex: 1,
  },
  circle: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: 'red',
  },
  box: {
    height: 1200,
    marginTop: -40,
  },
});

export default App;

Version

0.68.0

Output of npx react-native info

info Fetching system and libraries information... System: OS: macOS 12.1 CPU: (10) x64 Apple M1 Max Memory: 326.64 MB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v14.19.0/bin/yarn npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm Watchman: 2022.02.07.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8193401 Xcode: 13.3/13E113 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.68.0 => 0.68.0 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

• Render a View and a ScrollView beneath it
• Set a negative top margin on the View and a higher zIndex than is on the scrollView.
• Observe the View getting cut off

Snack, code example, screenshot, or link to a repository

https://github.com/gunnartorfis/ScrollViewZIndexShowcase

Here's how it is suppose to look (works when swapping <ScrollView> with a <View).

[github-actions[bot]]

:warning:	Missing Environment Information
:information_source:	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[gunnartorfis]

No Author Feedback needed @react-native-bot

[joe-sam]

It may perhaps be that your issue is actually related to the overflow property which can take one of three values scroll, visible and hidden . The following issue explains the crux of your problem ScrollView clips children even with overflow: 'visible' #31218 . Necessarily by design default all the scroll-able components like ScrollView and Flatlist would have to set their overflow property to scroll on the outermost wrapper which would automatically preclude the value and behavior you actually wanted to set.

const App = () => {
  return (
    <SafeAreaView >   
            <View style={styles.header} />
            <View style={styles.box}>
                <View style={styles.circle} />
            </View>
            <ScrollView style={styles.scrollView} ></ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  header: {height: 200, backgroundColor: 'orange' },

  scrollView: {
    backgroundColor: 'pink',
    overflow: 'visible',
    height: '100%',
    marginTop: 0,
  },
  circle: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: 'red',

    marginTop: -40,
  },
  box: {
    height: 1200,
    backgroundColor: 'pink',

  },
});

In the snippet above I have moved the children of ScrollView out to be siblings instead, and am using the natural increasing zIndex order that follows from the structure of JSX to get the desired effect on android.

[gunnartorfis]

Thanks for the explanation @joe-sam. However, I need the content to be scrollable and thus moving the ScrollView's children as siblings is not a solution. I could as well swap that ScrollView for a View in order to achieve the same thing.

[jgx-jay]

I also had the same problem

[patelgaurav4u]

I have the same issue with "react": "17.0.1", "react-native": "0.64.0",

[gunnartorfis]

The issue described persists in version 0.70.6.

It would be beneficial to receive confirmation regarding whether this is a limitation of the ScrollView component or if there exists a workaround or a fix for the bug. Although I am willing to contribute to resolving this problem, I require initial guidance.

[MARCA-Charlie]

I am experiencing what appears to be a similar, if not the same, issue.

I have in my screen:

• search bar component with an absolute positioned results panel (coloured black for demonstration).
• horizontal scrollview x2

The search bar and the scrollviews are adjacent to each other in the component tree. I would expect that setting the zIndex or elevation of the black results panel greater than that of the ScrollViews should render it above them in the z axis.

No matter the configuration, I cannot get the black results panel to sit above the contents of the ScrollViews. I am going to try using a FlatList as an alternative incase the behaviour is different - but ideally the component of choice here is a ScrollView.

[joe-sam]

I recommend posting a completely new issue definitely with at least a basic code reproducer (for example on snack.expo.dev or similar site) like this one Lay component on a ScrollView

Posting screenshots alone is usually not very helpful, no one is able to see your code and based on your descriptions, can only make random guesses which is completely pointless. You can always link here if you think the issue(s) is/are related.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[gunnartorfis]

This has not been resolved.

[sarthakpranesh]

This behavior still exists, the scrollview does not respect zIndex properties. More weirdly if you have two overlapping scrollview in a scenario where another gets mounted after some time (maybe search on user input, showing some result, etc) and if interaction is going on in the first scrollview its content overlap the second scrollview even when the second scrollview has a higher zIndex.