[SET] Tab Navigator support

apps/common-app/package.json

@@ -15,6 +15,7 @@
     "@react-native-community/slider": "*",
     "@react-native-masked-view/masked-view": "*",
     "@react-native-picker/picker": "*",
+    "@react-navigation/bottom-tabs": "*",
     "@react-navigation/native": "*",
     "@react-navigation/native-stack": "*",
     "@react-navigation/stack": "*",
@@ -38,6 +39,7 @@
     "@react-native-community/slider": "^4.5.0",
     "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-native-picker/picker": "^2.5.1",
+    "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@react-navigation/stack": "^6.3.18",

apps/common-app/src/examples/SharedElementTransitions/TabNavigatorExample.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, View, Button, Text } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import type {NativeStackScreenProps} from '@react-navigation/native-stack';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import Animated from 'react-native-reanimated';
+
+function getStyle(index: number) {
+  switch (index) {
+    case 0:
+      return styles.box1;
+    case 1:
+      return styles.box2;
+    default:
+      return styles.box3;
+  }
+}
+
+type ScreenProps = {
+  [key: string]: {
+    id?: number;
+    showButtons?: boolean;
+  };
+};
+function Screen({ navigation, route }: NativeStackScreenProps<ScreenProps>) {
+  const id = route.params?.id ?? 0;
+  const showButtons = !!route.params?.showButtons;
+  return (
+    <View style={styles.container}>
+      <Text>Current id: {id}</Text>
+      {showButtons && id < 2 && (
+        <Button
+          title={`Go next ${id + 1}`}
+          onPress={() => navigation.push('Details', { id: id + 1 })}
+        />
+      )}
+      {showButtons && id > 0 && (
+        <Button
+          onPress={() => navigation.push('Details', { id: id - 1 })}
+          title={`Go next ${id - 1}`}
+        />
+      )}
+      <Animated.View style={getStyle(id)} sharedTransitionTag="test" />
+    </View>
+  );
+};
+
+function createStack() {
+  const Stack = createNativeStackNavigator();
+  return () => (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Details"
+        initialParams={{ showButtons: true }}
+        component={Screen as React.ComponentType}
+      />
+    </Stack.Navigator>
+  );
+};
+
+const Tab = createBottomTabNavigator();
+const StackA = createStack();
+const StackB = createStack();
+
+function TabNavigatorExample() {
+  return (
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen
+        name="A"
+        initialParams={{ id: 0 }}
+        component={Screen as React.ComponentType}
+      />
+      <Tab.Screen
+        name="B"
+        initialParams={{ id: 1 }}
+        component={Screen as React.ComponentType}
+      />
+      <Tab.Screen name="C" component={StackA} />
+      <Tab.Screen name="D" component={StackB} />
+    </Tab.Navigator>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 10,
+  },
+  box1: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'green',
+  },
+  box2: {
+    width: 200,
+    height: 100,
+    backgroundColor: 'blue',
+  },
+  box3: {
+    width: 150,
+    height: 250,
+    backgroundColor: 'red',
+    marginLeft: 50,
+  },
+});
+
+export default TabNavigatorExample;

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

@@ -128,6 +128,7 @@ import ComposedHandlerDifferentEventsExample from './ComposedHandlerDifferentEve
 import ComposedHandlerInternalMergingExample from './ComposedHandlerInternalMergingExample';
 import BorderRadiiExample from './SharedElementTransitions/BorderRadii';
 import FreezingShareablesExample from './ShareableFreezingExample';
+import TabNavigatorExample from './SharedElementTransitions/TabNavigatorExample';
 
 interface Example {
   icon?: string;
@@ -785,13 +786,21 @@ export const EXAMPLES: Record<string, Example> = {
   ChangeThemeSharedExample: {
     title: '[SET] Change theme',
     screen: ChangeThemeSharedExample,
+    missingOnFabric: true,
   },
   NestedRotationSharedExample: {
     title: '[SET] Nested Transforms',
     screen: NestedRotationExample,
+    missingOnFabric: true,
   },
   BorderRadiiExample: {
     title: '[SET] Border Radii',
     screen: BorderRadiiExample,
+    missingOnFabric: true,
+  },
+  TabNavigatorExample: {
+    title: '[SET] Tab Navigator',
+    screen: TabNavigatorExample,
+    missingOnFabric: true,
   },
 } as const;

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

@@ -159,6 +159,11 @@ int LayoutAnimationsManager::findPrecedingViewTagForTransition(const int tag) {
   return -1;
 }
 
+const std::vector<int> &LayoutAnimationsManager::getSharedGroup(const int viewTag) {
+  const auto &groupSharedTag = viewTagToSharedTag_[viewTag];
+  return sharedTransitionGroups_[groupSharedTag];
+}
+
 #ifndef NDEBUG
 std::string LayoutAnimationsManager::getScreenSharedTagPairString(
     const int screenTag,

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

@@ -43,6 +43,7 @@ class LayoutAnimationsManager {
   void clearSharedTransitionConfig(const int tag);
   void cancelLayoutAnimation(jsi::Runtime &rt, const int tag) const;
   int findPrecedingViewTagForTransition(const int tag);
+  const std::vector<int> &getSharedGroup(const int viewTag);
 #ifndef NDEBUG
   std::string getScreenSharedTagPairString(
       const int screenTag,

packages/react-native-reanimated/android/src/main/cpp/LayoutAnimations.cpp

@@ -1,4 +1,5 @@
 #include "LayoutAnimations.h"
+#include <vector>
 #include "FeaturesConfig.h"
 #include "Logger.h"
 
@@ -100,10 +101,22 @@ void LayoutAnimations::setFindPrecedingViewTagForTransition(
       findPrecedingViewTagForTransitionBlock;
 }
 
+void LayoutAnimations::setGetSharedGroupBlock(
+    GetSharedGroupBlock getSharedGroupBlock) {
+  getSharedGroupBlock_ = getSharedGroupBlock;
+}
+
 int LayoutAnimations::findPrecedingViewTagForTransition(int tag) {
   return findPrecedingViewTagForTransitionBlock_(tag);
 }
 
+jni::local_ref<JArrayInt> LayoutAnimations::getSharedGroup(const int tag) {
+  const auto &group = getSharedGroupBlock_(tag);
+  auto jGroup = JArrayInt::newArray(group.size());
+  jGroup->setRegion(0, group.size(), group.data());
+  return jGroup;
+}
+
 void LayoutAnimations::registerNatives() {
   registerHybrid({
       makeNativeMethod("initHybrid", LayoutAnimations::initHybrid),
@@ -124,6 +137,7 @@ void LayoutAnimations::registerNatives() {
       makeNativeMethod(
           "findPrecedingViewTagForTransition",
           LayoutAnimations::findPrecedingViewTagForTransition),
+      makeNativeMethod("getSharedGroup", LayoutAnimations::getSharedGroup),
 #ifndef NDEBUG
       makeNativeMethod(
           "checkDuplicateSharedTag", LayoutAnimations::checkDuplicateSharedTag),

packages/react-native-reanimated/android/src/main/cpp/LayoutAnimations.h

@@ -4,6 +4,7 @@
 #include <jsi/jsi.h>
 #include <memory>
 #include <string>
+#include <vector>
 #include "JNIHelper.h"
 
 namespace reanimated {
@@ -22,6 +23,7 @@ class LayoutAnimations : public jni::HybridClass<LayoutAnimations> {
   using ClearAnimationConfigBlock = std::function<void(int)>;
   using CancelAnimationBlock = std::function<void(int)>;
   using FindPrecedingViewTagForTransitionBlock = std::function<int(int)>;
+  using GetSharedGroupBlock = std::function<std::vector<int>(const int)>;
 
  public:
   static auto constexpr kJavaDescriptor =
@@ -53,6 +55,7 @@ class LayoutAnimations : public jni::HybridClass<LayoutAnimations> {
   void setFindPrecedingViewTagForTransition(
       FindPrecedingViewTagForTransitionBlock
           findPrecedingViewTagForTransitionBlock);
+  void setGetSharedGroupBlock(const GetSharedGroupBlock getSharedGroupBlock);
 
   void progressLayoutAnimation(
       int tag,
@@ -62,6 +65,7 @@ class LayoutAnimations : public jni::HybridClass<LayoutAnimations> {
   void clearAnimationConfigForTag(int tag);
   void cancelAnimationForTag(int tag);
   int findPrecedingViewTagForTransition(int tag);
+  jni::local_ref<JArrayInt> getSharedGroup(const int tag);
 
  private:
   friend HybridBase;
@@ -73,6 +77,7 @@ class LayoutAnimations : public jni::HybridClass<LayoutAnimations> {
   CancelAnimationBlock cancelAnimationBlock_;
   FindPrecedingViewTagForTransitionBlock
       findPrecedingViewTagForTransitionBlock_;
+  GetSharedGroupBlock getSharedGroupBlock_;
 #ifndef NDEBUG
   CheckDuplicateSharedTag checkDuplicateSharedTag_;
 #endif

packages/react-native-reanimated/android/src/main/cpp/NativeProxy.cpp

@@ -652,6 +652,16 @@ void NativeProxy::setupLayoutAnimations() {
           return -1;
         }
       });
+
+  layoutAnimations_->cthis()->setGetSharedGroupBlock(
+      [weakNativeReanimatedModule](int tag) -> std::vector<int> {
+        if (auto nativeReanimatedModule = weakNativeReanimatedModule.lock()) {
+          return nativeReanimatedModule->layoutAnimationsManager()
+              .getSharedGroup(tag);
+        } else {
+          return {};
+        }
+      });
 }
 
 } // namespace reanimated

packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/layoutReanimation/AnimationsManager.java

@@ -494,7 +494,7 @@ public boolean shouldAnimateExiting(int tag, boolean shouldAnimate) {
   }
 
   public boolean hasAnimationForTag(int tag, int type) {
-    return mNativeMethodsHolder.hasAnimation(tag, type);
+    return mNativeMethodsHolder != null && mNativeMethodsHolder.hasAnimation(tag, type);
   }
 
   public boolean isLayoutAnimationEnabled() {
@@ -680,7 +680,7 @@ private void cancelAnimationsInSubviews(ViewGroup view) {
     }
   }
 
-  private View resolveView(int tag) {
+  protected View resolveView(int tag) {
     if (mExitingViews.containsKey(tag)) {
       return mExitingViews.get(tag);
     } else {
@@ -718,6 +718,14 @@ public void screenDidLayout(View view) {
     mSharedTransitionManager.screenDidLayout(view);
   }
 
+  public void navigationTabChanged(View previousTab, View newTab) {
+    mSharedTransitionManager.navigationTabChanged(previousTab, newTab);
+  }
+
+  public void visitNativeTreeAndMakeSnapshot(View view) {
+    mSharedTransitionManager.visitNativeTreeAndMakeSnapshot(view);
+  }
+
   public void viewDidLayout(View view) {
     mSharedTransitionManager.viewDidLayout(view);
   }

packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/layoutReanimation/LayoutAnimations.java

@@ -52,6 +52,8 @@ public LayoutAnimations(ReactApplicationContext context) {
 
   public native int findPrecedingViewTagForTransition(int tag);
 
+  public native int[] getSharedGroup(int tag);
+
   private void endLayoutAnimation(int tag, boolean removeView) {
     AnimationsManager animationsManager = getAnimationsManager();
     if (animationsManager == null) {

packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/layoutReanimation/NativeMethodsHolder.java

@@ -18,4 +18,6 @@ public interface NativeMethodsHolder {
   int findPrecedingViewTagForTransition(int tag);
 
   void checkDuplicateSharedTag(int viewTag, int screenTag);
+
+  int[] getSharedGroup(int viewTag);
 }

packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/layoutReanimation/ReanimatedNativeHierarchyManager.java

@@ -214,12 +214,14 @@ public class ReanimatedNativeHierarchyManager extends NativeViewHierarchyManager
   private final ReaLayoutAnimator mReaLayoutAnimator;
   private final HashMap<Integer, Set<Integer>> mPendingDeletionsForTag = new HashMap<>();
   private boolean initOk = true;
+  private final TabNavigatorObserver mTabNavigatorObserver;
 
   public ReanimatedNativeHierarchyManager(
       ViewManagerRegistry viewManagers, ReactApplicationContext reactContext) {
     super(viewManagers);
 
     mReaLayoutAnimator = new ReaLayoutAnimator(reactContext, this);
+    mTabNavigatorObserver = new TabNavigatorObserver(mReaLayoutAnimator);
 
     Class<?> clazz = this.getClass().getSuperclass();
     if (clazz == null) {
@@ -293,6 +295,14 @@ public synchronized void updateLayout(
         if (!hasHeader || !container.isLayoutRequested()) {
           mReaLayoutAnimator.getAnimationsManager().screenDidLayout(container);
         }
+        View screen = resolveView(tag);
+        View screenFragmentManager = (View) screen.getParent();
+        if (screenFragmentManager != null) {
+          View screenHolder = (View) screenFragmentManager.getParent();
+          if (ScreensHelper.isScreenContainer(screenHolder)) {
+            mTabNavigatorObserver.handleScreenContainerUpdate(screen);
+          }
+        }
       }
       View view = resolveView(tag);
       if (view != null && mReaLayoutAnimator != null) {