Added new screen to navigator

2 files changed, 26 insertions, 1 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 37f9bef8..2531eec7 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -3,6 +3,7 @@ import {RouteProp} from '@react-navigation/native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React, {useState} from 'react';
 import {
+  AnimatedTutorial,
   CaptionScreen,
   CategorySelection,
   CreateCustomCategory,
@@ -81,7 +82,20 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     }),
   };
 
-  console.log('screenType: ', screenType);
+  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={{
@@ -134,6 +148,14 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         />
       )}
       <MainStack.Screen
+        name="AnimatedTutorial"
+        component={AnimatedTutorial}
+        options={{
+          ...tutorialModalStyle,
+        }}
+        initialParams={{screenType}}
+      />
+      <MainStack.Screen
         name="CaptionScreen"
         component={CaptionScreen}
         options={{...modalStyle, gestureEnabled: false}}