Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#359 コメント 4 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
javascript, react
領域
mobile

調査の方向性

app/_layout.tsx の Expo 再現から始め、失敗する Stack ラッパーと動作する Slot ラッパーを比較します。ネイティブのレイアウト制約エラーを再現し、その後、失敗の原因が react-strict-dom の統合にあるのか、Expo Router のネイティブスタックにあるのかを追跡します。Stack が空白のアプリや制約エラーなしでルートレイアウトをレンダリングできれば完了です。

索引モデルが issue の本文から書いたものです。

説明

bug
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

主要言語
JavaScript
スター
3.6k
フォーク
208
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

react/react-strict-dom のほかの issue

react/react-strict-dom の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。