Skip to content

data-layoutconformance="strict" conflicts with expo-router Stack #359

@gorbypark

Description

@gorbypark

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions