data-layoutconformance="strict" conflicts with expo-router Stack
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript, react
- Domain
- mobile
Research direction
Start with the Expo reproduction in app/_layout.tsx, comparing the failing Stack wrapper with the working Slot wrapper. Reproduce the native layout-constraint error, then trace whether the failure is in react-strict-dom integration or the Expo Router native stack; done means Stack renders the root layout without a blank app or constraint errors.
Written by the indexing model from the issue text.
Description
Describe the issue
When attempting to wrap the root layout file in <html.div data-layoutconformance="strict"> I get the error below (and a blank app, rendering does not work). Switching from a Stack to a Slot and everything works fine. Also, wrapping an entire page seems to work (ie: 'app/index.tsx`)
import "../stylex.css";
import { Stack } from "expo-router";
import { html } from "react-strict-dom";
export default function RootLayout() {
return (
<html.div data-layoutconformance="strict">
<Stack />
</html.div>
);
}
Not quite sure how supported expo is, and it's quite likely this isn't an expo specific issue but rather a react-navigation and/or react-native-screens issue, since this is probably conflicting with the native stack (and why a Slot works but Stack doesn't). I just though I'd mention it because most likely there's quite a few people out there trying to test out react-strict-dom using expo/expo-router and probably are running into the same issue as the root _layout file is the most obvious place to stick this tag in an expo-router based project.
[UIKitCore] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand,
refer to the documentation for the UIView property
translatesAutoresizingMaskIntoConstraints)
(
"<NSAutoresizingMaskLayoutConstraint:0x60000218f8e0 h=-&- v=--& index.minY == 53.6667
(active, names: index:0x1010df540, '|':UILayoutContainerView:0x10fc55ff0 )>",
"<NSAutoresizingMaskLayoutConstraint:0x60000218d2c0 h=-&- v=--& index.height == 44
(active, names: index:0x1010df540 )>",
"<NSLayoutConstraint:0x600002102c10
V:[index]-(0)-[UIFocusContainerGuide:0x600003d24b40'UINavigationControllerContentFocusContainerGuide']
(active, names: index:0x1010df540 )>",
"<NSLayoutConstraint:0x600002102c60
UIFocusContainerGuide:0x600003d24b40'UINavigationControllerContentFocusContainerGuide'.bottom
== UILayoutContainerView:0x10fc55ff0.bottom (active)>",
"<NSLayoutConstraint:0x600002194550 'UIView-Encapsulated-Layout-Height'
UILayoutContainerView:0x10fc55ff0.height == 0 (active)>"
)
Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x600002102c10
V:[index]-(0)-[UIFocusContainerGuide:0x600003d24b40'UINavigationControllerContentFocusContainerGuide']
(active, names: index:0x1010df540 )>
Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in
the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in
<UIKitCore/UIView.h> may also be helpful.
Expected behavior
None really
Steps to reproduce
Create new expo project, try to follow installation docs for react-strict-dom as best as possible (they are not expo-router specific), wrap app/_layout.tsx in <html.div data-layoutconformance="strict">, see error on native
Test case
No response
Additional comments
No response
- Dominant language
- JavaScript
- Stars
- 3.6k
- Forks
- 206
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react/react-strict-dom
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
react/react-strict-dom#467 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
react/react-strict-dom#465 · 2 comments ·
-
Difficulty 5/5 Over a week Newbie friendliness 35/100
react/react-strict-dom#520 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 35/100
react/react-strict-dom#505 · 2 reactions ·
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 62/100
react/react-strict-dom#491 · 4 comments ·
All issues in react/react-strict-dom
Similar issues
-
awaiting triage bug Causes friction Hop Gui P1 P2 Transforms
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
georgestephanis/p2026#40 ·
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Open
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Margaret-Petersen/food-delivery-app-clone-react-native#1981 ·