Visual glitch when popping

[kyle-ssg]

Was curious to try and use this, given the example it seems that although the push is fine, the pop seems to keep route 2 on top.

Code:

function Scene1() {
    return (
        <View style={{ flex: 1, backgroundColor:'grey', justifyContent: 'center' }}>
            <Link to="/home/status/privacy">
                <SharedElement id="image">
                    <Image
                        source={{ uri:'https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg' }}
                        style={{ resizeMode:"contain", height: 100 }}
                    />
                    <Text>Route 1</Text>
                </SharedElement>
            </Link>
        </View>
    );
}

function Scene2() {
    return (
        <View style={{ flex: 1, backgroundColor:'white' }}>
            <Link to={-1}>
                <SharedElement id="image">
                    <Image
                        source={{ uri:'https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg' }}
                        style={{ resizeMode:"contain", height: 200 }}
                    />
                    <Text>Route 2</Text>
                </SharedElement>
            </Link>
        </View>
    );
}

Results:

[ajsmth]

I'm not sure I follow the issue, but I would hazard a guess that you'll want to wrap any content thats not a shared element in a view that interpolates with the animation, for example moving or fading out. The screen itself has to stay mounted until the animation is completed, although its probably not very clear in the docs. Have you tried the useInterpolation utility exported from this lib? I can find an example for you

Also if I totally missed the point please let me know!

[kyle-ssg]

The main issue is that going from route 2 to route 1 keeps route 2 on top, I guess using this you'd always have to anticipate that the user could be popping the route stack. This means the example in the readme only happens to be suitable since there's no other content in the scene.

Interpolating makes sense, I guess you'd want to pretty much always interpolate routes with shared element transitions in order to future proof.

[ajsmth]

I think I see what you mean - if route 2 is staying on top even after the animation is complete than this is definitely a bug. It should only stay there until the transition is complete

[kyle-ssg]

Yeah that's correct, that seems to be exactly what's happening. Replicable with above code.