Closing animation is glitching only on iOS when updating to react navigation v6

As shown in the gif bellow the animations does not work correctly when going back. On android it works correctly.
I have spent all day trouble shooting so i'm pretty sure i covered everything. I have turned on debug mode and made sure all ids are passed correctly. I de-nested the shared element navigator and made it the root navigator for testing purposes it still did not make a difference. Also it is strange that it's an iOS issue only, usually its android giving the issues with this library.

Ive tried different modal presentations, turning off modal completely, trying with and without transition specs. Nothing seems to fix the issue. I want to mention that the same exact code (minus the renaming of certain props) works fine with react navigation v5.

If I need to provide a repository please let me know and I will direct message you on twitter or where you'd like hopefully. Since the repository is not public and the APIs need to be live for content to show.


```
const iosTransitionSpec = {
animation: 'spring',
config: {
stiffness: 1000,
damping: 1000,
mass: Platform.OS === 'android' ? 3 : 1.9,
overshootClamping: true,
restDisplacementThreshold: 10,
restSpeedThreshold: 10,
},
}

const cardStyleInterpolatorFunc = ({ current }) => {
return {
cardStyle: {
opacity: current.progress,
},
}
}

const gestureResponseVertical = 1000

const gestureResponseHorizontal = Platform.OS === 'android' ? 50 : 1000

const gestureDirectionVertical = 'vertical'
const gestureDirectionHorizontal = 'horizontal'

const FeedSEStack = createSharedElementStackNavigator({
name: 'FeedSEStack',
debug: true,
})
const FeedSharedElementStack = ({ navigation, route }) => {
const platformAnimation = useMemo(
() => (Platform.OS === 'android' ? 'fade-out' : 'move'),
[]
)

return (


({
animationEnabled: false,
})}
/>
({
gestureEnabled: false,
cardStyle: {
backgroundColor: 'transparent',
},
cardStyleInterpolator: cardStyleInterpolatorFunc,
presentation: 'transparentModal',
transitionSpec: {
open: iosTransitionSpec,
close: iosTransitionSpec,
},
})}
sharedElements={(route) => {
const { galleryID, galName } = route.params

return [
{
id: galleryID,
animation:
Platform.OS === 'android' ? 'fade-out' : 'move',
resize: 'auto',
align: 'auto',
},
]
}}
/>
({
gestureEnabled: false,
useNativeDriver: true,
cardStyle: {
backgroundColor: 'transparent',
},
cardStyleInterpolator: cardStyleInterpolatorFunc,
presentation: 'transparentModal',
transitionSpec: {
open: iosTransitionSpec,
close: iosTransitionSpec,
},
})}
sharedElements={(route) => {
const { galleryID, galName } = route.params
return [
{
id: [galleryID],
animation: platformAnimation,
resize: 'auto',
align: 'auto',
},
{
id: [galleryID + galName],
animation: 'fade',
resize: 'clip',
align: 'auto',
},
]
}}
/>
({
gestureResponseDistance: gestureResponseVertical,
gestureDirection: gestureDirectionVertical,
presentation: 'transparentModal',
transitionSpec: {
open: iosTransitionSpec,
close: iosTransitionSpec,
},
})}
sharedElements={(route) => {
const { picID } = route.params
return [
{
id: Platform.OS === 'android' ? picID : picID,
animation:
Platform.OS === 'android' ? 'fade-out' : 'move',
resize: 'auto',
},
]
}}
/>

{
const animatePlease = navigation.name === 'ProfileScreen'
return [
{
id: animatePlease ? '1' : null,
animation:
Platform.OS === 'android' ? 'fade-out' : null,
resize: 'auto',
},
]
}}
/>

{/* ALL HORIZONTAL SCREENS BELLOW */}

{/* */}

{/* ALL EDIT SCREENS BELLOW */}

)
}

```

Start with the FeedSEStack configuration and the sharedElements callbacks shown in the issue, comparing the iOS and Android transition settings after the React Navigation v6 update. Reproduce the back-navigation glitch on iOS using the linked GIF and verify that the shared-element close animation matches the v5 behavior; a complete fix needs a reproducible project or more project details.

Written by the indexing model from the issue text.