Use tabs for shared element transition examples

Author: satya164

versioned_docs/version-7.x/shared-element-transitions.md

@@ -54,6 +54,7 @@ import { Button } from '@react-navigation/elements';
 
 import Animated from 'react-native-reanimated';
 
+// codeblock-focus-start
 function HomeScreen() {
   const navigation = useNavigation();
 
@@ -87,6 +88,7 @@ function DetailsScreen() {
     </View>
   );
 }
+// codeblock-focus-end
 
 const RootStack = createNativeStackNavigator({
   screens: {
@@ -117,25 +119,19 @@ You can customize the transition by passing a custom `SharedTransition` configur
 
 Custom transition configuration is not fully finalized and might change in a future release.
 
-### Old Architecture (Reanimated 3)
+<Tabs groupId="architecture" queryString="architecture">
+<TabItem value="new" label="New Architecture (Reanimated 4)">
 
-By default, the transition animates `width`, `height`, `originX`, `originY`, and `transform` using `withTiming` with a 500 ms duration. You can customize the transition using `SharedTransition.custom()`:
+On the New Architecture, the default transition animates `width`, `height`, `originX`, `originY`, `transform`, `backgroundColor`, and `opacity` using `withTiming` with a 500 ms duration.
 
-```jsx
-import { SharedTransition, withSpring } from 'react-native-reanimated';
+Currently customization is more limited due to ongoing development. You can't define fully custom animation functions. Instead, use the `SharedTransition` builder class to configure duration and spring-based animations:
 
-// highlight-start
-const customTransition = SharedTransition.custom((values) => {
-  'worklet';
+```jsx
+import { SharedTransition } from 'react-native-reanimated';
 
-  return {
-    height: withSpring(values.targetHeight),
-    width: withSpring(values.targetWidth),
-    originX: withSpring(values.targetOriginX),
-    originY: withSpring(values.targetOriginY),
-  };
-});
-// highlight-end
+// Customize duration and use spring animation
+// highlight-next-line
+const customTransition = SharedTransition.duration(550).springify();
 
 function HomeScreen() {
   return (
@@ -149,18 +145,26 @@ function HomeScreen() {
 }
 ```
 
-### New Architecture (Reanimated 4)
+</TabItem>
+<TabItem value="old" label="Old Architecture (Reanimated 3)" default>
 
-On the New Architecture, the default transition animates `width`, `height`, `originX`, `originY`, `transform`, `backgroundColor`, and `opacity` using `withTiming` with a 500 ms duration.
-
-Currently customization is more limited due to ongoing development. You can't define fully custom animation functions. Instead, use the `SharedTransition` builder class to configure duration and spring-based animations:
+By default, the transition animates `width`, `height`, `originX`, `originY`, and `transform` using `withTiming` with a 500 ms duration. You can customize the transition using `SharedTransition.custom()`:
 
 ```jsx
-import { SharedTransition } from 'react-native-reanimated';
+import { SharedTransition, withSpring } from 'react-native-reanimated';
 
-// Customize duration and use spring animation
-// highlight-next-line
-const customTransition = SharedTransition.duration(550).springify();
+// highlight-start
+const customTransition = SharedTransition.custom((values) => {
+  'worklet';
+
+  return {
+    height: withSpring(values.targetHeight),
+    width: withSpring(values.targetWidth),
+    originX: withSpring(values.targetOriginX),
+    originY: withSpring(values.targetOriginY),
+  };
+});
+// highlight-end
 
 function HomeScreen() {
   return (
@@ -174,6 +178,9 @@ function HomeScreen() {
 }
 ```
 
+</TabItem>
+</Tabs>
+
 ## Reference
 
 You can find a full Shared Element Transitions reference in the [React Native Reanimated documentation](https://docs.swmansion.com/react-native-reanimated/docs/shared-element-transitions/overview/).

versioned_docs/version-8.x/shared-element-transitions.md

@@ -54,6 +54,7 @@ import { Button } from '@react-navigation/elements';
 
 import Animated from 'react-native-reanimated';
 
+// codeblock-focus-start
 function HomeScreen() {
   const navigation = useNavigation();
 
@@ -87,6 +88,7 @@ function DetailsScreen() {
     </View>
   );
 }
+// codeblock-focus-end
 
 const RootStack = createNativeStackNavigator({
   screens: {