Flickering just before screen transition (only Android)

[onigiri-w2]

I tried a simple screen transition using this library. As a result, on Android emulator, flickering occurred just before the screen transition. Even with the same code, no flickering occurs on iOS emulator.

https://github.com/IjzerenHein/react-navigation-shared-element/assets/94182619/33985d4e-a28c-4794-a348-9aefc5b8ebce

https://github.com/IjzerenHein/react-navigation-shared-element/assets/94182619/b3640bd0-00ca-459f-bec8-e5f0e25a12ca

Environment:

• "react": "18.2.0"
• "react-native": "0.72.6
• "@react-navigation/native": "^6.1.9"
• "react-navigation-shared-element": "^3.1.2"
• "react-native-screens": "^3.26.0"
• "react-native-safe-area-context": "3.3.2"

Code:

import React from 'react';
import {Image, StyleSheet, Pressable} from 'react-native';
import {
  NavigationContainer,
  NavigationProp,
  useFocusEffect,
} from '@react-navigation/native';
import {
  createSharedElementStackNavigator,
  SharedElement,
} from 'react-navigation-shared-element';

type StackParamList = {
  List: undefined;
  Detail: undefined;
};
const Stack = createSharedElementStackNavigator<StackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="List">
        <Stack.Screen name="List" component={ListScreen} />
        <Stack.Screen
          name="Detail"
          component={DetailScreen}
          sharedElements={() => ['image']}
          options={{
            transitionSpec: {
              open: {animation: 'timing', config: {duration: 1000}},
              close: {animation: 'timing', config: {duration: 200}},
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const ListScreen = ({
  navigation,
}: {
  navigation: NavigationProp<StackParamList>;
}) => {
  const [opacity, setOpacity] = React.useState(1);
  const handlePress = () => {
    setTimeout(() => {
      setOpacity(0);
    }, 200);
    navigation.navigate('Detail');
  };

  useFocusEffect(() => {
    setOpacity(1);
  });

  return (
    <Pressable onPress={handlePress}>
      <SharedElement id="image">
        <Image
          source={require('./assets/sampleImg.jpeg')}
          style={[styles.listImg, {opacity}]}
        />
      </SharedElement>
    </Pressable>
  );
};

const DetailScreen = () => {
  return (
    <SharedElement id="image">
      <Image
        source={require('./assets/sampleImg.jpeg')}
        style={styles.detailImg}
      />
    </SharedElement>
  );
};

const styles = StyleSheet.create({
  listImg: {
    width: 200,
    height: 300,
    resizeMode: 'contain',
  },
  detailImg: {
    width: 400,
    height: 600,
    resizeMode: 'contain',
  },
});

[benjamineruvieru]

Same problem here

[Muhammad-Ahmad8]

Facing the same issue. Can anyone help?