Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Android: super buggy animation / iOS no borderRadius animation

See original GitHub issue

Hi,

using the react-navigation-shared-element to transform an image with borderRadius (using resizeMode cover) to the new screen using resizeMode contain (without borders), I get a super buggy animation on android.

Is flickering, blinking, sizing to fullscreen and back.

Some Facts:

EXPO SDK 36 (your lib is at version 0.5.1, which I can’t upgrade unless Expo releases a new update)
I saw some commits addressing borderRadius issues on iOS? Maybe you did already fix my second issue)
Tested on real device, standalone, with and without debug mode

I mad a simple video as gif. ezgif com-optimize

It’s working nearly perfect on iOS (but the borderRadius animation is not working. Its switching hard)

function springyFadeIn() {
    const transitionSpec = {
        timing: Animated.spring,
        speed: 22,
        bounciness: 1,
        useNativeDriver: true,
    };

    return {
        transitionSpec,
        screenInterpolator: ({position, scene}) => {
            const {index} = scene;

            const opacity = position.interpolate({
                inputRange: [index - 1, index],
                outputRange: [0, 1],
            });

            return {opacity};
        },
    };
}

const userStack = createSharedElementStackNavigator(
    createStackNavigator, {
        User: {screen: User},
        UserImage: {screen: UserImage},
    },
    {
        ...StackNavigatorOptions,
        transitionConfig: () => springyFadeIn(),
    },
);

My Image Screen Component

import * as React from 'react';
import {View, StyleSheet, Text, Image} from 'react-native';
import {SharedElement} from 'react-navigation-shared-element';
import {Body, Button, Container, Header, Icon, Left, Right, Spinner, Title} from "native-base";

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        backgroundColor: "transparent"
    },
    image: {
        width: '100%',
        height: '100%',
        borderRadius: 0
    },
});

const UserImage = ({navigation}) => {
    const { image } = navigation.state.params;
    console.log(image);

    return (
        <Container>
            <Header
                style={{color: "#ffffff", backgroundColor: "#b7cc23"}}
                iosBarStyle="light-content"
                transparent
                androidStatusBarColor="#b7cc23"
            >
                <Left>
                    <Button transparent onPress={() => navigation.pop()}>
                        <Icon style={{color: "white"}} name='arrow-back'/>
                    </Button>
                </Left>
                <Body style={{flex: 3}}><Title>Text</Title></Body>
                <Right />
            </Header>
            <View style={styles.container}>
                <SharedElement id="image" style={StyleSheet.absoluteFill}>
                    <Image
                        style={styles.image}
                        resizeMode="contain"
                        source={{ uri: image}}
                    />
                </SharedElement>
            </View>
        </Container>
    );
};


// Add the `sharedElements` function to the component, which
// should return a list of shared-elements to transition.
// The `sharedElements` function is called whenever you navigate
// to or from this screen. You can use the provided navigation
// states or trigger or disable animations.
UserImage.sharedElements = (navigation, otherNavigation, showing) => [
    {id: 'image', resize: "clip"},
];

export default UserImage;

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:5 (2 by maintainers)

Top GitHub Comments

4reactions

IjzerenHeincommented, Jan 7, 2020

Hi! The original Android problem that you mentioned is certainly a strange one. It almost seems like that due to the settings, that native-driver is not used. I’m glad you were able to find a solution for that though.

As for the fixes to Android and iOS. There have indeed been several fixes addressing issues with border-radius, borders, FastImage, ImageBackground with the newer RN60+ releases. Some fundamental things were changed on how images & borders were rendered and that broken the image-resolve in certain cases. Android already received some love in that area and I only just fixed the issues on iOS (v0.5.4). Neither of the Android nor iOS fixes have landed in Expo SDK 36 though. I’ll make sure they land in Expo 37 though!

0reactions

IjzerenHeincommented, Jan 8, 2020

Well the best way forward would to create a test that showcases the problem. If you could help create the test then I can take a closer look at it on Android. The test can be added to the ./Example app in the repo. You might need to extend the test-framework so that you can pass in a custom transition/timing function on a per test basis though.