react / react/react-native

<Modal> Component Not Appearing Correctly in Component Tree

Abierto
#49,717 3 comentarios 5 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: Modal Issue: Author Provided Repro Platform: iOS Type: New Architecture
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

Description

NOTE: This bug was NOT present on the old architecture. As soon as I set newArch: enabled, this bug appeared.
Another note: I did not file this issue in react-navigation because I reproduced this in react navigation v6 and v7 and this bug only was present on both versions. It only appeared when I set newArch: enabled and it appears to be related to the <Modal /> component.

The repro provided below should be very easy to reproduce (refer to videos).

I have a modal component like so:

// app/screens/ConfirmationModal.tsx
import { Modal, View }  from "react-native"
// ...

<Modal visible={showModal}>
   <View style={$fullScreenStyle}>

   </View>
</Modal>

And I trigger the setShowModal(true), it is actually appearing behind my screen (or just not at all) in the new architecture instead of above.

// My screen in my Navigator
<Stack.Screen
   name="RandomScreen"
   component={Screens.RandomScreen}
   options={{
      presentation: "transparentModal", // This line appears to be causing the collision with the Modal component
      animation: "fade",
   }}
/>

On the component tree, I have this Modal component at the very top, so this should definitely not occur.

Steps to reproduce
  1. Clone the repro: https://github.com/ChristopherGabba/Modal_Repro
  2. Run yarn install
  3. Run npx expo run:ios
  4. When the app loads, tap on Open Modal button.
  5. When the modal appears tap on the Green Show react native modal button

What should happen here is a green full screen modal should appear but nothing happens at all.

  1. Comment out this line:
// app/navigators/AppNavigator.tsx

  <Stack.Screen
     name="Modal"
     component={ModalScreen}
     options={{
          // presentation: "transparentModal", // COMMENTING THIS LINE OUT THE MODAL WORKS
          animation: "fade",
     }}
  />

Go through the same sequence and it works just fine.

React Native Version

0.76.7

Affected Platforms

Runtime - iOS

Areas

Bridgeless - The New Initialization Flow

Output of npx @react-native-community/cli info
error Failed to load configuration of your project.
Config Validation Error: "project.ios.unstable_reactLegacyComponentNames" is not allowed
    at parseUserConfig (/Users/christophergabba/.npm/_npx/270969bc0f7612b1/node_modules/@react-native-community/cli-config/build/readConfigFromDisk.js:48:11)
    at readConfigFromDiskAsync (/Users/christophergabba/.npm/_npx/270969bc0f7612b1/node_modules/@react-native-community/cli-config/build/readConfigFromDisk.js:63:10)
    at async loadConfigAsync (/Users/christophergabba/.npm/_npx/270969bc0f7612b1/node_modules/@react-native-community/cli-config/build/loadConfig.js:141:22)
    at async setupAndRun (/Users/christophergabba/.npm/_npx/270969bc0f7612b1/node_modules/@react-native-community/cli/build/index.js:191:14)
    at async run (/Users/christophergabba/.npm/_npx/270969bc0f7612b1/node_modules/@react-native-community/cli/build/index.js:146:5)
christophergabba@ChristophersMBP Modal_Repro %
Stacktrace or Logs
N/A
Reproducer

https://github.com/ChristopherGabba/Modal_Repro

Screenshots and Videos

Here is a video of it working correctly when the presentation: "transparentModal" is commented out:

https://github.com/user-attachments/assets/298942b9-5f64-4f81-840f-463bc6778a83

Here is a video of it not showing up at all when presentation: "transparentModal" is NOT commented out:

https://github.com/user-attachments/assets/f38376f4-a14c-4796-98c9-63eac6808efa

Guía de contribución

Abrir la guía de contribución

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.

Línea de trabajo

Comienza con el Modal_Repro enlazado, siguiendo app/navigators/AppNavigator.tsx y app/screens/ConfirmationModal.tsx; ejecuta yarn install y npx expo run:ios y, después, reproduce el problema con la nueva arquitectura. Compara el comportamiento con presentation: "transparentModal" habilitado y comentado; se considera terminado cuando el modal de React Native aparece sobre la pantalla mientras esa opción permanece habilitada.

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

Evaluación

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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.