react / react/react-native

[iOS] Switch component loses liquid glass effect when parent is not subject to view recycling

Abierto
#54,666 13 comentarios 12 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

iOS 26 Issue: Author Provided Repro
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

Description

Following the discussions in https://github.com/facebook/react-native/issues/54497 and https://github.com/software-mansion/react-native-screens/issues/3392, I was able to reproduce it using a custom native component with view recycling disabled.

I'm opening this issue as a follow-up for further investigation with a reproduction in the reproducer app.

Steps to reproduce
  1. Clone https://github.com/t0maboro/Repro3392# and use the latest version from main branch
  2. Run the application on iOS
  3. Navigate forward -> back -> forward
  4. Then toggle the Switch component - the liquid glass has disappeared
React Native Version

0.82.1

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info
System:
  OS: macOS 15.6.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 360.44 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.3.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.4.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2025.09.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK:
    API Levels:
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 36.0.0
      - 36.1.0
      - 36.1.0
    System Images:
      - android-25 | Google APIs ARM 64 v8a
      - android-27 | Google APIs ARM 64 v8a
      - android-28 | Google APIs ARM 64 v8a
      - android-29 | Google APIs ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2512.13840223
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /usr/bin/javac
  Ruby:
    version: 3.4.2
    path: /Users/tomaszboron/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.1
    wanted: 19.1.1
  react-native:
    installed: 0.82.1
    wanted: 0.82.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true
Stacktrace or Logs

(I have only logs from XCode, please take a look at the attached video)

warning: (arm64) /Users/tomaszboron/Library/Developer/Xcode/DerivedData/ReproducerApp-fsksfcdolzvtriatalgkxiyrapgb/Build/Products/Debug-iphonesimulator/ReproducerApp.app/ReproducerApp empty dSYM file detected, dSYM was created with an executable with no debug info.
`UIScene` lifecycle will soon be required. Failure to adopt will result in an assert in the future.
_setUpFeatureFlags called with release level 2
nw_socket_set_connection_idle [C1.1.1:2] setsockopt SO_CONNECTION_IDLE failed [42: Protocol not available]
nw_socket_set_connection_idle [C1.1.1:2] setsockopt SO_CONNECTION_IDLE failed [42: Protocol not available]
Failed to send CA Event for app launch measurements for ca_event_type: 0 event_name: com.apple.app_launch_measurement.FirstFramePresentationMetric
nw_socket_set_connection_idle [C2.1.1:2] setsockopt SO_CONNECTION_IDLE failed [42: Protocol not available]
nw_socket_set_connection_idle [C2.1.1:2] setsockopt SO_CONNECTION_IDLE failed [42: Protocol not available]
nw_socket_set_connection_idle [C1.1.1:2] setsockopt SO_CONNECTION_IDLE failed [42: Protocol not available]
nw_socket_set_connection_idle [C1.1.1:2] setsockopt SO_CONNECTION_IDLE failed [42: Protocol not available]
nw_socket_set_connection_idle [C1.1.1:2] setsockopt SO_CONNECTION_IDLE failed [42: Protocol not available]
nw_socket_set_connection_idle [C1.1.1:2] setsockopt SO_CONNECTION_IDLE failed [42: Protocol not available]
Failed to send CA Event for app launch measurements for ca_event_type: 1 event_name: com.apple.app_launch_measurement.ExtendedLaunchMetrics
nw_socket_handle_socket_event [C5.1.1:1] Socket SO_ERROR [61: Connection refused]
nw_endpoint_flow_failed_with_error [C5.1.1 ::1.8097 in_progress socket-flow (satisfied (Path is satisfied), interface: lo0)] already failing, returning
nw_socket_handle_socket_event [C5.1.2:1] Socket SO_ERROR [61: Connection refused]
nw_endpoint_flow_failed_with_error [C5.1.2 127.0.0.1:8097 in_progress socket-flow (satisfied (Path is satisfied), interface: lo0)] already failing, returning
nw_endpoint_flow_failed_with_error [C5.1.2 127.0.0.1:8097 cancelled socket-flow ((null))] already failing, returning
nw_connection_get_connected_socket_block_invoke [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
TCP Conn 0x600003304e60 Failed : error 0:61 [61]
Unbalanced calls start/end for tag 20
Unbalanced calls start/end for tag 19
Running "ReproducerApp" with {"rootTag":11,"initialProps":{},"fabric":true}
native component initialized successfully
native component initialized successfully
native component initialized successfully
native component initialized successfully
MANDATORY Reproducer

https://github.com/t0maboro/Repro3392#

Screenshots and Videos

https://github.com/user-attachments/assets/55acc045-ea84-41d5-a689-8b062f82809f

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con el reproductor obligatorio en github.com/t0maboro/Repro3392 y sigue las discusiones enlazadas en los issues 54497 y react-native-screens 3392. Ejecuta la aplicación de iOS, reproduce la secuencia navigate-forward/back/forward y, después, cambia Switch para comparar el efecto Liquid Glass. Se considera terminado cuando el efecto sigue presente con el reciclaje de vistas desactivado en el elemento padre.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
ios, react-native
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.