contained Button in Modal has delay shadow when close

[WinnieS0728]

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

[WinnieS0728]

fix this issue by go to node_modules/react-native-paper/src/components/Surface.tsx and add needsOffscreenAlphaCompositing prop at Animated.View at MD2Surface

and make a patch