Image is not loads properly when half of it is in screen

I have a FlatList where i list items for a chatscreen. And when I click to images i navigate them to another screen where i show them bigger. For this kind of setup i decided to use react-navigatio-shared-elements.

It's actually working fine when i click to an image when its fully visible in my screen opening and closing transitions working correctly. BUT, when i scroll a little bit and the image which i want to click is a little bit out of the view (i mean half of it visible other half stays behind the other elements like header:..) the opening animation is not working. It's just fading in middle of the screen, not moving from top..... Actually this is happening only an image out of view at the top of the view, if it's half visible at bottom and i click to it, it's working fine. opens and transitions back to it's position.

BTW, im using nested navigators...

const S_Chat = createSharedElementStackNavigator(); const config = () => ({ gestureEnabled: false, transitionSpec: { open: { animation: "timing", config: { duration: 500, easing: Easing.inOut(Easing.ease) }, }, close: { animation: "timing", config: { duration: 500, easing: Easing.inOut(Easing.ease) }, }, },

cardStyleInterpolator: ({ current: { progress } }) => {
    const opacity = progress.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
        extrapolate: "clamp",
    });
    return {
        cardStyle: {
            opacity: opacity,
        },
    };
},

});

const ChatNavigator = ({ navigation, route }) => { return ( <S_Chat.Navigator screenOptions={{ headerShown: false, gestureEnabled: true, cardOverlayEnabled: true,

            // ...TransitionPresets.SlideFromRightIOS,
        }}
        headerMode="none"
        initialRouteName="Chat"
    >
        <S_Chat.Screen
            name="ImageShowcase"
            options={config}
            sharedElementsConfig={(route, otherRoute, showing) => {
                const { data } = route.params;
                return [
                    {
                        id: `item.${data._id}.photo`,
                        animation: "fade",
                        resize: "auto",
                    },
                ];
            }}
            component={ImageShowcase}
        />

`

IjzerenHein / react-navigation-shared-element

Image is not loads properly when half of it is in screen #118