zIndex in a List
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- C++
- Estrellas
- 127k
- Forks
- 25.3k
- Merge medio
- 1 d 23 h
- PR fusionados (30 d)
- 4
Descripción
- 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
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con el rn branch demo project enlazado y reproduce el problema usando FlatList y Array.map. Después, inspecciona cómo se gestionan la posición y zIndex del componente pulsado. Compara el comportamiento con la configuración de React Native indicada en el informe; se considera terminado cuando el componente pulsado con un zIndex alto se renderiza por encima de los demás componentes de la lista.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native
- Área
- mobile-dev
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 45/100