meftunca commented 2 weeks ago

Report

I am using react-navigation and react-native-paper in my react native project. After switching between pages in my project, the appearance of react-native and react-native-paper components is broken. I am sharing 2 images below. 1. the corrupted version of the image and 2. the expected version

[x] I have searched existing issues and this is not a duplicate

simulator_screenshot_C8D756D1-CE57-4C8D-AFA4-F49F11DEAA93

simulator_screenshot_1998387D-4894-47DA-BE3B-CB8987295EF7

react-native info

System:
  OS: macOS 15.0.1
  CPU: (12) arm64 Apple M2 Max
  Memory: 127.89 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.1.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.0
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.10.28.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/mapletechnologies/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12483815
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/mapletechnologies/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.1
    wanted: 0.76.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

react-native-bot commented 2 weeks ago

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

react-native-bot commented 2 weeks ago

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

cortinico commented 2 weeks ago

Looks like a duplicate of

https://github.com/facebook/react-native/issues/47410

tmitchel2 commented 2 weeks ago

I personally think this is very much a react native new arch core style handling issue. I'm narrowing down the issue and i suspect the following:

It's related to use of borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius style props. If I take usage of these props away then the issue goes away.
On remounting / rerendering the border radius seems to get substituted back into the wrong style props, perhaps paddingLeft, paddingRight or something like that as I see images with sections chopped off by the same amount at the radius.
It's related to showing similar content in a different screen, not just any screen, perhaps when you display a similar FlatList or similar ListItems / keyed list items? Is the item style cached by list item key in the new arch?

migueldaipre commented 2 weeks ago

I personally think this is very much a react native new arch core style handling issue. I'm narrowing down the issue and i suspect the following:

It's related to use of borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius style props. If I take usage of these props away then the issue goes away.

On remounting / rerendering the border radius seems to get substituted back into the wrong style props, perhaps paddingLeft, paddingRight or something like that as I see images with sections chopped off by the same amount at the radius.

It's related to showing similar content in a different screen, not just any screen, perhaps when you display a similar FlatList or similar ListItems / keyed list items? Is the item style cached by list item key in the new arch?

Can we isolate this issue in a minimal repro with just react native? No third-party libraries.

Chenjiujiu commented 1 week ago

⚠️ 缺少可重复的示例 ℹ️ 我们无法在您的问题报告中检测到可重现的示例。请提供：

* 如果您的错误与 UI 相关： [小吃 ](https://snack.expo.dev)

* 如果您的错误与构建/更新相关：使用我们的 [Re Producer Template ](https://github.com/react-native-community/reproducer-react-native/generate) 。   复制者需要位于您的用户名下的 GitHub 存储库中。

https://snack.expo.dev/@saddhu/tab-style-abnormal?platform=ios

https://github.com/callstack/react-native-pager-view/issues/914

Chenjiujiu commented 1 week ago

我个人认为这很大程度上是一个 React Native 新的 Arch 核心风格处理问题。我正在缩小问题范围，我怀疑以下内容：

它与 borderTopLeftRadius、borderTopRightRadius、borderBottomLeftRadius、borderBottomRightRadius 样式属性的使用有关。如果我不再使用这些道具，那么问题就会消失。

在重新安装/重新渲染时，边框半径似乎被替换回错误的样式道具，可能是 paddingLeft、paddingRight 或类似的东西，因为我看到图像的部分在半径处被切掉了相同的量。

它与在不同的屏幕（而不仅仅是任何屏幕）中显示相似的内容有关，也许当您显示类似的 FlatList 或类似的 ListItems / 键控列表项时？项目样式是否由新拱门中的列表项目键缓存？

我们可以通过本机反应以最小的重现来隔离这个问题吗？没有第三方库。

https://snack.expo.dev/@saddhu/tab-style-abnormal?platform=ios

facebook / react-native

Component layout size calculation errors #47420

Report

react-native info