Shared Element Transition with a rgba backgroundColor flicking

[vivianmauer]

Description

shared element transition background flicks when the background contains opacity.

https://github.com/software-mansion/react-native-reanimated/assets/20355171/130fcdc4-bbb3-4c6f-b62a-0f239f41ae15

Steps to reproduce

import * as React from 'react';
import {View, Button} from 'react-native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import Animated from 'react-native-reanimated';

const Stack = createNativeStackNavigator();

function Screen1({navigation}) {
  return (
    <View style={{flex: 1, backgroundColor: 'black'}}>
      <Animated.View
        style={{
          width: 150,
          height: 150,
          backgroundColor: 'rgba(255,255,255,0.5)',
        }}
        sharedTransitionTag="sharedTag"
      />
      <Button title="Screen2" onPress={() => navigation.navigate('Screen2')} />
    </View>
  );
}

function Screen2({navigation}) {
  return (
    <View style={{flex: 1, padding: 100, backgroundColor: 'black'}}>
      <Animated.View
        style={{
          width: 100,
          height: 100,
          backgroundColor: 'rgba(255,255,255,0.5)',
        }}
        sharedTransitionTag="sharedTag"
      />
      <Button title="Screen1" onPress={() => navigation.navigate('Screen1')} />
    </View>
  );
}

export default function SharedElementExample() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: true}}>
        <Stack.Screen name="Screen1" component={Screen1} />
        <Stack.Screen name="Screen2" component={Screen2} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Snack or a link to a repository

https://github.com/vivianmauer/reanimatedSharedTransitionBug

Reanimated version

3.4.2

React Native version

0.72.4

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[piaskowyk]

At this moment, the shared element transition doesn't support color animating 😕 but this is something what I want to add in the future

[vivianmauer]

@piaskowyk Yes I know, but I'm not trying to animate the background color, the color is the same on both screens. Isn't this happening because of a container's background or something?