contained Button in Modal has delay shadow when close #4785
Description
Current behaviour
when I put contained Button in Modal and close Modal.
button will have delay shadow when close, cause weird black border.
It seems like elevation in Surface causing this error.
Expected behaviour
only contained button has this delay shadow when modal closed.
it should not have this shadow like text Button and outlined Button.
How to reproduce?
just a simple modal & button code.
export default function ModalTest() {
const [isVisible, setIsVisible] = useState(false);
return (
<>
<View>
<Button mode="contained" onPress={() => setIsVisible(true)}>
open
</Button>
</View>
<Modal visible={isVisible} onDismiss={() => setIsVisible(false)}>
<View
style={{
padding: 20,
backgroundColor: 'white',
gap: 10,
}}
>
<Button mode="contained" onPress={() => setIsVisible(false)}>
contained button
</Button>
<Button mode="text" onPress={() => setIsVisible(false)}>
text button
</Button>
<Button mode="outlined" onPress={() => setIsVisible(false)}>
outlined button
</Button>
</View>
</Modal>
</>
);
}Preview
2025-08-07.1.55.14.mov
What have you tried so far?
Surface and elevation
it seems like is elevation on surface cause this shadow.
so Surface with elevation and Button in contained mode(MD2) and Button in elevated mode(MD3)
all have same problem.
but I don't know how to fix it.
prevent render Modal when isVisible false
export default function ModalTest() {
const [isVisible, setIsVisible] = useState(false);
return (
<>
<View>
<Button mode="contained" onPress={() => setIsVisible(true)}>
open
</Button>
</View>
{isVisible && (
<Modal visible={isVisible} onDismiss={() => setIsVisible(false)}>
<Surface
elevation={4}
style={{
padding: 20,
backgroundColor: 'white',
gap: 10,
}}
>
<Button mode="contained" onPress={() => setIsVisible(false)}>
contained button
</Button>
<Button mode="text" onPress={() => setIsVisible(false)}>
text button
</Button>
<Button mode="outlined" onPress={() => setIsVisible(false)}>
outlined button
</Button>
</Surface>
</Modal>
)}
</>
);
}this will work for sure. for now this is my solution.
but it will not have the fade out effect.
Your Environment
| software | version |
|---|---|
| ios | ios 18.3 |
| android | api level 35 |
| react-native | 0.76.9 |
| react-native-paper | 5.14.5 |
| node | 22.17.0 |
| npm or yarn | yarn 4.9.2 |
| expo sdk | 52.0.47 |