Underlying card changes colour on transition end

Question

When the user moves from one screen to another the underlying card changes the colour when almost done transitioning. We implemented TransitionPresets.SlideFromRightIOS to make transitions look the same regardless of platform.

Dependencies

"react-native": "0.68.1",
"@react-navigation/elements": "1.3.3",
"@react-navigation/native": "6.0.10",
"@react-navigation/stack": "6.2.1",

Devices on which issue has been noticed

• Android 11+

Navigator options

headerStyle: {
        backgroundColor: Colors.primaryDarkBlue,
        shadowColor: 'transparent',
    },
    headerTitle: HEADER_TITLE[route.name],
    headerTitleContainerStyle: {
        left: 0,
    },
    headerTitleAlign: 'center',
    headerTintColor: Colors.white,
    headerBackTitle: 'Back',
    gestureEnabled: true,
    ...TransitionPresets.SlideFromRightIOS,
}

Code

const DEFAULT_AUTH_OPTIONS: HeaderOptions = ({ route }) => ({
    headerStyle: {
        backgroundColor: Colors.primaryDarkBlue,
        shadowColor: 'transparent',
    },
    headerTitle: HEADER_TITLE[route.name],
    headerTitleContainerStyle: {
        left: 0,
    },
    headerTitleAlign: 'center',
    headerTintColor: Colors.white,
    headerBackTitle: 'Back',
    gestureEnabled: true,
    ...TransitionPresets.SlideFromRightIOS,
});

const DEFAULT_OPTIONS = {
    headerLeft: () => <Logo width={80} height={20} style={{ marginLeft: 16 }} />,
    headerRight: () => {
        return (
            <Pressable
                hitSlop={12}
                onPress={() => {
                    navigate(ROUTE_NAMES.USER_PROFILE_SCREEN);
                }}
                style={{ marginRight: 16 }}
            >
                <Profile color={Colors.white} />
            </Pressable>
        );
    },
};

const USER_PROFILE_OPTIONS = {
    headerLeft: () => (
        <HeaderBackButton tintColor={Colors.white} labelStyle={{ color: Colors.white }} onPress={goBack} />
    ),
};

const Auth = () => {
    const AuthStack = createStackNavigator<AuthStackParamList>();

    return (
        <>
            <StatusBar barStyle={StatusBarStyle.light} backgroundColor={Colors.primaryDarkBlue} />
            <AuthStack.Navigator
                screenOptions={DEFAULT_AUTH_OPTIONS}
                initialRouteName={ROUTE_NAMES.HOME_SCREEN}
            >
                <AuthStack.Group screenOptions={DEFAULT_OPTIONS}>
                    <AuthStack.Screen name={ROUTE_NAMES.HOME_SCREEN} component={HomeScreen} />
                    <AuthStack.Screen name={ROUTE_NAMES.ANOTHER_SCREEN} component={ConnectShieldScreen} />
                </AuthStack.Group>

                <AuthStack.Group screenOptions={USER_PROFILE_OPTIONS}>
                    <AuthStack.Screen
                        name={ROUTE_NAMES.USER_PROFILE_SCREEN}
                        component={UserProfileScreen}
                        options={{
                            headerRight: () => {
                                return (
                                    <Pressable
                                        hitSlop={12}
                                        onPress={() => {
                                            navigate(ROUTE_NAMES.NOTIFICATION_SETTINGS_SCREEN);
                                        }}
                                        style={{ marginRight: 16 }}
                                    >
                                        <Bell width={24} height={24} color={Colors.lightSalmon} />
                                    </Pressable>
                                );
                            },
                        }}
                    />
                    <AuthStack.Screen name={ROUTE_NAMES.NAME_SETTINGS_SCREEN} component={NameSettingsScreen} />
                    <AuthStack.Screen name={ROUTE_NAMES.ANOTHER_SETTINGS_SCREEN} component={AnotherSettingsScreen} />
                    <AuthStack.Screen
                        name={ROUTE_NAMES.NOTIFICATION_SETTINGS_SCREEN}
                        component={NotificationSettingsScreen}
                        options={{ headerTitle: translations.NOTIFICATIONS }}
                    />
                    <AuthStack.Screen name={ROUTE_NAMES.LOGS_SCREEN} component={LogsScreen} />
                </AuthStack.Group>
            </AuthStack.Navigator>
        </>
    );
};