2 files changed, 40 insertions, 0 deletions
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index f3aa7fc6..9771c1e6 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -66,6 +66,9 @@ export type MainStackParams = {
     screenType: ScreenType;
     momentCategory: string;
   };
+  AnimatedTutorial: {
+    screenType: ScreenType;
+  };
 };
 
 export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 99446432..0b762dff 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -6,6 +6,7 @@ import {StyleSheet, Text} from 'react-native';
 import {normalize} from 'react-native-elements';
 import BackIcon from '../../assets/icons/back-arrow.svg';
 import {
+  AnimatedTutorial,
   CaptionScreen,
   CategorySelection,
   CreateCustomCategory,
@@ -70,6 +71,34 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     }
   })();
 
+  const modalStyle: StackNavigationOptions = {
+    cardStyle: {backgroundColor: 'rgba(80,80,80,0.9)'},
+    gestureDirection: 'vertical',
+    cardOverlayEnabled: true,
+    cardStyleInterpolator: ({current: {progress}}) => ({
+      cardStyle: {
+        opacity: progress.interpolate({
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.25, 0.7, 1],
+        }),
+      },
+    }),
+  };
+
+  const tutorialModalStyle: StackNavigationOptions = {
+    cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
+    gestureDirection: 'vertical',
+    cardOverlayEnabled: true,
+    cardStyleInterpolator: ({current: {progress}}) => ({
+      cardStyle: {
+        opacity: progress.interpolate({
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.25, 0.7, 1],
+        }),
+      },
+    }),
+  };
+
   return (
     <MainStack.Navigator
       screenOptions={{
@@ -115,6 +144,14 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         />
       )}
       <MainStack.Screen
+        name="AnimatedTutorial"
+        component={AnimatedTutorial}
+        options={{
+          ...tutorialModalStyle,
+        }}
+        initialParams={{screenType}}
+      />
+      <MainStack.Screen
         name="CaptionScreen"
         component={CaptionScreen}
         options={{