From 88b80235b3239549dc353dcc1fa9b055b24b89a4 Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 03:48:23 +0200
Subject: [PATCH 01/14] add shared element & libs

---
 ios/Podfile.lock |  6 ++++++
 package.json     |  5 ++++-
 yarn.lock        | 23 ++++++++++++++++++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 7320c88..1d2b0ff 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -411,6 +411,8 @@ PODS:
   - RNScreens (3.7.2):
     - React-Core
     - React-RCTImage
+  - RNSharedElement (0.8.2):
+    - React
   - RNVectorIcons (8.1.0):
     - React-Core
   - Yoga (1.14.0)
@@ -485,6 +487,7 @@ DEPENDENCIES:
   - RNLocalize (from `../node_modules/react-native-localize`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNSharedElement (from `../node_modules/react-native-shared-element`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -594,6 +597,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSharedElement:
+    :path: "../node_modules/react-native-shared-element"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   Yoga:
@@ -659,6 +664,7 @@ SPEC CHECKSUMS:
   RNLocalize: 7f1e5792b65a839af55a9552d05b3558b66d017e
   RNReanimated: ad24db8af24e3fe1b5c462785bc3db8d5baae2ee
   RNScreens: 0591543e343c7444ea1756b6265d81a4295922c9
+  RNSharedElement: 87baf6d04da5b068f000dd8c953d28a1196999c0
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   Yoga: aa0cb45287ebe1004c02a13f279c55a95f1572f4
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
diff --git a/package.json b/package.json
index d78754c..191c3d1 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@react-navigation/bottom-tabs": "^6.0.5",
     "@react-navigation/native": "^6.0.2",
     "@react-navigation/native-stack": "^6.1.0",
+    "@react-navigation/stack": "^6.0.7",
     "date-fns": "^2.24.0",
     "formik": "^2.2.9",
     "i18n-js": "^3.8.0",
@@ -48,8 +49,10 @@
     "react-native-restart": "^0.0.22",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.7.2",
+    "react-native-shared-element": "^0.8.2",
     "react-native-ui-lib": "^6.0.0",
-    "react-native-vector-icons": "^8.1.0"
+    "react-native-vector-icons": "^8.1.0",
+    "react-navigation-shared-element": "^3.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
diff --git a/yarn.lock b/yarn.lock
index a885e63..5d27d82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1376,6 +1376,15 @@
   dependencies:
     nanoid "^3.1.23"
 
+"@react-navigation/stack@^6.0.7":
+  version "6.0.7"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.0.7.tgz#305e66129d0b425802bb6ed4f24dbd2fb56ab74f"
+  integrity sha512-hxwhRZbn6zD2rInhItBeHTCPYzmurz+/8/MhtRevBEdLG0+61dik8Y+evg/mu6AsOU0WrDakTsLcHdf/9zkXzw==
+  dependencies:
+    "@react-navigation/elements" "^1.1.0"
+    color "^3.1.3"
+    warn-once "^0.1.0"
+
 "@sideway/address@^4.1.0":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.2.tgz#811b84333a335739d3969cfc434736268170cad1"
@@ -4096,7 +4105,7 @@ hermes-profile-transformer@^0.0.6:
   dependencies:
     source-map "^0.7.3"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6832,6 +6841,11 @@ react-native-screens@^3.7.2:
   dependencies:
     warn-once "^0.1.0"
 
+react-native-shared-element@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/react-native-shared-element/-/react-native-shared-element-0.8.2.tgz#64124ec7e19369b78b6924c93808e1ed058c8109"
+  integrity sha512-IalCG1Sn6Vq171JMh0cbHzf0dJxwUIGwf5baxWhZ6busLQ2AL0A0pFb86sLgOUtv+NZdZX2R1Xd+Ylqj8neuLw==
+
 react-native-slider@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-native-slider/-/react-native-slider-0.11.0.tgz#b68a0bc43c8422b24cd57947cc5ac2bcdb58fadc"
@@ -6913,6 +6927,13 @@ react-native@0.65.1:
     whatwg-fetch "^3.0.0"
     ws "^6.1.4"
 
+react-navigation-shared-element@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/react-navigation-shared-element/-/react-navigation-shared-element-3.1.3.tgz#c75084ca8cab09063297a39ff1110de0dc732aab"
+  integrity sha512-U1BZp7dEdcTNHggfkq3WEBlJeg4HwFhFdj7a0i0Uql/7mg2IHQg/bZaqM2jQvJITkABge6Hz5fZixIF8jyzpkg==
+  dependencies:
+    hoist-non-react-statics "^3.3.2"
+
 react-refresh@^0.4.0:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.3.tgz#966f1750c191672e76e16c2efa569150cc73ab53"

From 75b7980bc6d0508257e9c08f6cba39851402a90b Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 03:48:39 +0200
Subject: [PATCH 02/14] SharedElement

---
 src/components/reanimated2.tsx | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/reanimated2.tsx b/src/components/reanimated2.tsx
index bf6a565..4966e69 100644
--- a/src/components/reanimated2.tsx
+++ b/src/components/reanimated2.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View, Text} from 'react-native-ui-lib';
 import Animated, {withSpring, useAnimatedStyle, useSharedValue} from 'react-native-reanimated';
+import {SharedElement} from 'react-navigation-shared-element';
 
 import {Bounceable} from './bounceable';
 
@@ -20,16 +21,18 @@ export const Reanimated2: React.FC<Reanimated2Props> = ({stID}: Reanimated2Props
   };
 
   return (
-    <View padding-s1>
-      <Animated.View style={[animatedStyles]}>
-        <View center padding-s1>
-          <Bounceable onPress={moveObject} activeScale={0.9}>
-            <View center bg-primary padding-s8 br40>
-              <Text whitish>Bounceable</Text>
-            </View>
-          </Bounceable>
-        </View>
-      </Animated.View>
-    </View>
+    <SharedElement id={stID ?? ''}>
+      <View padding-s1>
+        <Animated.View style={[animatedStyles]}>
+          <View center padding-s1>
+            <Bounceable onPress={moveObject} activeScale={0.9}>
+              <View center bg-primary padding-s8 br40>
+                <Text whitish>Bounceable</Text>
+              </View>
+            </Bounceable>
+          </View>
+        </Animated.View>
+      </View>
+    </SharedElement>
   );
 };

From 6e8768ae88a6db1fbcbcacb2ed0f65e965c6ee4c Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 03:50:09 +0200
Subject: [PATCH 03/14] shared element related types

---
 src/services/navigation/types.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/services/navigation/types.ts b/src/services/navigation/types.ts
index 7fe20f0..a30cb10 100644
--- a/src/services/navigation/types.ts
+++ b/src/services/navigation/types.ts
@@ -1,7 +1,9 @@
 import {BottomTabNavigationOptions} from '@react-navigation/bottom-tabs';
 import {NativeStackNavigationOptions} from '@react-navigation/native-stack';
+import {StackNavigationOptions} from '@react-navigation/stack';
+import {SharedElementsComponentConfig} from 'react-navigation-shared-element';
 
-import {Modal, Screen, Tabs} from '../../screens';
+import {Modal, Screen, SharedScreen, SharedTransitionScreen, Tabs} from '../../screens';
 
 type ScreenInfo = {
   name: string;
@@ -27,3 +29,15 @@ export type ModalScreenInfo = ScreenInfo;
 export type ModalScreenLayouts = {
   [key in Modal]: ScreenInfo;
 };
+
+export type SharedScreenLayouts = {
+  [key in SharedScreen]: ScreenInfo;
+};
+export type SharedTransitionScreenInfo = ScreenInfo & {
+  sharedElements?: SharedElementsComponentConfig | undefined;
+  options: () => StackNavigationOptions;
+};
+export type SharedTransitionScreenLayouts = {
+  [key in SharedTransitionScreen]: SharedTransitionScreenInfo;
+};
+export type GenSharedStackNavigatorProps = SharedTransitionScreenInfo[];

From 5b54cff49d2b0640bad3938c57557ad3d366fa1b Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 03:50:25 +0200
Subject: [PATCH 04/14] shared screens

---
 src/screens/shared.tsx   | 66 ++++++++++++++++++++++++++++++
 src/screens/sharedTo.tsx | 88 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 154 insertions(+)
 create mode 100644 src/screens/shared.tsx
 create mode 100644 src/screens/sharedTo.tsx

diff --git a/src/screens/shared.tsx b/src/screens/shared.tsx
new file mode 100644
index 0000000..d6f8cd9
--- /dev/null
+++ b/src/screens/shared.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import {Alert, Image, ScrollView} from 'react-native';
+import {View, Button, Text} from 'react-native-ui-lib';
+import {observer} from 'mobx-react';
+import {NativeStackScreenProps} from '@react-navigation/native-stack';
+
+import {ScreenProps} from '.';
+import {useServices} from '../services';
+// import { useStores } from '../stores';
+// import { useConstants } from '../utils/constants';
+
+import {Section} from '../components/section';
+import {randomNum} from '../utils/help';
+import {Reanimated2} from '../components/reanimated2';
+import {useNavigation} from '@react-navigation/core';
+import {SharedElement} from 'react-navigation-shared-element';
+import {Bounceable} from '../components/bounceable';
+
+type Props = NativeStackScreenProps<ScreenProps, 'Shared'>;
+
+export const Shared: React.FC<Props> = observer(({route}) => {
+  const {value} = route.params ?? {value: randomNum()};
+  const {nav, t} = useServices();
+  const navv = useNavigation();
+  // const {} = useStores();
+  // const {} = useConstants();
+
+  return (
+    <View flex bg-bgColor>
+      <ScrollView contentInsetAdjustmentBehavior="automatic">
+        {/* <Text textColor center text50R>
+          Shared screen
+        </Text> */}
+        <View padding-s4>
+          <Section title="Transition">
+            {/* <Reanimated2 stID="reanimated2" /> */}
+
+            <View marginV-s2>
+              <Bounceable onPress={() => navv.push('SharedTo')}>
+                <SharedElement id={'image'}>
+                  <Image
+                    source={{
+                      uri: 'https://www.thesprucepets.com/thmb/BKNJkoyr-qyvfaYVRVCuEHNmOXU=/1155x1155/smart/filters:no_upscale()/Stocksy_txp14acff329Kw100_Medium_1360769-5aec7baefa6bcc00373c6cb7.jpg',
+                    }}
+                    style={{height: 120, width: 120, borderRadius: 120}}
+                  />
+                </SharedElement>
+              </Bounceable>
+            </View>
+
+            <View marginT-s8>
+              {/* <Button marginV-s1 label="Start transition" onPress={() => nav.push('SharedTo')} /> */}
+              <Button marginV-s1 label="Start transition" onPress={() => navv.push('SharedTo')} />
+            </View>
+          </Section>
+
+          {/* <Button marginV-s1 label={t.do('section.navigation.button.back')} onPress={navv.goBack} /> */}
+
+          {/* <Text textColor center>
+            localized with i18n-js
+          </Text> */}
+        </View>
+      </ScrollView>
+    </View>
+  );
+});
diff --git a/src/screens/sharedTo.tsx b/src/screens/sharedTo.tsx
new file mode 100644
index 0000000..e65eaf1
--- /dev/null
+++ b/src/screens/sharedTo.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import {Alert, Image, ScrollView} from 'react-native';
+import {View, Button, Text} from 'react-native-ui-lib';
+import {observer} from 'mobx-react';
+import {NativeStackScreenProps} from '@react-navigation/native-stack';
+
+import {ScreenProps} from '.';
+import {useServices} from '../services';
+// import { useStores } from '../stores';
+// import { useConstants } from '../utils/constants';
+
+import {Section} from '../components/section';
+import {randomNum} from '../utils/help';
+import {Reanimated2} from '../components/reanimated2';
+import {SharedElement} from 'react-navigation-shared-element';
+import {useNavigation} from '@react-navigation/native';
+import {Bounceable} from '../components/bounceable';
+
+type Props = NativeStackScreenProps<ScreenProps, 'SharedTo'>;
+
+export const SharedTo: React.FC<Props> = observer(({route}) => {
+  const {value} = route.params ?? {value: randomNum()};
+  const {nav, t} = useServices();
+  const navv = useNavigation(); // has to be useNavigation() as services.nav.n holds different NavigationContainer's state
+  // const {} = useStores();
+  // const {} = useConstants();
+
+  return (
+    <View flex bg-bgColor>
+      <ScrollView contentInsetAdjustmentBehavior="automatic">
+        {/* <Text textColor center text50R>
+          Shared screen
+        </Text> */}
+        <View padding-s4 style={{marginTop: 1}}>
+          <Section title="Transition">
+            {/* <Reanimated2 stID="reanimated2" /> */}
+
+            <View marginV-s2>
+              <Bounceable onPress={navv.goBack}>
+                <SharedElement id={'image'}>
+                  <Image
+                    source={{
+                      uri: 'https://www.thesprucepets.com/thmb/BKNJkoyr-qyvfaYVRVCuEHNmOXU=/1155x1155/smart/filters:no_upscale()/Stocksy_txp14acff329Kw100_Medium_1360769-5aec7baefa6bcc00373c6cb7.jpg',
+                    }}
+                    style={{height: 300, width: 300, borderRadius: 20}}
+                  />
+                </SharedElement>
+              </Bounceable>
+            </View>
+
+            {/* <View>
+              <Button
+                marginV-s1
+                label="Start transition"
+                onPress={() => nav.push('Example', {value: randomNum()})}
+              />
+            </View> */}
+          </Section>
+
+          <Button marginV-s1 label={t.do('section.navigation.button.back')} onPress={navv.goBack} />
+
+          <Section title={t.do('section.navigation.title')}>
+            <Button
+              marginV-s1
+              label={t.do('section.navigation.button.push')}
+              onPress={() => nav.push('Example', {value: randomNum()})}
+            />
+            <Button
+              marginV-s1
+              label={t.do('section.navigation.button.show')}
+              onPress={() => nav.show('ExampleModal')}
+            />
+            <Button
+              marginV-s1
+              label={t.do('section.navigation.button.sharedTransition')}
+              // onPress={() => Alert.alert('future feature: shared transition')}
+              onPress={() => nav.push('ExampleShared')}
+            />
+          </Section>
+
+          {/* <Text textColor center>
+            localized with i18n-js
+          </Text> */}
+        </View>
+      </ScrollView>
+    </View>
+  );
+});

From 0eacc0f82e10350cd274fcd38673c73a27d2d10a Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 03:50:56 +0200
Subject: [PATCH 05/14] stID removed

---
 src/screens/main.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/main.tsx b/src/screens/main.tsx
index f77a7a0..839820d 100644
--- a/src/screens/main.tsx
+++ b/src/screens/main.tsx
@@ -56,7 +56,7 @@ export const Main: React.FC = observer(({}) => {
           </Section>
 
           <Section title="Reanimated 2">
-            <Reanimated2 stID="reanimated2" />
+            <Reanimated2 />
           </Section>
 
           <Section title="MobX">

From e3aa5d46af9f301cd5b7151c70f50de53ad6ae2f Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 03:51:12 +0200
Subject: [PATCH 06/14] push example shared navigator

---
 src/screens/main.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/main.tsx b/src/screens/main.tsx
index 839820d..659c5ec 100644
--- a/src/screens/main.tsx
+++ b/src/screens/main.tsx
@@ -51,7 +51,7 @@ export const Main: React.FC = observer(({}) => {
             <Button
               marginV-s1
               label={t.do('section.navigation.button.sharedTransition')}
-              onPress={() => Alert.alert('future feature: shared transition')}
+              onPress={() => nav.push('ExampleShared')}
             />
           </Section>
 

From 41faa7827c7a81a4d8ce04574011401b147f25ed Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 03:51:33 +0200
Subject: [PATCH 07/14] sharedTransitionScreens added

---
 src/screens/index.ts | 68 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 63 insertions(+), 5 deletions(-)

diff --git a/src/screens/index.ts b/src/screens/index.ts
index 71d7cb1..7b6875b 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -1,23 +1,44 @@
-import {ModalScreenLayouts, ScreenLayouts, TabScreenLayouts} from '../services/navigation/types';
+import {
+  ModalScreenLayouts,
+  ScreenLayouts,
+  SharedScreenLayouts,
+  SharedTransitionScreenLayouts,
+  TabScreenLayouts,
+} from '../services/navigation/types';
 
 import {Main} from './main';
 import {Settings} from './settings';
 import {Example} from './screen-sample';
-import {genRootNavigator, genStackNavigator, genTabNavigator} from '../services/navigation/help';
+import {
+  genRootNavigator,
+  genSharedStackNavigator,
+  genStackNavigator,
+  genTabNavigator,
+} from '../services/navigation/help';
+import {Shared} from './shared';
+import {SharedTo} from './sharedTo';
 
 // Describe your screens here
 export type Tabs = 'Main' | 'WIP' | 'Settings';
 export type Modal = 'ExampleModal';
+export type SharedTransitionScreen = 'Shared' | 'SharedTo';
+export type SharedScreen = 'ExampleShared';
 export type Screen = 'Main' | 'Example' | 'Settings';
 
 export type ModalProps = {
   ExampleModal: undefined;
 };
+export type SharedScreenProps = {
+  ExampleShared: undefined;
+};
 export type ScreenProps = {
   Main: undefined;
   Example: ExampleScreenProps;
   Settings: undefined;
-} & ModalProps;
+  Shared: undefined;
+  SharedTo: undefined;
+} & ModalProps &
+  SharedScreenProps;
 
 // Screens
 const screens: ScreenLayouts = {
@@ -43,8 +64,45 @@ const screens: ScreenLayouts = {
     }),
   },
 };
-const HomeStack = () => genStackNavigator([screens.Main, screens.Example]);
-const ExampleStack = () => genStackNavigator([screens.Example]);
+const sharedTransitionScreens: SharedTransitionScreenLayouts = {
+  Shared: {
+    name: 'Shared',
+    component: Shared,
+    options: () => ({
+      title: 'Shared Transition',
+    }),
+  },
+  SharedTo: {
+    name: 'SharedTo',
+    component: SharedTo,
+    options: () => ({
+      title: 'SharedTo Transition',
+    }),
+    sharedElements: (route, otherRoute, showing) => {
+      // const {item} = route.params;
+      // return [`item.${item.id}.photo`];
+      console.log('showing', showing);
+      return ['image', 'reanimated2'];
+    },
+  },
+};
+const ExampleSharedStack = () =>
+  genSharedStackNavigator([sharedTransitionScreens.Shared, sharedTransitionScreens.SharedTo]);
+const sharedScreens: SharedScreenLayouts = {
+  ExampleShared: {
+    name: 'ExampleShared',
+    component: ExampleSharedStack,
+    options: () => ({
+      title: 'Shared Transition',
+      headerLargeTitle: false,
+      headerTransparent: false,
+      headerBlurEffect: undefined,
+    }),
+  },
+};
+const HomeStack = () =>
+  genStackNavigator([screens.Main, screens.Example, sharedScreens.ExampleShared]);
+const ExampleStack = () => genStackNavigator([screens.Example, sharedScreens.ExampleShared]);
 const SettingsStack = () => genStackNavigator([screens.Settings]);
 const ExampleModalStack = () => genStackNavigator([screens.Main, screens.Example]);
 

From be6678372982381ee889a43afb7f4babbee28f88 Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 03:51:45 +0200
Subject: [PATCH 08/14] push ExampleShared

---
 src/screens/screen-sample.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/screen-sample.tsx b/src/screens/screen-sample.tsx
index 89648ac..904e7fd 100644
--- a/src/screens/screen-sample.tsx
+++ b/src/screens/screen-sample.tsx
@@ -40,7 +40,7 @@ export const Example: React.FC<Props> = observer(({route}) => {
               <Button
                 marginV-s1
                 label={t.do('section.navigation.button.sharedTransition')}
-                onPress={() => Alert.alert('future feature: shared transition')}
+                onPress={() => nav.push('ExampleShared')}
               />
             </View>
 

From 393d62ba7c58103f0f8565ca2c8a49a217f4a7ba Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 03:52:28 +0200
Subject: [PATCH 09/14] genSharedStackNavigator added

---
 src/services/navigation/help.tsx | 38 +++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/services/navigation/help.tsx b/src/services/navigation/help.tsx
index 1d5ff35..6eac5e0 100644
--- a/src/services/navigation/help.tsx
+++ b/src/services/navigation/help.tsx
@@ -1,26 +1,54 @@
 import React from 'react';
+import {useColorScheme} from 'react-native';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {createSharedElementStackNavigator} from 'react-navigation-shared-element';
+import {createStackNavigator} from '@react-navigation/stack';
 import merge from 'lodash/merge';
 
 import {screenDefaultOptions, tabBarDefaultOptions} from './options';
-import {GenStackNavigatorProps, GenTabNavigatorProps, ModalScreenInfo} from './types';
-import {useColorScheme} from 'react-native';
+import {
+  GenSharedStackNavigatorProps,
+  GenStackNavigatorProps,
+  GenTabNavigatorProps,
+  ModalScreenInfo,
+} from './types';
+import {NavigationContainer} from '@react-navigation/native';
+import {getNavigationTheme} from '../../utils/designSystem';
 
 export const genStackNavigator = (screens: GenStackNavigatorProps): JSX.Element => {
-  const Stack = createNativeStackNavigator();
+  const Stack = createNativeStackNavigator(); // createStackNavigator();
   const stackScreens = screens.map(it => (
     <Stack.Screen
       key={it.name}
       name={it.name}
       component={it.component}
-      options={merge(screenDefaultOptions(), it.options)}
+      options={merge(screenDefaultOptions(), it.options())}
     />
   ));
 
   return <Stack.Navigator>{stackScreens}</Stack.Navigator>;
 };
 
+export const genSharedStackNavigator = (screens: GenSharedStackNavigatorProps): JSX.Element => {
+  const Stack = createSharedElementStackNavigator();
+  const stackScreens = screens.map(it => (
+    <Stack.Screen
+      key={it.name}
+      name={it.name}
+      component={it.component}
+      options={merge({headerShown: false}, it.options())}
+      sharedElements={it.sharedElements}
+    />
+  ));
+
+  return (
+    <NavigationContainer independent theme={getNavigationTheme()}>
+      <Stack.Navigator>{stackScreens}</Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
 export const genTabNavigator = (screens: GenTabNavigatorProps): JSX.Element => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useColorScheme(); // needs to be here to correctly change tab bar appearance
@@ -42,7 +70,7 @@ export const genTabNavigator = (screens: GenTabNavigatorProps): JSX.Element => {
 };
 
 export const genRootNavigator = (app: React.FC, modals: ModalScreenInfo[]): JSX.Element => {
-  const RootStack = createNativeStackNavigator();
+  const RootStack = createNativeStackNavigator(); // createStackNavigator();
   const appScreen = <RootStack.Screen name="App" component={app} />;
   const modalScreens = modals.map(m => (
     <RootStack.Screen key={m.name} name={m.name} component={m.component} />

From f60056be92f01f1aa96bf16ba73b45248ee198eb Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 04:13:10 +0200
Subject: [PATCH 10/14] Update README.md

---
 README.md | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 9809643..c715413 100644
--- a/README.md
+++ b/README.md
@@ -144,7 +144,15 @@ const Screen = ({componentId}) => {
 
 #### Samples for new screens, services, stores and components.
 
-So you have one structure within the project. You can find them in corresponding folders. Just copy&paste it and make the necessary changes.
+So you have one structure within the project. You can find them in corresponding folders. Just copy&paste it and make the necessary changes. I think, it would be good to have it in [cli-rn](https://github.com/kanzitelli/cli-rn) to be automatically generated, so won't be need even for copy&paste.
+
+```bash
+# Future feature
+> cli-rn generate (screen|service|store|component) --name SName # maybe something else
+> cli-rn g (sc|se|st|co) -n SName # short version
+```
+
+####
 
 ## Enhancements
 
@@ -155,7 +163,7 @@ There are still some things I would like to add to the starter:
 - [x] Passing props to a screen example
 - [x] Constants: add Dimensions
 - [x] MMKV (AsyncStorage) stores persisting example
-- [ ] Shared transitions — [IjzerenHein/react-navigation-shared-element](https://github.com/IjzerenHein/react-navigation-shared-element)
+- [ WIP ] Shared transitions — [IjzerenHein/react-navigation-shared-element](https://github.com/IjzerenHein/react-navigation-shared-element)
 
 #### Production
 
@@ -182,7 +190,7 @@ Feel free to open an issue for suggestions.
 - Expo + React Native Navigation? Yes! - [Medium](https://kanzitelli.medium.com/expo-react-native-navigation-yes-ebda0cbfa4b1), [Dev.to](https://dev.to/kanzitelli/expo-react-native-navigation-1pll)
 - cli-rn — making RN app developing experience as smooth as possible - [Medium](https://kanzitelli.medium.com/cli-rn-making-rn-app-developing-experience-as-smooth-as-possible-1022aae3a0d3), [Dev.to](https://dev.to/kanzitelli/cli-rn-making-rn-app-developing-experience-as-smooth-as-possible-4e98)
 
-### Apps in production
+### Apps in production (from (rnn-starter)[https://github.com/kanzitelli/rnn-starter])
 
 - Wallpapers App - [Twitter](https://twitter.com/kanzitelli/status/1408192827155177472?s=20), App Store soon
 - Rabbit App. Lite Reddit client - [Github](https://github.com/kanzitelli/rabbit-app), [App Store](https://apps.apple.com/ru/app/rabbit-app-lite-reddit-client/id1535084154), [Google Play](https://play.google.com/store/apps/details?id=io.batyr.rabbitapp)

From 1f43b7f445e3ffb298220457b67a8fef48e12029 Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 04:17:25 +0200
Subject: [PATCH 11/14] more info added

---
 README.md | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index c715413..63cc6aa 100644
--- a/README.md
+++ b/README.md
@@ -144,7 +144,8 @@ const Screen = ({componentId}) => {
 
 #### Samples for new screens, services, stores and components.
 
-So you have one structure within the project. You can find them in corresponding folders. Just copy&paste it and make the necessary changes. I think, it would be good to have it in [cli-rn](https://github.com/kanzitelli/cli-rn) to be automatically generated, so won't be need even for copy&paste.
+So you have one structure within the project. You can find them in corresponding folders. Just copy&paste it and make the necessary changes.
+Future Feature: I think, it would be good to have it automatically generated by [cli-rn](https://github.com/kanzitelli/cli-rn), so won't be need even for copy&paste.
 
 ```bash
 # Future feature
@@ -152,7 +153,10 @@ So you have one structure within the project. You can find them in corresponding
 > cli-rn g (sc|se|st|co) -n SName # short version
 ```
 
-####
+#### [WIP] Shared Element Transition (repo - [IjzerenHein/react-navigation-shared-element](https://github.com/IjzerenHein/react-navigation-shared-element))
+
+It doesn’t use native api, it just [createSharedElementStackNavigator()](https://github.com/kanzitelli/rn-starter/blob/feature/shared-transition/src/services/navigation/help.tsx#L34) with [two screens](https://github.com/kanzitelli/rn-starter/blob/feature/shared-transition/src/screens/index.ts#L67) and [sets this Navigator](https://github.com/kanzitelli/rn-starter/blob/feature/shared-transition/src/screens/index.ts#L67) as a React Navigation’s native stack’s screen.
+It was created as an experiment to still have great performance of [native screens](https://github.com/software-mansion/react-native-screens) and can add some fancy shared transitions by [IjzerenHein/react-navigation-shared-element](https://github.com/IjzerenHein/react-navigation-shared-element).
 
 ## Enhancements
 
@@ -169,7 +173,7 @@ There are still some things I would like to add to the starter:
 
 - [ ] Auth flow
 - [ ] Fast Image — [DylanVann/react-native-fast-image](https://github.com/DylanVann/react-native-fast-image)
-- [ ] Notifications — [wix/react-native-notifications](https://github.com/wix/react-native-notifications)
+- [ ] Notifications — [wix/react-native-notifications](https://github.com/wix/react-native-notifications) or/and [invertase/notifee](https://github.com/invertase/notifee)
 - [ ] E2E tests — [wix/Detox](https://github.com/wix/Detox)
 - [ ] Permissions — [zoontek/react-native-permissions](https://github.com/zoontek/react-native-permissions)
 - [ ] FB SDK — [thebergamo/react-native-fbsdk-next](https://github.com/thebergamo/react-native-fbsdk-next)
@@ -190,7 +194,7 @@ Feel free to open an issue for suggestions.
 - Expo + React Native Navigation? Yes! - [Medium](https://kanzitelli.medium.com/expo-react-native-navigation-yes-ebda0cbfa4b1), [Dev.to](https://dev.to/kanzitelli/expo-react-native-navigation-1pll)
 - cli-rn — making RN app developing experience as smooth as possible - [Medium](https://kanzitelli.medium.com/cli-rn-making-rn-app-developing-experience-as-smooth-as-possible-1022aae3a0d3), [Dev.to](https://dev.to/kanzitelli/cli-rn-making-rn-app-developing-experience-as-smooth-as-possible-4e98)
 
-### Apps in production (from (rnn-starter)[https://github.com/kanzitelli/rnn-starter])
+### Apps in production (from [rnn-starter](https://github.com/kanzitelli/rnn-starter))
 
 - Wallpapers App - [Twitter](https://twitter.com/kanzitelli/status/1408192827155177472?s=20), App Store soon
 - Rabbit App. Lite Reddit client - [Github](https://github.com/kanzitelli/rabbit-app), [App Store](https://apps.apple.com/ru/app/rabbit-app-lite-reddit-client/id1535084154), [Google Play](https://play.google.com/store/apps/details?id=io.batyr.rabbitapp)

From f7dce3237d1db8aa6b3c212eae909a936624e1e3 Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 04:20:58 +0200
Subject: [PATCH 12/14] more info added

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 63cc6aa..d8031f1 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,8 @@ If you need to rename the app, do the following (based on [react-native-rename](
 
 ## What's inside
 
-- [React Navigation (v6)](https://github.com/react-navigation/react-navigation) - routing and navigation for React Native apps. If you'd like to use [React Native Navigation](https://github.com/wix/react-native-navigation) by Wix, check out [rnn-starter](https://github.com/kanzitelli/rnn-starter).
+- [React Navigation (v6)](https://github.com/react-navigation/react-navigation) - routing and navigation for React Native apps (with [Native Stack](https://reactnavigation.org/docs/native-stack-navigator/)). If you'd like to use [React Native Navigation](https://github.com/wix/react-native-navigation) by Wix, check out [rnn-starter](https://github.com/kanzitelli/rnn-starter).
+- [React Native Screens](https://github.com/software-mansion/react-native-screens) - Native navigation primitives for React Native app
 - [RN UI lib](https://github.com/wix/react-native-ui-lib) - amazing Design System, UI toolset & components library for React Native. Dark Mode is implemented using this library.
 - [Reanimated 2](https://github.com/software-mansion/react-native-reanimated) - React Native's Animated library reimplemented.
 - [MobX](https://github.com/mobxjs/mobx) - simple, scalable state management, with [mobx-persist-store](https://github.com/quarrant/mobx-persist-store) for persisting your stores.

From 2636435f8475206d0b05f037a12e4d43676d4e4d Mon Sep 17 00:00:00 2001
From: Batr Kanzitelli <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 04:24:02 +0200
Subject: [PATCH 13/14] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d8031f1..d51eb83 100644
--- a/README.md
+++ b/README.md
@@ -157,7 +157,7 @@ Future Feature: I think, it would be good to have it automatically generated by
 #### [WIP] Shared Element Transition (repo - [IjzerenHein/react-navigation-shared-element](https://github.com/IjzerenHein/react-navigation-shared-element))
 
 It doesn’t use native api, it just [createSharedElementStackNavigator()](https://github.com/kanzitelli/rn-starter/blob/feature/shared-transition/src/services/navigation/help.tsx#L34) with [two screens](https://github.com/kanzitelli/rn-starter/blob/feature/shared-transition/src/screens/index.ts#L67) and [sets this Navigator](https://github.com/kanzitelli/rn-starter/blob/feature/shared-transition/src/screens/index.ts#L67) as a React Navigation’s native stack’s screen.
-It was created as an experiment to still have great performance of [native screens](https://github.com/software-mansion/react-native-screens) and can add some fancy shared transitions by [IjzerenHein/react-navigation-shared-element](https://github.com/IjzerenHein/react-navigation-shared-element).
+It was created as an experiment to combine great performance of [native screens](https://github.com/software-mansion/react-native-screens) and some fancy shared transitions by [IjzerenHein/react-navigation-shared-element](https://github.com/IjzerenHein/react-navigation-shared-element).
 
 ## Enhancements
 

From 5a7d4b8e50ebb381ecc08463e07361bd0ee0967f Mon Sep 17 00:00:00 2001
From: Batyr <kanzitdinov@gmail.com>
Date: Mon, 27 Sep 2021 04:55:58 +0200
Subject: [PATCH 14/14] Update README.md

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index d51eb83..4d618de 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,9 @@
 https://user-images.githubusercontent.com/4402166/134559538-a2801d52-7b8a-44a6-b12a-0cc1eafbb82b.MP4
 
+
+https://user-images.githubusercontent.com/4402166/134838456-69181346-93bc-4e25-8dfa-f629ed58c813.MOV
+
+
 This starter is a collection of libraries and approaches from my personal experience. No hard judgements ✌️
 
 For more information, check out [Why](#why) section.