add onboarding

package.json

@@ -39,6 +39,7 @@
     "react": "17.0.1",
     "react-i18next": "^11.8.4",
     "react-native": "0.63.4",
+    "react-native-app-intro-slider": "^4.0.4",
     "react-native-circular-progress": "^1.3.7",
     "react-native-dotenv": "^2.5.3",
     "react-native-dropdown-picker": "^5.1.21",

src/navigation/mainTabs.tsx

@@ -11,6 +11,7 @@ import Account from '../images/navigation/account.svg';
 import Quests from '../images/navigation/quests.svg';
 import TabBar from '../components/TabBar';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useAuthContext } from '../contexts/AuthProvider';
 
 /**
  * Type with params of screens and their props in BottomTabNavigator
@@ -36,6 +37,7 @@ const Icon = styled.View<{color: string}>`
  * Functional component for implementing navigation between screens
  */
 export default function MainTabsNavigation(): React.ReactElement {
+  const authContext = useAuthContext();
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
 
@@ -76,6 +78,7 @@ export default function MainTabsNavigation(): React.ReactElement {
         <Tab.Screen
           name="Profile"
           options={{
+            tabBarVisible: !authContext.state.isFirstRegistration,
             title: t('profile.title').toLowerCase(),
             tabBarIcon: ({ color }): React.ReactElement => {
               return <Icon color={color} as={Account}/>;

src/navigation/profileStack.tsx

@@ -15,6 +15,7 @@ import FriendAddingScreenWithSuspense from '../screens/FriendsAdding';
 import ChangeUsernameScreen from '../screens/ChangeUsername';
 import ChangePasswordScreen from '../screens/ChangePassword';
 import AchievementsScreenWithSuspense from '../screens/Achievements';
+import OnboardingSlider from '../onboarding/OnboardingSlider';
 
 /**
  * Type with params of screens and their props in ProfileStackScreen
@@ -94,6 +95,11 @@ export type ProfileStackParamList = {
    * FriendAdding screen props
    */
   FriendAdding: undefined;
+
+  /**
+   * Onboarding stack props
+   */
+  Onboarding: undefined;
 };
 
 const ProfileStack = createStackNavigator<ProfileStackParamList>();
@@ -105,8 +111,13 @@ export default function ProfileStackNavigation(): React.ReactElement {
   const authContext = useAuthContext();
 
   return (
-    <ProfileStack.Navigator initialRouteName={'Login'} screenOptions={{ headerShown: false }}>
-      {authContext.state.isFirstRegistration && <ProfileStack.Screen name="ChangeUsername" component={ChangeUsernameScreen}/>}
+    <ProfileStack.Navigator initialRouteName={'ChangeUsername'} screenOptions={{ headerShown: false }}>
+      {authContext.state.isFirstRegistration &&
+        <>
+          <ProfileStack.Screen name="ChangeUsername" component={ChangeUsernameScreen}/>
+          <ProfileStack.Screen name="Onboarding" component={OnboardingSlider}/>
+        </>
+      }
       <ProfileStack.Screen name="Main" component={ProfileScreen}/>
       <ProfileStack.Screen name="ChangePassword" component={ChangePasswordScreen}/>
       <ProfileStack.Screen name="Settings" component={SettingsScreen}/>

src/onboarding/OnboardingSlider.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import AppIntroSlider from 'react-native-app-intro-slider';
+import MainInfo from './screens/MainInfo';
+import AboutQuests from './screens/AboutQuests';
+import AboutGeolocation from './screens/AboutGeolocation';
+import QuestPassing from './screens/QuestPassing';
+import AboutModalize from './screens/AboutModalize';
+import Colors from '../styles/colors';
+import styled from 'styled-components/native';
+import { StyledFonts } from '../styles/textStyles';
+import { useAuthContext } from '../contexts/AuthProvider';
+import Back from '../images/back.svg';
+
+const data = [
+  {
+    index: 1,
+    component: <MainInfo/>,
+  },
+  {
+    index: 2,
+    component: <AboutQuests/>,
+  },
+  {
+    index: 3,
+    component: <AboutGeolocation/>,
+  },
+  {
+    index: 4,
+    component: <QuestPassing/>,
+  },
+  {
+    index: 5,
+    component: <AboutModalize/>,
+  },
+];
+
+type Item = typeof data[0];
+
+const dot = {
+  backgroundColor: 'rgba(104, 198, 223, 0.3)',
+  width: 15,
+  height: 15,
+  borderRadius: 8,
+};
+
+const activeDot = {
+  backgroundColor: Colors.Blue,
+  width: 15,
+  height: 15,
+  borderRadius: 8,
+};
+
+const DoneButton = styled.TouchableOpacity`
+  padding: 13px;
+  border-radius: 30px;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const ButtonText = styled.Text`
+  ${StyledFonts.uiWebMedium};
+  font-size: 16px;
+  color: ${Colors.DarkBlue};
+`;
+
+const NextArrow = styled(Back)`
+  color: ${Colors.DarkBlue};
+  transform: rotate(180deg);
+  margin-left: 10px;
+`;
+
+/**
+ *
+ */
+export default function OnboardingSlider(): React.ReactElement {
+  const authContext = useAuthContext();
+
+  const _renderItem = ({ item }: {item: Item}): React.ReactElement => {
+    return (
+      <>
+        {item.component}
+      </>
+    );
+  };
+
+  const _renderDoneButton = (): React.ReactElement => {
+    return (
+      <DoneButton onPress={() => authContext.actions.setFirstRegistrationFalse()}>
+        <ButtonText>Done</ButtonText>
+        <NextArrow/>
+      </DoneButton>
+    );
+  };
+
+  const _keyExtractor = (item: Item): string => item.index.toString();
+
+  return (
+    <AppIntroSlider
+      data={data}
+      renderItem={_renderItem}
+      dotStyle={dot}
+      activeDotStyle={activeDot}
+      showNextButton={false}
+      renderDoneButton={_renderDoneButton}
+      keyExtractor={_keyExtractor}
+    />
+  );
+}

src/onboarding/components/OnboardingBody.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import Colors from '../../styles/colors';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Dimensions } from 'react-native';
+
+const Body = styled.View<{bottomOffset: number}>`
+  background-color: ${Colors.Background};
+  flex: 1;
+  padding: ${props => 60 + props.bottomOffset}px 15px;
+  justify-content: space-between;
+`;
+
+const PatternView = styled.View<{pos: 'top' | 'bottom'}>`
+  position: absolute;
+  ${props => props.pos === 'top' ? 'top: 0;' : 'bottom: 0;'}
+  width: ${Dimensions.get('screen').width}px;
+  aspect-ratio: ${375 / 218};
+`;
+
+const Pattern = styled.Image`
+  width: 100%;
+  height: 100%;
+`;
+
+interface OnboardingBodyProps {
+  /**
+   * If it is first screen of onboarding
+   */
+  isFirstScreen?: boolean,
+
+  /**
+   * Children
+   */
+  children: React.ReactElement[] | React.ReactElement,
+}
+
+/**
+ * Wrapper for onboarding screens
+ *
+ * @param props - props for component rendering
+ */
+export default function OnboardingBody({ isFirstScreen, children }: OnboardingBodyProps): React.ReactElement {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <Body bottomOffset={insets.bottom}>
+      <PatternView pos={'top'}>
+        <Pattern
+          source={isFirstScreen ? require('../../images/onboardingHighTop.png') : require('../../images/onboardingTop.png')}
+        />
+      </PatternView>
+      {children}
+      <PatternView pos={'bottom'}>
+        <Pattern
+          source={isFirstScreen ? require('../../images/onboardingHighBottom.png') : require('../../images/onboardingBottom.png')}
+        />
+      </PatternView>
+    </Body>
+  );
+}

src/onboarding/components/QuestType.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import Colors from '../../styles/colors';
+import { StyledFonts } from '../../styles/textStyles';
+
+const Row = styled.View`
+  flex-direction: row;
+  align-self: stretch;
+  align-items: center;
+`;
+
+const IconView = styled.View`
+  background-color: ${Colors.Blue};
+  width: 60px;
+  aspect-ratio: 1;
+  border-radius: 30px;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
+`;
+
+const TextView = styled.View`
+  flex: 1;
+`;
+
+const Title = styled.Text`
+  ${StyledFonts.uiWebMedium};
+  font-size: 22px;
+  line-height: 22px;
+  color: ${Colors.Black};
+`;
+
+const Description = styled.Text`
+  ${StyledFonts.uiWebRegular};
+  font-size: 16px;
+  line-height: 19px;
+  color: ${Colors.Black};
+`;
+
+interface QuestTypeProps {
+  /**
+   * Icon of current type
+   */
+  icon: React.ReactElement,
+
+  /**
+   * Name of current type
+   */
+  title: string,
+
+  /**
+   * Information about current type
+   */
+  description: string,
+}
+
+/**
+ * Block with information about specific type of quests
+ *
+ * @param props - props for component rendering
+ */
+export default function QuestType({ icon, title, description }: QuestTypeProps): React.ReactElement {
+  return (
+    <Row>
+      <IconView>{icon}</IconView>
+      <TextView>
+        <Title>{title}</Title>
+        <Description>{description}</Description>
+      </TextView>
+    </Row>
+  );
+}

src/onboarding/components/ScreenInfo.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { StyledFonts } from '../../styles/textStyles';
+import Colors from '../../styles/colors';
+import styled from 'styled-components/native';
+import { View } from 'react-native';
+
+const Title = styled.Text`
+  ${StyledFonts.roboto};
+  font-size: 28px;
+  line-height: 28px;
+  color: ${Colors.Black};
+  margin: 20px 0 15px;
+  align-self: stretch;
+`;
+
+const Description = styled.Text`
+  ${StyledFonts.uiWebRegular};
+  font-size: 22px;
+  line-height: 22px;
+  color: ${Colors.Black};
+  align-self: stretch;
+`;
+
+interface ScreenInfoProps {
+  /**
+   * Title
+   */
+  title: string,
+
+  /**
+   * Information
+   */
+  description: string,
+}
+
+/**
+ * Block with main information on screen
+ *
+ * @param props - props for component rendering
+ */
+export default function ScreenInfo({ title, description }: ScreenInfoProps): React.ReactElement {
+  return (
+    <View>
+      <Title>{title}</Title>
+      <Description>{description}</Description>
+    </View>
+  );
+}

src/onboarding/screens/AboutGeolocation.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import OnboardingBody from '../components/OnboardingBody';
+import MockPhone from '../../images/mockPhoneWithGeo.svg';
+import { Dimensions } from 'react-native';
+import ScreenInfo from '../components/ScreenInfo';
+import styled from 'styled-components/native';
+
+const MockPhoneView = styled.View`
+  flex: 1;
+  max-height: ${Dimensions.get('screen'). width * 400 / 375 + 50}px;
+  margin-bottom: 20px;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+/**
+ * Screen with information about geolocation
+ */
+export default function AboutGeolocation(): React.ReactElement {
+  const mockPhoneWidth = Dimensions.get('screen').width;
+  const [mockPhoneHeight, setMockPhoneHeight] = useState(mockPhoneWidth * 400 / 375);
+
+  return (
+    <OnboardingBody>
+      <MockPhoneView onLayout={(event) => event.nativeEvent.layout.height > 0 && setMockPhoneHeight(Math.min(mockPhoneHeight, event.nativeEvent.layout.height))}>
+        <MockPhone width={mockPhoneWidth} height={mockPhoneHeight}/>
+      </MockPhoneView>
+      <ScreenInfo title={'Геолокация'} description={'Во время прохождения квестов и маршрутов необходимо перемещаться между локациями.'}/>
+    </OnboardingBody>
+  );
+}