[SET] SETBoundary

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

@@ -1,39 +1,57 @@
-import type { ParamListBase } from '@react-navigation/native';
+import { useIsFocused, 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 from 'react-native-reanimated';
+import Animated, { SharedTransitionBoundary } from 'react-native-reanimated';
 
 const Stack = createNativeStackNavigator();
 
 function Screen1({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  const isFocused = useIsFocused();
   return (
-    <View style={styles.flexOne}>
-      <Animated.View style={styles.redBox} sharedTransitionTag="tag1" />
-      <Button title="Screen2" onPress={() => navigation.navigate('Screen2')} />
-      <Button title="Screen3" onPress={() => navigation.navigate('Screen3')} />
-    </View>
+    <SharedTransitionBoundary isActive={isFocused}>
+      <View style={styles.flexOne}>
+        <Animated.View style={styles.redBox} sharedTransitionTag="tag1" />
+        <Button
+          title="Screen2"
+          onPress={() => navigation.navigate('Screen2')}
+        />
+        <Button
+          title="Screen3"
+          onPress={() => navigation.navigate('Screen3')}
+        />
+      </View>
+    </SharedTransitionBoundary>
   );
 }
 
 function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  const isFocused = useIsFocused();
   return (
-    <View style={styles.container}>
-      <Animated.View style={styles.greenBox} sharedTransitionTag="tag1" />
-      <Button title="Screen1" onPress={() => navigation.popTo('Screen1')} />
-      <Button title="Screen3" onPress={() => navigation.navigate('Screen3')} />
-    </View>
+    <SharedTransitionBoundary isActive={isFocused}>
+      <View style={styles.container}>
+        <Animated.View style={styles.greenBox} sharedTransitionTag="tag1" />
+        <Button title="Screen1" onPress={() => navigation.popTo('Screen1')} />
+        <Button
+          title="Screen3"
+          onPress={() => navigation.navigate('Screen3')}
+        />
+      </View>
+    </SharedTransitionBoundary>
   );
 }
 
 function Screen3({ navigation }: NativeStackScreenProps<ParamListBase>) {
+  const isFocused = useIsFocused();
   return (
-    <View style={styles.flexOne}>
-      <Animated.View style={styles.blueBox} sharedTransitionTag="tag1" />
-      <Button title="Screen1" onPress={() => navigation.popTo('Screen1')} />
-      <Button title="Screen2" onPress={() => navigation.popTo('Screen2')} />
-    </View>
+    <SharedTransitionBoundary isActive={isFocused}>
+      <View style={styles.flexOne}>
+        <Animated.View style={styles.blueBox} sharedTransitionTag="tag1" />
+        <Button title="Screen1" onPress={() => navigation.popTo('Screen1')} />
+        <Button title="Screen2" onPress={() => navigation.popTo('Screen2')} />
+      </View>
+    </SharedTransitionBoundary>
   );
 }
 

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Button, StyleSheet, View } from 'react-native';
+import Animated, {
+  SharedTransitionBoundary,
+  SlideInDown,
+  FadeOutRight,
+} from 'react-native-reanimated';
+
+export default function ScreenlessBasic() {
+  const [activeID, setActiveID] = React.useState(0);
+
+  return (
+    <View style={styles.container}>
+      <Button onPress={() => setActiveID((id) => 1 - id)} title="toggle" />
+      <View style={styles.fakeScreen}>
+        <SharedTransitionBoundary isActive={activeID === 0}>
+          <Animated.View
+            sharedTransitionTag="tag"
+            style={{ backgroundColor: 'red', width: 100, height: 100 }}
+          />
+        </SharedTransitionBoundary>
+      </View>
+      {activeID === 1 && (
+        <Animated.View
+          entering={SlideInDown}
+          exiting={FadeOutRight}
+          style={styles.fakeScreen}>
+          <SharedTransitionBoundary isActive={activeID === 1}>
+            <Animated.View
+              sharedTransitionTag="tag"
+              style={{
+                backgroundColor: 'blue',
+                width: 100,
+                height: 100,
+                transform: [{ rotate: '-225deg' }],
+              }}
+            />
+          </SharedTransitionBoundary>
+        </Animated.View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 150,
+    alignItems: 'center',
+  },
+  fakeScreen: {
+    backgroundColor: 'grey',
+    width: 200,
+    height: 200,
+    margin: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

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

@@ -161,6 +161,7 @@ import WithClampExample from './WithClampExample';
 import WithoutBabelPluginExample from './WithoutBabelPluginExample';
 import WobbleExample from './WobbleExample';
 import WorkletRuntimeExample from './WorkletRuntimeExample';
+import ScreenlessBasic from './SharedElementTransitions/ScreenlessBasic';
 
 export const REAPlatform = {
   IOS: 'ios',
@@ -1044,4 +1045,12 @@ export const EXAMPLES: Record<string, Example> = {
       android: false,
     },
   },
+  ScreenlessBasic: {
+    title: '[SET] Screenless Basic',
+    screen: ScreenlessBasic,
+    shouldWork: {
+      ios: true,
+      android: true,
+    },
+  },
 } as const;

packages/react-native-reanimated/Common/NativeView/CMakeLists.txt

@@ -0,0 +1,56 @@
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+set(ANDROID_DIR ${CMAKE_CURRENT_SOURCE_DIR}/../../android)
+set(CODEGEN_JNI_DIR ${ANDROID_DIR}/build/generated/source/codegen/jni)
+set(CODEGEN_COMPONENTS_DIR ${CODEGEN_JNI_DIR}/react/renderer/components/rnreanimated)
+file(
+  GLOB CODEGEN_ORIGINAL_SRCS CONFIGURE_DEPENDS
+  ${CODEGEN_JNI_DIR}/*.cpp
+  ${CODEGEN_COMPONENTS_DIR}/*.cpp
+)
+
+set(CODEGEN_OVERWRITTEN_JNI_DIR .)
+set(CODEGEN_OVERWRITTEN_COMPONENTS_DIR ${CODEGEN_OVERWRITTEN_JNI_DIR}/react/renderer/components/rnreanimated)
+file(
+  GLOB CODEGEN_OVERWRITTEN_SRCS CONFIGURE_DEPENDS
+  ${CODEGEN_OVERWRITTEN_JNI_DIR}/*.cpp
+  ${CODEGEN_OVERWRITTEN_COMPONENTS_DIR}/*.cpp
+)
+
+add_library(
+  react_codegen_rnreanimated
+  OBJECT
+  ${CODEGEN_OVERWRITTEN_SRCS}
+  ${CODEGEN_ORIGINAL_SRCS}
+)
+
+if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 80)
+ target_compile_reactnative_options(react_codegen_rnreanimated PRIVATE)
+endif()
+
+target_include_directories(
+  react_codegen_rnreanimated
+  PUBLIC
+  ${CODEGEN_OVERWRITTEN_JNI_DIR}
+  ${CODEGEN_OVERWRITTEN_COMPONENTS_DIR}
+  ${CODEGEN_JNI_DIR}
+  ${CODEGEN_COMPONENTS_DIR}
+)
+
+target_link_libraries(
+  react_codegen_rnreanimated
+  fbjni
+  jsi
+  reactnative
+)
+
+target_compile_options(
+  react_codegen_rnreanimated
+  PRIVATE
+  -DLOG_TAG=\"ReactNative\"
+  -fexceptions
+  -frtti
+  -std=c++20
+  -Wall
+)

packages/react-native-reanimated/Common/NativeView/react/renderer/components/rnreanimated/ComponentDescriptors.h

@@ -0,0 +1,19 @@
+
+/**
+ * This code was generated by
+ * [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be
+ * lost once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateComponentDescriptorsH.js
+ */
+
+#pragma once
+
+#include <react/renderer/components/rnreanimated/ShadowNodes.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+#include "RNReanimatedSharedTransitionBoundaryComponentDescriptor.h"
+
+namespace facebook::react {} // namespace facebook::react

packages/react-native-reanimated/Common/NativeView/react/renderer/components/rnreanimated/RNReanimatedSharedTransitionBoundaryComponentDescriptor.h

@@ -0,0 +1,30 @@
+
+/**
+ * This code was generated by
+ * [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be
+ * lost once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateComponentDescriptorH.js
+ */
+
+#pragma once
+
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+#include "RNReanimatedSharedTransitionBoundaryShadowNode.h"
+
+namespace facebook::react {
+
+class RNReanimatedSharedTransitionBoundaryComponentDescriptor final
+    : public ConcreteComponentDescriptor<RNReanimatedSharedTransitionBoundaryShadowNode> {
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+  void adopt(ShadowNode &shadowNode) const override {
+    react_native_assert(dynamic_cast<RNReanimatedSharedTransitionBoundaryShadowNode *>(&shadowNode));
+
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react

packages/react-native-reanimated/Common/NativeView/react/renderer/components/rnreanimated/RNReanimatedSharedTransitionBoundaryShadowNode.cpp

@@ -0,0 +1,11 @@
+#include "RNReanimatedSharedTransitionBoundaryShadowNode.h"
+
+namespace facebook::react {
+
+extern const char RNReanimatedSharedTransitionBoundaryComponentName[] = "RNReanimatedSharedTransitionBoundary";
+
+void RNReanimatedSharedTransitionBoundaryShadowNode::initialize() {
+  traits_.unset(ShadowNodeTraits::ForceFlattenView);
+}
+
+} // namespace facebook::react

packages/react-native-reanimated/Common/NativeView/react/renderer/components/rnreanimated/RNReanimatedSharedTransitionBoundaryShadowNode.h

@@ -0,0 +1,41 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/rnreanimated/EventEmitters.h>
+#include <react/renderer/components/rnreanimated/Props.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+
+#include "RNReanimatedSharedTransitionBoundaryState.h"
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char RNReanimatedSharedTransitionBoundaryComponentName[];
+
+/*
+ * `ShadowNode` for <RNReanimatedSharedTransitionBoundary> component.
+ */
+class RNReanimatedSharedTransitionBoundaryShadowNode final : public ConcreteViewShadowNode<
+                                                                 RNReanimatedSharedTransitionBoundaryComponentName,
+                                                                 RNReanimatedSharedTransitionBoundaryProps,
+                                                                 RNReanimatedSharedTransitionBoundaryEventEmitter,
+                                                                 RNReanimatedSharedTransitionBoundaryState> {
+ public:
+  RNReanimatedSharedTransitionBoundaryShadowNode(
+      const ShadowNodeFragment &fragment,
+      const ShadowNodeFamily::Shared &family,
+      ShadowNodeTraits traits)
+      : ConcreteViewShadowNode(fragment, family, traits) {
+    initialize();
+  }
+
+  RNReanimatedSharedTransitionBoundaryShadowNode(const ShadowNode &sourceShadowNode, const ShadowNodeFragment &fragment)
+      : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+    initialize();
+  }
+
+ private:
+  void initialize();
+};
+
+} // namespace facebook::react