Current behaviour
When dismissing a Dialog (via any method — Cancel button inside Dialog.Actions, swipe-back gesture, or tapping outside the dialog), React Native 0.81 (with React 19.1.0) throws the following console error:
Invalid prop compact supplied to React.Fragment.
React.Fragment can only have key and children props.
Expected behaviour
Dismissing a Dialog should not cause console errors. Props like compact should not be passed to React.Fragment.
How to reproduce?
-
Create a Dialog with Dialog.Actions containing two Buttons, e.g.:
`
<Dialog.Title>Title</Dialog.Title>
<Dialog.Content>
Message
</Dialog.Content>
<Dialog.Actions>
<>
Cancel
OK
</>
</Dialog.Actions>
`
-
Open the dialog.
-
Dismiss the dialog by:
- Pressing the Cancel button
- Swiping back (Android)
- Tapping outside the dialog container
- Observe the console error.
Preview
Console error log on dismiss:
console.js:661 Invalid prop compact supplied to React.Fragment.
React.Fragment can only have key and children props.
What have you tried so far?
- Replaced <>...</> with <View style={{ flexDirection: 'row' }}>... → fixes the issue.
- Verified no compact prop is explicitly passed from my code.
- Confirmed that error appears only after upgrading to React Native 0.81.0 (React 19.1.0).
- Tried using React.Fragment explicitly → same error.
- This suggests Dialog.Actions is injecting compact into children.
Your Environment
| software |
version |
| ios |
x |
| android |
10 |
| react-native |
0.81.0 |
| react-native-paper |
^5.13.1 |
| node |
22.11.0 |
| npm or yarn |
1.22.22(yarn) |
| expo sdk |
Not using Expo(using rn-cli) |
Current behaviour
When dismissing a Dialog (via any method — Cancel button inside Dialog.Actions, swipe-back gesture, or tapping outside the dialog), React Native 0.81 (with React 19.1.0) throws the following console error:
Invalid prop
compactsupplied toReact.Fragment.React.Fragment can only have
keyandchildrenprops.Expected behaviour
Dismissing a Dialog should not cause console errors. Props like compact should not be passed to React.Fragment.
How to reproduce?
Create a Dialog with Dialog.Actions containing two Buttons, e.g.:
`
`<Dialog.Title>Title</Dialog.Title>
<Dialog.Content>
Message
</Dialog.Content>
<Dialog.Actions>
<>
Cancel
OK
</>
</Dialog.Actions>
Open the dialog.
Dismiss the dialog by:
Preview
Console error log on dismiss:
console.js:661 Invalid prop
compactsupplied toReact.Fragment.React.Fragment can only have
keyandchildrenprops.What have you tried so far?
Your Environment