Skip to content

Fix fabric layout issues in iOS on fresh React Native v0.80.0 #731

Merged
scarlac merged 1 commit intoteslamotors:masterfrom
SmartArray:fix/rn-ios-0.80.0
Aug 27, 2025
Merged

Fix fabric layout issues in iOS on fresh React Native v0.80.0 #731
scarlac merged 1 commit intoteslamotors:masterfrom
SmartArray:fix/rn-ios-0.80.0

Conversation

@SmartArray
Copy link
Contributor

@SmartArray SmartArray commented Jun 26, 2025

Summary

Add constraints for all subviews

Motiviation

We at DigiCorp Labs are using this awesome camera library in our enterprise apps for code scanning.
During the update of one of our apps to React Native 0.80.0 the screen disappeared. It took us a while to figure out what was going on, but it seems that the new fabric renderer doesn't set the correct constraints and the developer has to handle this now, otherwise we get a white screen just as described in the issue: #708. Note that this is definitely not a permission issue; we tested this a couple of times. The view simply doesn't have a layout set.

What we changed in this PR

Why It Was Required

  • Without explicit constraints, UIKit reported ambiguous layout, leading to views being present in the hierarchy; but never rendered
  • React Native’s Fabric architecture expects native components to have well-defined layouts; otherwise they fail to mount and display correctly.
  • This change ensures that each subview fills its parent unambiguously, stabilizing native view rendering under Fabric.
  • Please note that constraining the view to the outer edges of the parent view (RCTView) seems to be the correct way of handling the layout, since the RCTView is still managed completely by React Native.

How did you test this change?

  • Physical Devices:
    • iPhone 12
    • iPhone 15 Pro
  • Simulator

Further testing

@Falconiere
Copy link

Falconiere commented Jul 29, 2025

I got the blank issue on iOS and this pr fixes it :success:

@Falconiere
Copy link

I got the blank issue on iOS and this pr fixes it image

Also it's not crashing when capturing the picture, I was getting that in the 80.1

cixio added a commit to cixio/react-native-camera-kit that referenced this pull request Aug 4, 2025
@cixio
Copy link

cixio commented Aug 4, 2025

works perfectly, thank you very much!

should be merged asap.

@pvicensSpacedev
Copy link

Had the same issue, this fixes it!
Thank you

@scarlac scarlac merged commit 5e59d8a into teslamotors:master Aug 27, 2025
@scarlac
Copy link
Collaborator

scarlac commented Aug 27, 2025

Excellent work @SmartArray - I confirmed that it fixes it on iOS with new arch enabled. Thank you for the contribution

@RRigueira24
Copy link

Hey @scarlac did you setup a new release with this correction? I will be applying it as patch but a update with this fix would be awesome.
Cheers.
Thanks @SmartArray .

@scarlac
Copy link
Collaborator

scarlac commented Sep 4, 2025

Hey @RRigueira24 I found out that the issue goes way deeper. We aren't actually using the new arch, so it "sorta works" but we are not fully opted in. It's officially enabled, but when you run it, it does not use Fabric, which means we are only half ported (New arch is Fabric view components (the camera view finder) + JSI modules (the API you call .capture() on)).
I am working on a fix, but to be polite, let me just say that the new arch docs are really unhelpful. Bugs, no docs, wrong docs, no examples, several ways of doing the same thing, and a multitude of vague instructions makes what should have been a simple fix a gigantic amount of debugging, segmentation faults, and more, all of which you cannot find solutions for on Google, nor with an AI, as the new arch is so new and undocumented.

@scarlac
Copy link
Collaborator

scarlac commented Sep 5, 2025

A fix should have been included with v16.0.0:

#741

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants