Shared Element Transtation not working

[Skipperlla]

Home.tsx

import { FlatList, StyleSheet, View, useWindowDimensions } from 'react-native';
import { Palette, data } from './constants';
import { PressableOpacity } from '@app/components/pressable-opacity';
import { AnimatedImage } from '@app/components/animated-image';
import { PAGES } from '@app/constants';


const HomeScreen = ({
  navigation
}) => {
  const { width: windowWidth } = useWindowDimensions();

  const fullGap = 20;
  const singleGap = fullGap / 3;


  const itemSize = (windowWidth - fullGap) / 3;

  return (
    <View
      style={[
        styles.fillCenter,
        {
          backgroundColor: Palette.background, 
        },
      ]}
    >
      <FlatList
        data={data} 
        numColumns={3} 
        contentContainerStyle={{
          marginLeft: singleGap,
          gap: singleGap, 
          paddingVertical: 12 + singleGap,
        }}
        renderItem={({ item, index }) => {
          return (
            <PressableOpacity
              minOpacity={0.5} 
              style={{
                width: windowWidth / 3, 
              }}
              onPress={() => {
                navigation.navigate(PAGES.EXPANDED_IMAGE, {
                  tag: index.toString(),
                  imageUri: item.url,
                });
              }}
            >
              <AnimatedImage
                source={{
                  uri: item.url, 
                }}
                placeholder={item.blurhash} 
                priority={'high'} 
                recyclingKey={item.url}
                contentFit={'cover'} 
                cachePolicy={'memory-disk'} 
                sharedTransitionTag={index.toString()} 
                style={{
                  height: itemSize,
                  width: itemSize, 
                }}
              />
            </PressableOpacity>
          );
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  fillCenter: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default HomeScreen;

Shared.tsx

import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import { useWindowDimensions, StyleSheet } from 'react-native';
import { useCallback } from 'react';
import Animated, {
  runOnJS,
  useAnimatedStyle,
  useDerivedValue,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { BlurView } from 'expo-blur';

import { AnimatedImage } from '@app/components/animated-image';

const Shared = ({ route, navigation }) => {
  const { tag, imageUri } = route.params;

  const { width: windowWidth, height: windowHeight } = useWindowDimensions();

  const goBack = useCallback(() => {
    navigation.goBack();
  }, [navigation]);

  const offset = useSharedValue({ x: 0, y: 0 });

  const scale = useDerivedValue(() => {
    const y = Math.abs(offset.value.y);
    return Math.max(1 - y / windowHeight, 0.5);
  }, [windowHeight]);

  const translation = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: offset.value.x * 0.3 },
        { translateY: offset.value.y * 0.3 },
        { scale: scale.value },
      ],
    };
  });

  const pan = Gesture.Pan()
    .onChange((e) => {
      offset.value = {
        x: e.changeX + offset.value.x,
        y: e.changeY + offset.value.y,
      };
      if (Math.abs(offset.value.x) > 150 || Math.abs(offset.value.y) > 250) {
        runOnJS(goBack)();
      }
    })
    .onFinalize(() => {
      offset.value = withSpring(
        { x: 0, y: 0 },
        {
          mass: 0.5,
        },
      );
    });

  const imageSize = windowWidth * 0.7;

  return (
    <>
      <BlurView
        intensity={25}
        style={{
          ...StyleSheet.absoluteFillObject,
          backgroundColor: 'rgba(0,0,0,0.7)',
        }}
      />
      <GestureDetector gesture={pan}>
        <Animated.View style={styles.fillCenter}>
          <Animated.View style={translation}>
            <AnimatedImage
              source={{
                uri: imageUri, 
              }}
              priority={'high'} 
              recyclingKey={imageUri}
              cachePolicy={'memory-disk'}
              sharedTransitionTag={tag} 
              style={{
                height: imageSize,
                width: windowWidth * 0.9,
                borderRadius: 25, 
              }}
              contentFit="cover"
            />
          </Animated.View>
        </Animated.View>
      </GestureDetector>
    </>
  );
};

export const styles = StyleSheet.create({
  fillCenter: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Shared;

my react native reanimated version is at 3.14.0 and I'm trying to use shared element transtation but somehow the animation is not activated

[Skipperlla]

Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2024-07-17.at.08.44.59.mp4

[MatiPl01]

Hey!

Could you add link to repo with your source code or provide implementations of imported components and data?

I am missing these:

import { PressableOpacity } from '@app/components/pressable-opacity';
import { AnimatedImage } from '@app/components/animated-image';
import { PAGES } from '@app/constants';

[Skipperlla]

the project is in a private repo so I can't share everything sorry :/

[Skipperlla]

I get everything exactly as in the other examples but I still have the same problem, sometimes I get this problem #4981

[Skipperlla]

PressableOpacity.tsx

import type { PropsWithChildren } from 'react';
import React from 'react';
import { StyleProp, ViewProps, ViewStyle } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  runOnJS,
  useAnimatedStyle,
  useDerivedValue,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

type PressableOpacityProps = PropsWithChildren<{
  onPress?: () => void;
  onLongPress?: () => void;
  minOpacity?: number;
  style?: StyleProp<ViewStyle>;
}> &
  ViewProps;

const PressableOpacity: React.FC<PressableOpacityProps> = ({
  children,
  onPress,
  onLongPress,
  minOpacity = 0.92,
  style,
  ...rest
}) => {
  const active = useSharedValue(false);

  const gesture = Gesture.Tap()
    .maxDuration(4000)
    .onTouchesDown(() => {
      active.value = true;
    })
    .onTouchesUp(() => {
      if (onPress != null) runOnJS(onPress)();
    })
    .onFinalize(() => {
      active.value = false;
    });

  const longPressGesture = Gesture.LongPress().onStart(() => {
    if (onLongPress != null) runOnJS(onLongPress)();
  });

  const opacity = useDerivedValue(() => {
    if (active.value) {
      return minOpacity;
    }
    return withTiming(1);
  }, [minOpacity]);
  const scale = useDerivedValue(() => {
    if (active.value) {
      return 0.95;
    }
    return withTiming(1);
  }, [minOpacity]);

  const rAnimatedStyle = useAnimatedStyle(() => {
    return {
      opacity: withTiming(active.value ? opacity.value : 1),
      transform: [{ scale: withTiming(active.value ? scale.value : 1) }],
    };
  }, [minOpacity]);

  const gestures = Gesture.Exclusive(longPressGesture, gesture);

  return (
    <GestureDetector gesture={gestures}>
      <Animated.View style={[style, rAnimatedStyle]} {...rest}>
        {children}
      </Animated.View>
    </GestureDetector>
  );
};

export default PressableOpacity;

AnimatedImage.tsx

import { Image } from 'expo-image';
import Animated from 'react-native-reanimated';

export const AnimatedImage = Animated.createAnimatedComponent(Image);

PAGES.ts

enum Pages {
  //* Bottom Tab
  HOME = 'Home',
  PROFILE = 'Profile',
  TEMPLATE = 'Template',
  BOTTOM_TAB = 'Bottom_Tab',

  //* Stack Screen's
  PREVIEW = 'Preview',
  ALBUM = 'Album',
  EXPANDED_IMAGE = 'Expanded_Image',
}

export default Pages;

[MatiPl01]

Thanks for providing more details. Could you tell me what settings of your stack navigator do you use? I mean, which type of animation? If you set animation to 'none' you would not see the shared element transition.

Can you also tell me whether you use the new architecture (fabric) or the old one (paper)? Shared element transitions aren't supported on the new architecture yet.

[Skipperlla]

animation: I'm using “fade” and the new architecture is not open but it still doesn't work, I don't think I've done anything extra wrong or added anything missing but it still doesn't work, I created an app from 0 and it worked in it but it doesn't work in the one I've already added

[MatiPl01]

Hey!
Could you please check if this example works for you?
I was able to get it working on my end so I wonder why it doesn't work on your side. Please experiment with this example and tell me if it implements what you want.

Example recording

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-19.at.12.45.46.mp4

[MatiPl01]

The only problem I noticed is the header of the native stack navigator. It causes strange flickering of the animated image.
Currently, the only fix is disabling the header with headerShown: false and writing a custom one.
The fix to this issue will be shipped to the react-native-screens library soon.

[Skipperlla]

@MatiPl01 hi again I created a new Q&A where I installed the repo I use but it doesn't work even there, could you please take a look? what could I have put wrong there? #6500

[MatiPl01]

Hey @Skipperlla!
Have you managed to fix the issue or do you need some more help?

[Skipperlla]

I'm sorry, I was very busy, I just saw your message and it worked without any problems, I think there is a point I missed in my code

[MatiPl01]

Ok, thanks for your response.
I will mark my message as answer. If you still encounter the issue, don't hesitate to ask. I will help you fix your issue.