encounter blink effect when navigate screens

[chj-damon]

Thanks for this amazing library to help improve user experience especially after upgrade to the latest version. But I also encountered some trouble when using it on android.

issue 1: when I navigate from ListScreen to DetailScreen, if the image is half on screen, then it will blink. issue 2: when I navigate back from DetailScreen to ListScreen, it will blink and I can clearly see there's a blank area goes from left to right.

here is the reproduce repository: sharedElementExample

thank you very much.

[chj-damon]

https://user-images.githubusercontent.com/4902684/149084186-ab7171c8-82a6-41bd-b90a-dcaae2f573cd.mp4

[chj-damon]

Navigator:

<Navigator initialRouteName="List" screenOptions={commonStackOptions}>
      <Screen name="List" component={ListScreen} options={{ headerShown: false }} />
      <Screen
        name="Detail"
        component={DetailScreen}
        options={{ headerShown: false }}
        sharedElements={route => {
          const { item } = route.params;
          return [`item.${item.id}.photo`];
        }}
      />
    </Navigator>

ListScreen:

export default function ListScreen() {
  const navigation = useNavigation<StackNavigationProp<any>>();

  const renderItem = ({ item }: any) => {
    return (
      <TouchableOpacity activeOpacity={1} onPress={() => navigation.push('Detail', { item })}>
        <SharedElement id={`item.${item.id}.photo`}>
          <Image source={item.image} style={styles.image} />
        </SharedElement>
      </TouchableOpacity>
    );
  };

  return <FlatList style={styles.container} data={items} renderItem={renderItem} keyExtractor={item => item.id} />;
}

DetailScreen:

export default function DetailScreen() {
  const navigation = useNavigation();
  const route = useRoute();
  const { item } = route.params as any;
  return (
    <TouchableOpacity activeOpacity={1} onPress={navigation.goBack}>
      <SharedElement id={`item.${item.id}.photo`}>
        <Image source={item.image} style={styles.image} />
      </SharedElement>
    </TouchableOpacity>
  );
}

[chj-damon]

https://user-images.githubusercontent.com/4902684/149093957-06034fa7-0056-4c33-9bea-469c2e82bbf4.mp4

[chj-damon]

issue 1 does not exist on ios issue 2 still exists on ios

[tharyckgusmao]

Same problem

[pietroanello]

I think that the problem is relative to the position of the element in the prev and next screen, but I don't know why.

I've a working example where if the element in the next screen is positioned lower than the element in the previous screen, then the blink doesn't happen.

Even for me the problem is only on Android.

[dirmich]

try cardStyle: {backgroundColor: 'transparent'}, cardStyleInterpolator: ({current: {progress}}) => ({ gestureEnabled: false, cardStyle: {opacity: progress}, }),

on Stack.Navigator.screenOptions or Stack.Screen.options

[chj-damon]

try cardStyle: {backgroundColor: 'transparent'}, cardStyleInterpolator: ({current: {progress}}) => ({ gestureEnabled: false, cardStyle: {opacity: progress}, }),

on Stack.Navigator.screenOptions or Stack.Screen.options

tried, not working. it still blinks...

[CCPablo]

This is also happening to me, it's kind of frustrating, as it loses all the smoothness.

It would be really nice if someone come up with a solution for this.