react-native icon indicating copy to clipboard operation
react-native copied to clipboard

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

Open t0maboro opened this issue 2 months ago • 6 comments

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

t0maboro avatar Nov 25 '25 11:11 t0maboro

cc @cipolleschi as you should have context on Liquid Glass + Switch

cortinico avatar Nov 25 '25 12:11 cortinico

added to our queue of iOS 26 issues. I don't have a good answer right now, the behavior is very weird, and it has to do with recycling or how we pool the components. I have to spend more time investigating it.

@t0maboro thanks for reporting it!

cipolleschi avatar Nov 25 '25 17:11 cipolleschi

@cipolleschi affect our app also, need solution please :/

ahmedawaad1804 avatar Dec 04 '25 15:12 ahmedawaad1804

Also interested in a solution! Any ideas if this will be resolved any time soon? My app is also affected by this.

IEPiXI avatar Dec 08 '25 08:12 IEPiXI

I've been able to reproduce this on other components as well, not just the switch- any glass view actually

https://github.com/user-attachments/assets/3bd3a7cc-9a3b-4b2e-82c1-9a14df503fd9

ahmed-sudowrite avatar Dec 12 '25 08:12 ahmed-sudowrite

I also came up against this issue recently. I'm pretty new to react and app development (so I don't have any insight into why) but happy to help wherever I can.

I'm using expo, and created this repository for testing (I logged an issue in the expo github originally thinking it was something to do with expo router, but it's not?).

https://github.com/martingarnett01/switch-test

Let me know if I can help debug the issue at all (with my limited knowledge).

martingarnett01 avatar Dec 18 '25 11:12 martingarnett01