Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#359 4 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, react
Área
mobile

Línea de trabajo

Comienza con la reproducción de Expo en app/_layout.tsx, comparando el wrapper Stack que falla con el wrapper Slot que funciona. Reproduce el error nativo de restricciones de layout y, después, rastrea si el fallo está en la integración de react-strict-dom o en el stack nativo de Expo Router; se considera terminado cuando Stack renderiza el layout raíz sin una app en blanco ni errores de restricciones.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
JavaScript
Estrellas
3.6k
Forks
208
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react/react-strict-dom

Todos los issues de react/react-strict-dom

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.