Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Check cardStyleInterpolator name to allow for custom animation a…
…s well (#11209) We got a custom `cardStyleInterpolator` in our app that actually calls [forModalPresentationIOS](https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx#L93) but we add some own customizations to it. This worked fine in `v5` of react-navigation, and started to act weird after the upgrade to `v6`, the screen under the modal was displayed right until the animation was finished, then the screen under disappeared, which is unintended. This PR just checks for the name instead. Making it do the same as this check: https://github.com/react-navigation/react-navigation/blob/main/packages/stack/src/views/Stack/Card.tsx#L580 and will allow for custom cardStyleInterpolators. This can be reproduced by creating your own cardStyleIntepolator and then call `forModalPresentationIOS`: ```ts import type {StackCardInterpolationProps} from "@react-navigation/stack"; import {CardStyleInterpolators} from "@react-navigation/stack"; export const forModalPresentationIOS = ({ index, current, next, inverted, layouts, insets, ...rest }: StackCardInterpolationProps) => { const defaultAnimations = CardStyleInterpolators.forModalPresentationIOS({ index, current, next, inverted, layouts, insets, ...rest, }); return defaultAnimations }; const ModalStack = createStackNavigator<ModalStackParamList>(); export function ModalNavigator() { return ( <ModalStack.Navigator> <ModalStack.Screen name='Modal' component={() => <View />} options={{ gestureEnabled: true, gestureDirection: "vertical", cardOverlayEnabled: true, cardStyleInterpolator: forModalPresentationIOS }} /> </ModalStack.Navigator> } ```
- Loading branch information