Modify card style when closing a React Navigation stack card - react-native

Question

My goal is to reproduce a stack card style that exists in the ios Spotify app in my react native application.
In Spotify, the currently playing song screen is a full screen modal:
When closing down the modal, the style of the card is modified to show a border top radius:
I am using React Navigation. For now I only achieved to style the card permanently with a border radius using the React Navigation 'options' prop to style the card. My goal is to show the border radius only while the stack card is getting closed down.
<Stack.Screen
name="ScreenName"
component={ScreenComponentName}
options={{
cardStyle: {
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
}}
/>
Any idea how I could modify the card style to add border radius only when the card is getting closed?

Answer 1

You may need to provide a header in your Screen, rather than using the header provided by the Navigator. Then, you can set the borderRadius on your header View.
Your Navigator:
<Stack.Screen
name="MyScreen"
component={MyScreen}
options={{
headerShown: false,
}}
/>
Your Screen:
function MyScreen() {
const insets = useSafeAreaInsets();
return (
<>
<View
style={[
styles.header,
{ borderTopLeftRadius: 38, borderTopRightRadius: 38 },
{ paddingTop: insets.top },
]}
>
<TouchableOpacity>
<Icon source={require('../assets/images/my-icon.png')}/>
</TouchableOpacity>
<TouchableOpacity>
<Icon source={require('../assets/images/my-icon.png')}/>
</TouchableOpacity>
</View>
<View style={styles.body}>
<Text>Foo</Text>
</View>
</>
)
}
const styles = StyleSheet.create({
header: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
paddingVertical: 20,
},
body: {
flex: 1,
}
});