Shared Element Transition on the New Architecture (feature flag)

.yarn/patches/react-native-screens-npm-4.17.1-25d7ca5c4d.patch

@@ -0,0 +1,54 @@
+diff --git a/ios/RNSScreen.h b/ios/RNSScreen.h
+index 6b0c87abb74c9c70d39813b71b989a889c92408f..c0bbf0d08adc91333f6fcab82daf4eb6be8a9954 100644
+--- a/ios/RNSScreen.h
++++ b/ios/RNSScreen.h
+@@ -53,7 +53,7 @@ namespace react = facebook::react;
+ - (void)notifyFinishTransitioning;
+ - (RNSScreenView *)screenView;
+ #ifdef RCT_NEW_ARCH_ENABLED
+-- (void)setViewToSnapshot;
++- (void)setViewToSnapshotAfterUpdates:(BOOL)afterUpdates;
+ - (CGFloat)calculateHeaderHeightIsModal:(BOOL)isModal;
+ #endif
+
+@@ -130,6 +130,7 @@ namespace react = facebook::react;
+ @property (nonatomic, readonly) BOOL hasHeaderConfig;
+ @property (nonatomic, readonly, getter=isMarkedForUnmountInCurrentTransaction)
+     BOOL markedForUnmountInCurrentTransaction;
++@property (nonatomic) BOOL snapshotAfterUpdates;
+ #else
+ @property (nonatomic, copy) RCTDirectEventBlock onAppear;
+ @property (nonatomic, copy) RCTDirectEventBlock onDisappear;
+diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
+index 65c18f1ddccc64b3169e050e577eab77fd8c183b..e8779d92d400e614e850ccc0627510a8b85cb5dc 100644
+--- a/ios/RNSScreen.mm
++++ b/ios/RNSScreen.mm
+@@ -2139,12 +2139,12 @@ Class<RCTComponentViewProtocol> RNSScreenCls(void)
+ #ifdef RCT_NEW_ARCH_ENABLED
+ #pragma mark - Fabric specific
+
+-- (void)setViewToSnapshot
++- (void)setViewToSnapshotAfterUpdates:(BOOL)afterUpdates
+ {
+   UIView *superView = self.view.superview;
+   // if we dismissed the view natively, it will already be detached from view hierarchy
+   if (self.view.window != nil) {
+-    UIView *snapshot = [self.view snapshotViewAfterScreenUpdates:NO];
++    UIView *snapshot = [self.view snapshotViewAfterScreenUpdates:afterUpdates];
+     snapshot.frame = self.view.frame;
+     [self.view removeFromSuperview];
+     self.view = snapshot;
+diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
+index 51f021831aed26a4eed3c85014020423b7b3108b..db0e68204ad8579822fabc5969c594e44c67c4ed 100644
+--- a/ios/RNSScreenStack.mm
++++ b/ios/RNSScreenStack.mm
+@@ -1393,7 +1393,8 @@ RNS_IGNORE_SUPER_CALL_END
+ - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+ {
+   RNSScreenView *screenChildComponent = (RNSScreenView *)childComponentView;
+-  [screenChildComponent.controller setViewToSnapshot];
++  BOOL afterUpdates = screenChildComponent.snapshotAfterUpdates;
++  [screenChildComponent.controller setViewToSnapshotAfterUpdates:afterUpdates];
+
+   RCTAssert(
+       screenChildComponent.reactSuperview == self,

apps/common-app/package.json

@@ -38,7 +38,7 @@
     "react-native-pager-view": "7.0.0",
     "react-native-reanimated": "workspace:*",
     "react-native-safe-area-context": "5.6.1",
-    "react-native-screens": "4.16.0",
+    "react-native-screens": "patch:react-native-screens@npm%3A4.17.1#~/.yarn/patches/react-native-screens-npm-4.17.1-25d7ca5c4d.patch",
     "react-native-svg": "15.14.0",
     "react-native-worklets": "workspace:*",
     "react-strict-dom": "0.0.54"

apps/common-app/src/apps/reanimated/App.tsx

@@ -46,6 +46,7 @@ function findExamples(search: string) {
 function HomeScreen({ navigation }: HomeScreenProps) {
   const [search, setSearch] = React.useState('');
   const [wasClicked, setWasClicked] = React.useState<string[]>([]);
+  const platform = Platform.OS as 'ios' | 'android';
 
   React.useLayoutEffect(() => {
     navigation.setOptions({
@@ -78,6 +79,7 @@ function HomeScreen({ navigation }: HomeScreenProps) {
               setTimeout(() => setWasClicked([...wasClicked, name]), 500);
             }
           }}
+          shouldWork={EXAMPLES[name].shouldWork?.[platform]}
           disabled={EXAMPLES[name].disabledPlatforms?.includes(Platform.OS)}
           wasClicked={wasClicked.includes(name)}
         />
@@ -95,9 +97,17 @@ interface ItemProps {
   disabled?: boolean;
   onPress: () => void;
   wasClicked?: boolean;
+  shouldWork?: boolean;
 }
 
-function Item({ icon, title, onPress, disabled, wasClicked }: ItemProps) {
+function Item({
+  icon,
+  title,
+  onPress,
+  disabled,
+  wasClicked,
+  shouldWork,
+}: ItemProps) {
   const Button = IS_MACOS ? Pressable : RectButton;
   return (
     <Button
@@ -110,6 +120,9 @@ function Item({ icon, title, onPress, disabled, wasClicked }: ItemProps) {
       enabled={!disabled}>
       {icon && <Text style={styles.title}>{icon + '  '}</Text>}
       <Text style={styles.title}>{title}</Text>
+      {shouldWork !== undefined && (
+        <Text style={styles.marker}>{shouldWork ? '✅' : '❌'}</Text>
+      )}
     </Button>
   );
 }
@@ -190,6 +203,12 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: 'black',
   },
+  marker: {
+    fontSize: 20,
+    color: 'black',
+    alignSelf: 'flex-end',
+    marginLeft: 'auto',
+  },
   visitedItem: {
     backgroundColor: '#e6f0f7',
   },

apps/common-app/src/apps/reanimated/examples/SharedElementTransitions/BorderRadii.tsx

@@ -0,0 +1,105 @@
+import type { ParamListBase } from '@react-navigation/native';
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import * as React from 'react';
+import { Button, StyleSheet, View } from 'react-native';
+import Animated, { SharedTransition } from 'react-native-reanimated';
+import photo from './assets/image.jpg';
+
+const Stack = createNativeStackNavigator();
+
+const transition = undefined;
+
+// SharedTransition.duration(1000).defaultTransitionType(
+//   SharedTransitionType.ANIMATION
+// );
+
+function Screen1({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  return (
+    <View style={styles.flexOne}>
+      <Button
+        onPress={() => navigation.navigate('Screen2')}
+        title="go to screen2"
+      />
+
+      <Animated.View
+        style={styles.greenBoxScreenOne}
+        sharedTransitionTag="tag"
+        sharedTransitionStyle={transition}>
+        <Animated.Image
+          style={styles.imageOne}
+          sharedTransitionTag="image"
+          sharedTransitionStyle={transition}
+          source={photo}
+        />
+      </Animated.View>
+    </View>
+  );
+}
+
+function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  return (
+    <View style={styles.flexOne}>
+      <Button title="go back" onPress={() => navigation.popTo('Screen1')} />
+      <Animated.View
+        style={styles.greenBoxScreenTwo}
+        sharedTransitionTag="tag"
+        sharedTransitionStyle={transition}>
+        <Animated.Image
+          style={styles.imageTwo}
+          sharedTransitionTag="image"
+          sharedTransitionStyle={transition}
+          source={photo}
+        />
+      </Animated.View>
+    </View>
+  );
+}
+
+export default function CustomTransitionExample() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Screen1"
+        component={Screen1}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="Screen2"
+        component={Screen2}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  flexOne: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' },
+  greenBoxScreenOne: {
+    width: 300,
+    height: 150,
+    borderTopLeftRadius: 25,
+    borderTopRightRadius: 25,
+    backgroundColor: 'pink',
+  },
+  greenBoxScreenTwo: {
+    width: 350,
+    height: 500,
+    marginBottom: 100,
+    borderRadius: 50,
+    backgroundColor: 'pink',
+  },
+  imageOne: {
+    margin: 10,
+    width: 280,
+    height: 140,
+    borderTopLeftRadius: 15,
+    borderTopRightRadius: 15,
+  },
+  imageTwo: {
+    margin: 10,
+    width: 330,
+    height: 200,
+    borderRadius: 40,
+  },
+});

apps/common-app/src/apps/reanimated/examples/SharedElementTransitions/Card.tsx

@@ -0,0 +1,156 @@
+import type {
+  NativeStackNavigationProp,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import * as React from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  TouchableNativeFeedback,
+  View,
+} from 'react-native';
+import Animated from 'react-native-reanimated';
+import photo from './assets/image.jpg';
+
+type ParamList = {
+  Screen1?: object;
+  Screen2: {
+    title: string;
+    sharedTransitionTag: string;
+  };
+};
+
+const Stack = createNativeStackNavigator<ParamList>();
+
+interface CardProps {
+  navigation: NativeStackNavigationProp<ParamList>;
+  title: string;
+  transitionTag: string;
+  isOpen?: boolean;
+  nextScreen: keyof ParamList;
+}
+
+function Card({
+  navigation,
+  title,
+  transitionTag,
+  isOpen = false,
+  nextScreen,
+}: CardProps) {
+  const goNext = (screenName: keyof ParamList) => {
+    navigation.navigate(screenName, {
+      title,
+      sharedTransitionTag: transitionTag,
+    });
+  };
+
+  return (
+    <Pressable
+      onPress={() => {
+        goNext(nextScreen);
+      }}>
+      <Animated.View
+        style={isOpen ? styles.open : styles.closed}
+        sharedTransitionTag={transitionTag + '1'}>
+        <Animated.Text
+          sharedTransitionTag={transitionTag + '2'}
+          style={styles.text}>
+          {title}
+        </Animated.Text>
+        <Animated.Image
+          sharedTransitionTag={transitionTag + '3'}
+          source={photo}
+          style={[styles.fullWidth, { height: isOpen ? 300 : 100 }]}
+        />
+        <Animated.Text
+          sharedTransitionTag={transitionTag + '4'}
+          style={[styles.fullWidth, { height: isOpen ? 100 : 0 }]}>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aliquid,
+          earum non, dignissimos fugit rerum exercitationem ab consequatur,
+          error animi veritatis delectus. Nostrum sapiente distinctio possimus
+          vel nam facilis ut?
+        </Animated.Text>
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+function Screen1({ navigation }: NativeStackScreenProps<ParamList, 'Screen1'>) {
+  return (
+    <Animated.ScrollView style={styles.flexOne}>
+      {[...Array(6)].map((_, i) => (
+        <Card
+          key={i}
+          navigation={navigation}
+          title={'Title' + i}
+          transitionTag={'tag' + i}
+          nextScreen="Screen2"
+        />
+      ))}
+    </Animated.ScrollView>
+  );
+}
+
+function Screen2({
+  route,
+  navigation,
+}: NativeStackScreenProps<ParamList, 'Screen2'>) {
+  const { title, sharedTransitionTag } = route.params;
+
+  return (
+    <View style={styles.flexOne}>
+      <Card
+        navigation={navigation}
+        title={title}
+        transitionTag={sharedTransitionTag}
+        isOpen={true}
+        nextScreen="Screen1"
+      />
+    </View>
+  );
+}
+
+export default function CardExample() {
+  return (
+    <Stack.Navigator
+      screenOptions={
+        {
+          // animation: 'none',
+        }
+      }>
+      <Stack.Screen
+        name="Screen1"
+        component={Screen1}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="Screen2"
+        component={Screen2}
+        options={{ headerShown: true }}
+      />
+    </Stack.Navigator>
+  );
+}
+const styles = StyleSheet.create({
+  flexOne: {
+    flex: 1,
+  },
+  open: {
+    height: 500,
+    marginTop: 50,
+    backgroundColor: 'green',
+  },
+  closed: {
+    height: 120,
+    marginTop: 20,
+    backgroundColor: 'green',
+  },
+  text: {
+    width: '100%',
+    height: 20,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+});