docs: apply feedback

Author: kacperkapusciak

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

@@ -1,20 +1,29 @@
 # Animating elements between screens
 
-This guide covers how to animate elements between screens. This feature is known as a [Shared Element Transition](https://docs.swmansion.com/react-native-reanimated/docs/api/sharedElementTransitions) and it's implemented in the native stack with [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/).
+This guide covers how to animate elements between screens. This feature is known as a [Shared Element Transition](https://docs.swmansion.com/react-native-reanimated/docs/api/sharedElementTransitions) and it's implemented in the [`@react-navigation/native-stack`](<(/docs/native-stack-navigator)>) with [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/).
 
-Before continuing, make sure to install and configure [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation).
-
-> Note: Shared Element Transitions require React Native Reanimated v3.0.0 or higher, and as of writing this guide, it's considered an experimental feature not recommended for production use.
+> Note: As of writing this guide, Shared Element Transitions are considered an experimental feature not recommended for production use.
 
 <div style={{ display: 'flex', margin: '16px 0' }}>
   <video playsInline autoPlay muted loop>
     <source src="/assets/shared-element-transitions/shared-element-transitions.mp4" />
   </video>
 </div>
 
+## Pre-requisites
+
+Before continuing this guide make sure your app meets these criteria:
+
+- You are using [`@react-navigation/native-stack`](/docs/native-stack-navigator). The Shared Element Transitions feature isn't supported in JS-based [`@react-navigation/stack`](/docs/stack-navigator).
+- You have [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation) **v3.0.0 or higher** installed and configured.
+
 ## Minimal example
 
-To create a shared transition, simply assign the same `sharedTransitionTag` to elements on different screens in a native stack. This prop is a string that has to be unique in the context of a single screen, but has to match elements between screens. Similarly to the [`key`](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) property, which tells React which element in the list is which, `sharedElementTag` allows Reanimated to identify and animate elements. Components that you'd like to animate have to be `Animated` versions imported from `react-native-reanimated`. The animation will start automatically when you navigate between screens.
+To create a shared transition:
+
+1. Use `Animated` components imported from `react-native-reanimated`.
+2. Assign the same `sharedTransitionTag` to elements on different screens.
+3. Navigate between screens. The transition will start automatically.
 
 ```jsx
 import * as React from 'react';
@@ -24,6 +33,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Animated from 'react-native-reanimated';
 
+// highlight-next-line
 const Stack = createNativeStackNavigator();
 
 function HomeScreen({ navigation }) {
@@ -76,6 +86,8 @@ const styles = StyleSheet.create({
 });
 ```
 
+`sharedTransitionTag` is a string that has to be unique in the context of a single screen, but has to match elements between screens. This prop allows Reanimated to identify and animate the elements, similarly to the [`key`](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) property, which tells React which element in the list is which.
+
 ## Customizing the transition
 
 By default, the transition animates the `width`, `height`, `originX`, `originY` and `transform` properties using `withTiming` with a 500 ms duration. You can easily customize `width`, `height`, `originX`, and `originY` props. Customizing `transform` is also possible but it's far beyond the scope of this guide.
@@ -115,6 +127,6 @@ You can find a full Shared Element Transitions reference in the [React Native Re
 
 ## Alternatives
 
-Alternatively, you can use [`react-native-shared-element`](https://github.com/IjzerenHein/react-native-shared-element) library with a [React Navigation binding](https://github.com/IjzerenHein/react-navigation-shared-element) which implements Shared Element Transitions in a JS-based Stack navigator. This solution, however, isn't actively maintained.
+Alternatively, you can use [`react-native-shared-element`](https://github.com/IjzerenHein/react-native-shared-element) library with a [React Navigation binding](https://github.com/IjzerenHein/react-navigation-shared-element) which implements Shared Element Transitions in a JS-based `@react-navigation/stack` navigator. This solution, however, isn't actively maintained.
 
 The [`react-native-navigation`](https://github.com/wix/react-native-navigation) also comes with support for Shared Element Transitions. You can read more about it [here](https://wix.github.io/react-native-navigation/docs/style-animations#shared-element-transitions).

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

@@ -1,20 +1,29 @@
 # Animating elements between screens
 
-This guide covers how to animate elements between screens. This feature is known as a [Shared Element Transition](https://docs.swmansion.com/react-native-reanimated/docs/api/sharedElementTransitions) and it's implemented in the native stack with [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/).
+This guide covers how to animate elements between screens. This feature is known as a [Shared Element Transition](https://docs.swmansion.com/react-native-reanimated/docs/api/sharedElementTransitions) and it's implemented in the [`@react-navigation/native-stack`](<(/docs/native-stack-navigator)>) with [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/).
 
-Before continuing, make sure to install and configure [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation).
-
-> Note: Shared Element Transitions require React Native Reanimated v3.0.0 or higher, and as of writing this guide, it's considered an experimental feature not recommended for production use.
+> Note: As of writing this guide, Shared Element Transitions are considered an experimental feature not recommended for production use.
 
 <div style={{ display: 'flex', margin: '16px 0' }}>
   <video playsInline autoPlay muted loop>
     <source src="/assets/shared-element-transitions/shared-element-transitions.mp4" />
   </video>
 </div>
 
+## Pre-requisites
+
+Before continuing this guide make sure your app meets these criteria:
+
+- You are using [`@react-navigation/native-stack`](/docs/native-stack-navigator). The Shared Element Transitions feature isn't supported in JS-based [`@react-navigation/stack`](/docs/stack-navigator).
+- You have [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation) **v3.0.0 or higher** installed and configured.
+
 ## Minimal example
 
-To create a shared transition, simply assign the same `sharedTransitionTag` to elements on different screens in a native stack. This prop is a string that has to be unique in the context of a single screen, but has to match elements between screens. Similarly to the [`key`](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) property, which tells React which element in the list is which, `sharedElementTag` allows Reanimated to identify and animate elements. Components that you'd like to animate have to be `Animated` versions imported from `react-native-reanimated`. The animation will start automatically when you navigate between screens.
+To create a shared transition:
+
+1. Use `Animated` components imported from `react-native-reanimated`.
+2. Assign the same `sharedTransitionTag` to elements on different screens.
+3. Navigate between screens. The transition will start automatically.
 
 ```jsx
 import * as React from 'react';
@@ -24,6 +33,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Animated from 'react-native-reanimated';
 
+// highlight-next-line
 const Stack = createNativeStackNavigator();
 
 function HomeScreen({ navigation }) {
@@ -76,6 +86,8 @@ const styles = StyleSheet.create({
 });
 ```
 
+`sharedTransitionTag` is a string that has to be unique in the context of a single screen, but has to match elements between screens. This prop allows Reanimated to identify and animate the elements, similarly to the [`key`](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) property, which tells React which element in the list is which.
+
 ## Customizing the transition
 
 By default, the transition animates the `width`, `height`, `originX`, `originY` and `transform` properties using `withTiming` with a 500 ms duration. You can easily customize `width`, `height`, `originX`, and `originY` props. Customizing `transform` is also possible but it's far beyond the scope of this guide.
@@ -115,6 +127,6 @@ You can find a full Shared Element Transitions reference in the [React Native Re
 
 ## Alternatives
 
-Alternatively, you can use [`react-native-shared-element`](https://github.com/IjzerenHein/react-native-shared-element) library with a [React Navigation binding](https://github.com/IjzerenHein/react-navigation-shared-element) which implements Shared Element Transitions in a JS-based Stack navigator. This solution, however, isn't actively maintained.
+Alternatively, you can use [`react-native-shared-element`](https://github.com/IjzerenHein/react-native-shared-element) library with a [React Navigation binding](https://github.com/IjzerenHein/react-navigation-shared-element) which implements Shared Element Transitions in a JS-based `@react-navigation/stack` navigator. This solution, however, isn't actively maintained.
 
 The [`react-native-navigation`](https://github.com/wix/react-native-navigation) also comes with support for Shared Element Transitions. You can read more about it [here](https://wix.github.io/react-native-navigation/docs/style-animations#shared-element-transitions).