Layout Animations for the New Architecture

apps/common-app/src/examples/LayoutAnimations/BBExample.tsx

@@ -0,0 +1,71 @@
+import { Button, StyleSheet, View } from 'react-native';
+import Animated, {
+  BounceIn,
+  FadeInRight,
+  FadeInUp,
+  FadeOutLeft,
+  LinearTransition,
+  RotateOutDownLeft,
+} from 'react-native-reanimated';
+import React, { useState } from 'react';
+
+export default function BBExample() {
+  const [show, setShow] = useState(true);
+  const [show2, setShow2] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <Button title="toggle" onPress={() => setShow(!show)} />
+      <Button title="toggle" onPress={() => setShow2(!show2)} />
+      {show && (
+        <Animated.View
+          onTouchStart={() => setShow(!show)}
+          entering={BounceIn}
+          layout={LinearTransition}
+          style={styles.box}
+          exiting={FadeOutLeft.duration(1000)}>
+          <Animated.View
+            style={styles.innerBox}
+            exiting={RotateOutDownLeft.duration(2000)}
+            entering={FadeInRight.delay(500)}
+          />
+        </Animated.View>
+      )}
+      {show2 && (
+        <Animated.View
+          entering={FadeInUp}
+          layout={LinearTransition.duration(2000)}
+          exiting={RotateOutDownLeft}
+          style={[styles.refresher, { width: show ? 200 : 100 }]}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    marginTop: 200,
+    backgroundColor: 'pink',
+  },
+  box: {
+    marginTop: 10,
+    width: 200,
+    height: 100,
+    backgroundColor: 'tomato',
+  },
+  innerBox: {
+    marginTop: 10,
+    width: 100,
+    height: 50,
+    backgroundColor: 'green',
+  },
+  refresher: {
+    marginTop: 10,
+    width: 100,
+    height: 100,
+    backgroundColor: 'blue',
+  },
+});

apps/common-app/src/examples/LayoutAnimations/DefaultAnimations.tsx

@@ -104,9 +104,12 @@ const AnimatedBlock = ({
     <View style={styles.animatedBox}>
       {show ? (
         <TouchableWithoutFeedback onPress={() => setShow(!show)}>
-          <Animated.View style={styles.animatedBlock} {...animatedStyle}>
-            <Text style={styles.animatedText}>{name}</Text>
-          </Animated.View>
+          {/* Workaround for TouchableWithoutFeedback overwriting the nativeID */}
+          <View>
+            <Animated.View style={styles.animatedBlock} {...animatedStyle}>
+              <Text style={styles.animatedText}>{name}</Text>
+            </Animated.View>
+          </View>
         </TouchableWithoutFeedback>
       ) : null}
       {!show ? (

apps/common-app/src/examples/index.ts

@@ -121,6 +121,7 @@ import WithClampExample from './WithClampExample';
 import WorkletFactoryCrash from './WorkletFactoryCrashExample';
 import RuntimeTestsExample from './RuntimeTests/RuntimeTestsExample';
 import HabitsExample from './LayoutAnimations/HabitsExample';
+import BBExample from './LayoutAnimations/BBExample';
 import MemoExample from './MemoExample';
 import PerformanceMonitorExample from './PerfomanceMonitorExample';
 import ScreenTransitionExample from './ScreenTransitionExample';
@@ -502,7 +503,6 @@ export const EXAMPLES: Record<string, Example> = {
     icon: '🧑‍💻',
     title: 'Habits',
     screen: HabitsExample,
-    missingOnFabric: true,
   },
   PerformanceMonitorExample: {
     icon: '⏱️',
@@ -524,6 +524,11 @@ export const EXAMPLES: Record<string, Example> = {
     title: 'Composed handler internal merging',
     screen: ComposedHandlerInternalMergingExample,
   },
+  BBExample: {
+    icon: '💀',
+    title: 'BB',
+    screen: BBExample,
+  },
 
   // Old examples
 
@@ -598,127 +603,102 @@ export const EXAMPLES: Record<string, Example> = {
   DeleteAncestorOfExiting: {
     title: '[LA] Deleting view with an exiting animation',
     screen: DeleteAncestorOfExiting,
-    missingOnFabric: true,
   },
   NestedNativeStacksWithLayout: {
     title: '[LA] Nested NativeStacks with layout',
     screen: NestedNativeStacksWithLayout,
-    missingOnFabric: true,
   },
   BasicLayoutAnimation: {
     title: '[LA] Basic layout animation',
     screen: BasicLayoutAnimation,
-    missingOnFabric: true,
   },
   BasicNestedAnimation: {
     title: '[LA] Basic nested animation',
     screen: BasicNestedAnimation,
-    missingOnFabric: true,
   },
   BasicNestedLayoutAnimation: {
     title: '[LA] Basic nested layout animation',
     screen: BasicNestedLayoutAnimation,
-    missingOnFabric: true,
   },
   NestedLayoutAnimations: {
     title: '[LA] Nested layout animations',
     screen: NestedTest,
-    missingOnFabric: true,
   },
   CombinedLayoutAnimations: {
     title: '[LA] Entering and Exiting with Layout',
     screen: CombinedTest,
-    missingOnFabric: true,
   },
   DefaultAnimations: {
     title: '[LA] Default layout animations',
     screen: DefaultAnimations,
-    missingOnFabric: true,
   },
   DefaultTransitions: {
     title: '[LA] Default layout transitions',
     screen: WaterfallGridExample,
-    missingOnFabric: true,
   },
   KeyframeAnimation: {
     title: '[LA] Keyframe animation',
     screen: KeyframeAnimation,
-    missingOnFabric: true,
   },
   ParticipantList: {
     title: '[LA] Participant List',
     screen: AnimatedListExample,
-    missingOnFabric: true,
   },
   OlympicAnimation: {
     title: '[LA] Olympic animation',
     screen: OlympicAnimation,
-    missingOnFabric: true,
   },
   CustomLayoutAnimation: {
     title: '[LA] Custom layout animation',
     screen: CustomLayoutAnimationScreen,
-    missingOnFabric: true,
   },
   ModalNewAPI: {
     title: '[LA] ModalNewAPI',
     screen: ModalNewAPI,
-    missingOnFabric: true,
   },
   SpringLayoutAnimation: {
     title: '[LA] Spring Layout Animation',
     screen: SpringLayoutAnimation,
-    missingOnFabric: true,
   },
   MountingUnmounting: {
     title: '[LA] Mounting Unmounting',
     screen: MountingUnmounting,
-    missingOnFabric: true,
   },
   ReactionsCounterExample: {
     title: '[LA] Reactions counter',
     screen: ReactionsCounterExample,
-    missingOnFabric: true,
   },
   SwipeableList: {
     title: '[LA] Swipeable list',
     screen: SwipeableList,
-    missingOnFabric: true,
   },
   Modal: {
     title: '[LA] Modal',
     screen: Modal,
-    missingOnFabric: true,
   },
   NativeModals: {
     title: '[LA] Native modals (RN and Screens)',
     screen: NativeModals,
-    missingOnFabric: true,
   },
   Carousel: {
     title: '[LA] Carousel',
     screen: Carousel,
-    missingOnFabric: true,
   },
   ReducedMotionLayoutExample: {
     title: '[LA] Reduced Motion',
     screen: ReducedMotionLayoutExample,
-    missingOnFabric: true,
   },
   NestedLayoutAnimationConfig: {
     title: '[LA] Nested LayoutAnimationConfig',
     screen: NestedLayoutAnimationConfig,
-    missingOnFabric: true,
   },
   FlatListSkipEnteringExiting: {
     title: '[LA] FlatList skip entering & exiting',
     screen: FlatListSkipEnteringExiting,
-    missingOnFabric: true,
   },
   ChangeTheme: {
     title: '[LA] Change theme',
     screen: ChangeThemeExample,
-    missingOnFabric: true,
   },
 
   // Shared Element Transitions

packages/docs-reanimated/docs/layout-animations/entering-exiting-animations.mdx

@@ -11,6 +11,9 @@ Reanimated comes with a bunch of predefined animations you can customize. For mo
 ## Remarks
 
 - We recommend using layout animation builders outside of components or with `useMemo` to ensure the best performance.
+- On the New Architecture:
+  - `nativeID` is used internally to configure entering animations, so overwriting it will result in entering animations not running. Some components (e.g. TouchableWithoutFeedback) overwrite `nativeID` of its children. To work around this issue wrap your animated children with a `View`.
+  - removing a non-animated view will trigger exiting animations in its children, but the non-animated view will not wait for the children's animations to finish. This is due to view flattening and can be mitigated by using `collapsable={false}`.
 
 ## Fade
 

packages/react-native-reanimated/Common/cpp/LayoutAnimations/LayoutAnimationsManager.cpp

@@ -20,6 +20,12 @@ void LayoutAnimationsManager::configureAnimationBatch(
       clearSharedTransitionConfig(tag);
       sharedTransitionConfigs.push_back(std::move(layoutAnimationConfig));
     } else {
+#ifdef RCT_NEW_ARCH_ENABLED
+      if (type == ENTERING){
+        enteringAnimationsForNativeID_[tag] = config;
+        continue;
+      }
+#endif
       if (config == nullptr) {
         getConfigsForType(type).erase(tag);
       } else {
@@ -159,6 +165,19 @@ int LayoutAnimationsManager::findPrecedingViewTagForTransition(const int tag) {
   return -1;
 }
 
+#ifdef RCT_NEW_ARCH_ENABLED
+void LayoutAnimationsManager::transferConfigFromNativeID(
+    const int nativeId,
+    const int tag) {
+  auto lock = std::unique_lock<std::recursive_mutex>(animationsMutex_);
+  auto config = enteringAnimationsForNativeID_[nativeId];
+  if (config) {
+    enteringAnimations_.insert_or_assign(tag, config);
+  }
+  enteringAnimationsForNativeID_.erase(nativeId);
+}
+#endif
+
 #ifndef NDEBUG
 std::string LayoutAnimationsManager::getScreenSharedTagPairString(
     const int screenTag,

packages/react-native-reanimated/Common/cpp/LayoutAnimations/LayoutAnimationsManager.h

@@ -42,6 +42,9 @@ class LayoutAnimationsManager {
   void clearLayoutAnimationConfig(const int tag);
   void clearSharedTransitionConfig(const int tag);
   void cancelLayoutAnimation(jsi::Runtime &rt, const int tag) const;
+#ifdef RCT_NEW_ARCH_ENABLED
+  void transferConfigFromNativeID(const int nativeId, const int tag);
+#endif
   int findPrecedingViewTagForTransition(const int tag);
 #ifndef NDEBUG
   std::string getScreenSharedTagPairString(
@@ -63,6 +66,9 @@ class LayoutAnimationsManager {
   std::unordered_map<int, std::string> viewsScreenSharedTagMap_;
 #endif
 
+#ifdef RCT_NEW_ARCH_ENABLED
+  std::unordered_map<int, std::shared_ptr<Shareable>> enteringAnimationsForNativeID_;
+#endif
   std::unordered_map<int, std::shared_ptr<Shareable>> enteringAnimations_;
   std::unordered_map<int, std::shared_ptr<Shareable>> exitingAnimations_;
   std::unordered_map<int, std::shared_ptr<Shareable>> layoutAnimations_;