zIndex in a List
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
- I have reviewed the documentation
- I have searched existing issues
- I am using the latest React Native version
This is actually a reopen of my #16878 issue. I've got some thumbs up, so I think I am not the only one with this issue. This time I updated my example project to a pure rn project with the latest release (rn Branche)
Environment
info
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
Memory: 94.53 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.12.0 - ~/.nvm/versions/node/v10.12.0/bin/node
Yarn: 1.16.0 - ~/.nvm/versions/node/v10.12.0/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23
Build Tools: 23.0.1
IDEs:
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.8 => 0.59.8
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
Steps to Reproduce
- Make a list (FlatList or Array.map, it happens with both)
- The renderItem should get an onPress event
- The onPress event changes the style to a high zIndex and position absolute
Expected Behavior
I expect that the component with the high zIndex is over every other component.
Actual Behavior
It seems like it ignores the zIndex property. The behavior is exactly like I would not apply any zIndex. I can remove the zIndex and I get the same result.
Google Drive Link to a screenshot.
Reproducible Demo
Github Demo Project rn Branche This is just an extract out of my current rn project.
Expo Link (Not on the latest rn version)
Google Drive Video which show the issue
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked rn branch demo project and reproduce the issue using FlatList and Array.map, then inspect how the pressed component's position and zIndex are handled. Compare the behavior on the reported React Native setup; done means the pressed component with a high zIndex renders above the other list components.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100