[TMA 446] Create category (#144)

* Added welcome page

* Working code

* Small fix

* Some more cleanup

* Fixes

* Cleanup

* Fix again

* Use gradient for white bg as well

* Fixed type

1 files changed, 44 insertions, 0 deletions

diff --git a/src/routes/onboarding/Onboarding.tsx b/src/routes/onboarding/Onboarding.tsx
index 63a75934..a3d281f5 100644
--- a/src/routes/onboarding/Onboarding.tsx
+++ b/src/routes/onboarding/Onboarding.tsx
@@ -12,8 +12,11 @@ import {
   SocialMedia,
   PasswordResetRequest,
   PasswordReset,
+  WelcomeScreen,
+  CategorySelection,
 } from '../../screens';
 import {StackCardInterpolationProps} from '@react-navigation/stack';
+import TaggPopup from '../../components/common/TaggPopup';
 
 const forFade = ({current}: StackCardInterpolationProps) => ({
   cardStyle: {
@@ -42,6 +45,47 @@ const Onboarding: React.FC = () => {
         }}
       />
       <OnboardingStack.Screen
+        name="WelcomeScreen"
+        component={WelcomeScreen}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <OnboardingStack.Screen
+        name="CategorySelection"
+        component={CategorySelection}
+        options={{
+          gestureEnabled: false,
+        }}
+      />
+      <OnboardingStack.Screen
+        name="TaggPopup"
+        component={TaggPopup}
+        options={{
+          gestureEnabled: false,
+          cardStyle: {
+            backgroundColor: 'transparent',
+          },
+          cardOverlayEnabled: true,
+          cardStyleInterpolator: ({current: {progress}}) => ({
+            cardStyle: {
+              opacity: progress.interpolate({
+                inputRange: [0, 0.5, 0.9, 1],
+                outputRange: [0, 0.25, 0.7, 1],
+              }),
+            },
+            overlayStyle: {
+              backgroundColor: '#505050',
+              opacity: progress.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, 0.9],
+                extrapolate: 'clamp',
+              }),
+            },
+          }),
+        }}
+      />
+      <OnboardingStack.Screen
         name="PasswordReset"
         component={PasswordReset}
         options={{