IOS - react navigation V5 and V6

[lucasvieceli]

I have problems on IOS

video react-navigation V5: https://drive.google.com/file/d/1gijykz-Gb5-NXj7Mq0tcvIWmCWjk9YJt/view?usp=sharing video react-navigation V6: https://drive.google.com/file/d/1u8IkT26xgUaAUtIs7wYxgP9ZEgAVfBly/view?usp=sharing

component:

Product.sharedElements = (route, otherRoute, showing) => {
    const { randomId, imageUrl, name } = route.params as ProductParams;
    const animations: any = [
        {
            id: `cartbar`,
            animation: 'fade',
            resize: 'clip'
        }
    ];

    if (imageUrl !== undefined) {
        animations.push({
            id: `item.${randomId}.image`,
            animation: 'move',
            resize: 'clip',
            align: 'center'
        });
    }
    if (name) {
        animations.push({
            id: `item.${randomId}.name`,
            animation: 'fade'
            // resize: 'clip'
        });
    }
    return animations;
};
export default Product;

screenOptions:

 cardStyleInterpolator: ({ current: { progress } }) => {
        const opacity = progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1],
            extrapolate: 'clamp'
        });
        return { cardStyle: { opacity } };
    },
    gestureEnabled: false,
    cardStyle: {
        backgroundColor: 'transparent'
    },
    animationEnabled: true,
    transitionSpec: {
        open: {
            animation: 'timing',
            config: {
                duration: 350
            }
        },
        close: {
            animation: 'timing',
            config: {
                duration: 350
            }
        }
    }

device: ios react-navigation-shared-element: V3.1.2 expo: managed V42 react-native-navigation: V5 and V6 react-native: SDK42 iphone: XR ios: 14.7.1

[IjzerenHein]

Hi! Please describe the problem, as well as what you are expecting to see. And are you running this on Expo Go? Expo Go SDK 42 supports react-native-shared-element@7.0.0 and misses the fixes from later releases: https://github.com/IjzerenHein/react-native-shared-element/releases/tag/v0.8.2

[lucasvieceli]

today I am using react-navigation-shared-element@5.0.0-alpha1, it is working perfectly.

But in version 3.1.2, when I click on the product card, the image jumps, this is only happening in ios

I'm using the expo go to view

I updated react-native-shared-element to 0.8.2 it still gets this problem

[chrisellis-bcgdv]

I had a similar issue with React Navigation 6/ios/Expo 42.
Adding detachInactiveScreens={false} to the navigator that contains the list fixed it.

[IjzerenHein]

I had a similar issue with React Navigation 6/ios/Expo 42. Adding detachInactiveScreens={false} to the navigator that contains the list fixed it.

Right, this could make sense. When using Expo 42, you're also using react-native-shared-element@0.7.0 which does not contain some important fixes. Updating your dependencies to react-native-shared-element@0.8.2 wouldn't make any difference, as Expo Go is shipped with the native code from react-native-shared-element@0.7.0.

Adding detachInactiveScreens={false} might just be the solution. By default this is enabled on iOS and disabled only on Android. But apparently this causes problems on iOS as well with older versions of the native code. @lucasvieceli let me know whether that fixes the problem for you. I'll include it in the README as this might be something others can run into as well.

[lucasvieceli]

expo go/ios/react-navigation v6 without property detachInactiveScreens={false}

expo go/ios/react-navigation v6 with property detachInactiveScreens={false}

it fixed a part of the problem, but the image still jumps when you enter the product details

I had tested it before with ios build running directly in emulator, without expo go, this problem still occurred

then I'll generate a build of ios to test in the emulator

[lucasvieceli]

I slowed down the animation, to be able to see the problem

[IjzerenHein]

I'm pretty sure this happens because you are using the current Expo Go which is shipped with react-native-shared-element@0.7.0. This is fixed in the native code of react-native-shared-element@0.8.x which will be included in the next Expo Go client (SDK 43).

[nandorojo]

Just at a glance, is it possible this is due to a delayed render of the heart icon? Looking at the last video, it seems like it jolts down once the icon loads.

[IjzerenHein]

I had tested it before with ios build running directly in emulator, without expo go, this problem still occurred

Sorry, hadn't see that you tested it in a custom build and not on Expo Go

This looks like the same problems as when using TransitionPresets.ModalPresentationIOS (see example app test-case ModalIOS13PageSheet). You mentioned that you using a custom cardStyleInterpolator, but the other screenOptions also play a role here. Please share your full screenOptions (or defaultScreenOptions) for the Navigator or Screen.

[David-moonsite]

I slowed down the animation, to be able to see the problem

have the same issue , can you fixed it ?

[frankcalise]

I'm seeing the same repositioning after the transition as well on iOS with Expo SDK 44. Has anyone found a fix to this problem?

EDIT: I think this is related: https://github.com/IjzerenHein/react-navigation-shared-element/issues/187#issuecomment-916945213

Seems to have to do with the SafeAreaView, wrapping the detail screen in a view with the insets padding fixes the last second "jump"