info refactor

Route.tsx

@@ -58,10 +58,18 @@ import setupDatabaseAndSync from 'src/database';
 import { MenuDrawer } from 'src/components';
 import { setFastestMapHost } from 'src/constants';
 import { determineFastestServer } from 'src/utils/determineServer';
-import InfoScreen from 'src/screens/InfoScreen';
-import JoinInfoScreen from 'src/screens/JoinInfoScreen';
-import DiscoverInfoScreen from 'src/screens/DiscoverInfoScreen';
-import TravelsInfoScreen from 'src/screens/TravelsInfoScreen';
+import {
+  InfoScreen,
+  PlanInfoScreen,
+  JoinInfoScreen,
+  DiscoverInfoScreen,
+  FirstStepsInfoScreen,
+  CountriesInfoScreen,
+  RegionsInfoScreen,
+  EarthInfoScreen,
+  DareInfoScreen,
+  TripsInfoScreen
+} from 'src/screens/InfoScreens';
 
 const ScreenStack = createStackNavigator();
 const BottomTab = createBottomTabNavigator();
@@ -77,7 +85,7 @@ const Route = () => {
     'redhat-600': require('./assets/fonts/RedHatDisplay-SemiBold-600.ttf'),
     'montserrat-700': require('./assets/fonts/Montserrat-Bold.ttf'),
     'montserrat-600': require('./assets/fonts/Montserrat-SemiBold.ttf'),
-    'montserrat-400': require('./assets/fonts/Montserrat-Regular.ttf'),
+    'montserrat-400': require('./assets/fonts/Montserrat-Regular.ttf')
   });
   const [dbLoaded, setDbLoaded] = useState(false);
   const [serverReady, setServerReady] = useState(false);
@@ -116,7 +124,7 @@ const Route = () => {
 
   const checkTokenAndUpdate = async () => {
     const storedToken = storage.get('deviceToken', StoreType.STRING);
-    const currentToken = (await Notifications.getDevicePushTokenAsync());
+    const currentToken = await Notifications.getDevicePushTokenAsync();
 
     if (storedToken && currentToken?.data !== storedToken) {
       storage.set('deviceToken', currentToken.data);
@@ -142,7 +150,7 @@ const Route = () => {
         android: {
           height: 58
         }
-      }),
+      })
     },
     cardStyle: { backgroundColor: 'white' },
     unmountOnBlur: true
@@ -152,9 +160,7 @@ const Route = () => {
 
   function MapDrawerNavigator() {
     return (
-      <MapDrawer.Navigator
-        drawerContent={(props) => <MenuDrawer {...props} />}
-      >
+      <MapDrawer.Navigator drawerContent={(props) => <MenuDrawer {...props} />}>
         <MapDrawer.Screen
           options={{ headerShown: false }}
           name="MapDrawerScreen"
@@ -166,7 +172,7 @@ const Route = () => {
 
   return (
     <ScreenStack.Navigator
-      screenOptions={{ headerShown: false, cardStyle: { backgroundColor: 'white' }}}
+      screenOptions={{ headerShown: false, cardStyle: { backgroundColor: 'white' } }}
       initialRouteName={token ? NAVIGATION_PAGES.IN_APP : NAVIGATION_PAGES.WELCOME}
     >
       <ScreenStack.Screen name={NAVIGATION_PAGES.WELCOME} component={WelcomeScreen} />
@@ -181,7 +187,16 @@ const Route = () => {
       <ScreenStack.Screen name={NAVIGATION_PAGES.INFO} component={InfoScreen} />
       <ScreenStack.Screen name={NAVIGATION_PAGES.JOIN_INFO} component={JoinInfoScreen} />
       <ScreenStack.Screen name={NAVIGATION_PAGES.DISCOVER_INFO} component={DiscoverInfoScreen} />
-      <ScreenStack.Screen name={NAVIGATION_PAGES.TRAVELS_INFO} component={TravelsInfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.PLAN_INFO} component={PlanInfoScreen} />
+      <ScreenStack.Screen
+        name={NAVIGATION_PAGES.FIRST_STEPS_INFO}
+        component={FirstStepsInfoScreen}
+      />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.COUNTRIES_INFO} component={CountriesInfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.DARE_INFO} component={DareInfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.REGIONS_INFO} component={RegionsInfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.TRIPS_INFO} component={TripsInfoScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.EARTH_INFO} component={EarthInfoScreen} />
       <ScreenStack.Screen name={NAVIGATION_PAGES.IN_APP}>
         {() => (
           <BottomTab.Navigator screenOptions={screenOptions}>
@@ -240,8 +255,14 @@ const Route = () => {
                     component={StatisticsListScreen}
                   />
                   <ScreenStack.Screen name={NAVIGATION_PAGES.TRIUMPHS} component={TriumphsScreen} />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.SERIES_RANKING} component={SeriesRankingScreen} />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.SERIES_RANKING_LIST} component={SeriesRankingListScreen} />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.SERIES_RANKING}
+                    component={SeriesRankingScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.SERIES_RANKING_LIST}
+                    component={SeriesRankingListScreen}
+                  />
                   <ScreenStack.Screen
                     name={NAVIGATION_PAGES.USERS_MAP}
                     component={UsersMapScreen}
@@ -263,12 +284,27 @@ const Route = () => {
                   />
                   <ScreenStack.Screen name={NAVIGATION_PAGES.EARTH} component={EarthScreen} />
                   <ScreenStack.Screen name={NAVIGATION_PAGES.PHOTOS} component={PhotosScreen} />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.MORE_PHOTOS} component={MorePhotosScreen} />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_PHOTO} component={AddPhotoScreen} />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.MORE_PHOTOS}
+                    component={MorePhotosScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.ADD_PHOTO}
+                    component={AddPhotoScreen}
+                  />
                   <ScreenStack.Screen name={NAVIGATION_PAGES.TRIPS} component={TripsScreen} />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_TRIP} component={AddNewTripScreen} />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_REGIONS} component={AddRegionsScreen} />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.COUNTRIES} component={CountriesScreen} />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.ADD_TRIP}
+                    component={AddNewTripScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.ADD_REGIONS}
+                    component={AddRegionsScreen}
+                  />
+                  <ScreenStack.Screen
+                    name={NAVIGATION_PAGES.COUNTRIES}
+                    component={CountriesScreen}
+                  />
                   <ScreenStack.Screen name={NAVIGATION_PAGES.REGIONS} component={RegionsScreen} />
                   <ScreenStack.Screen name={NAVIGATION_PAGES.DARE} component={DareScreen} />
                 </ScreenStack.Navigator>

src/components/MenuDrawer/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, Image, Linking } from 'react-native';
+import { View, Image, Linking, Text } from 'react-native';
 import { CommonActions, useNavigation } from '@react-navigation/native';
 
 import { WarningModal } from '../WarningModal';
@@ -14,6 +14,7 @@ import MailIcon from '../../../assets/icons/mail.svg';
 import DocumentIcon from '../../../assets/icons/document.svg';
 import ExitIcon from '../../../assets/icons/exit.svg';
 import UserXMark from '../../../assets/icons/user-xmark.svg';
+import { FASTEST_MAP_HOST } from 'src/constants';
 
 export const MenuDrawer = (props: any) => {
   const { mutate: deleteUser } = useDeleteUserMutation();
@@ -97,6 +98,13 @@ export const MenuDrawer = (props: any) => {
                 )
               }
             />
+            <View style={{ gap: 6, marginTop: 16 }}>
+              <Text style={styles.bottomText}>Version 2.0</Text>
+              <Text style={styles.bottomText}>
+                Map server:{'\n'}
+                {FASTEST_MAP_HOST}
+              </Text>
+            </View>
           </View>
         ) : (
           <View style={styles.bottomMenu} />

src/components/MenuDrawer/styles.tsx

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { Colors } from 'src/theme';
 
 export const styles = StyleSheet.create({
   container: {
@@ -17,5 +18,6 @@ export const styles = StyleSheet.create({
   logo: {
     width: 150,
     height: 150
-  }
+  },
+  bottomText: { fontSize: 11, color: Colors.DARK_BLUE, fontWeight: '600' }
 });

src/screens/InAppScreens/MapScreen/index.tsx

@@ -782,8 +782,8 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
           ) : null}
 
           <TouchableOpacity
-            style={styles.cornerInfoButton}
-            onPress={() => navigation.navigate(NAVIGATION_PAGES.DISCOVER_INFO)}
+            style={[styles.cornerButton, { top: 115, right: 16 }]}
+            onPress={() => navigation.navigate(NAVIGATION_PAGES.INFO)}
           >
             <InfoIcon />
           </TouchableOpacity>

src/screens/InAppScreens/MapScreen/style.tsx

@@ -25,22 +25,6 @@ export const styles = StyleSheet.create({
     shadowRadius: 8,
     elevation: 5,
   },
-  cornerInfoButton: {
-    position: 'absolute',
-    backgroundColor: Colors.WHITE,
-    padding: 12,
-    width: 34,
-    height: 34,
-    borderRadius: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: 'rgba(33, 37, 41, 0.12)',
-    shadowOffset: { width: 0, height: 4 },
-    shadowRadius: 8,
-    elevation: 5,
-    top: 115,
-    right: 23,
-  },
   topLeftButton: {
     top: 52,
     left: 16,

src/screens/InAppScreens/TravelsScreen/CountriesScreen/index.tsx

@@ -153,7 +153,7 @@ const CountriesScreen = () => {
         label="Countries"
         rightElement={
           <TouchableOpacity
-            onPress={() => navigation.navigate(NAVIGATION_PAGES.TRAVELS_INFO as never)}
+            onPress={() => navigation.navigate(NAVIGATION_PAGES.COUNTRIES_INFO as never)}
             style={{ width: 30 }}
           >
             <InfoIcon />

src/screens/InAppScreens/TravelsScreen/DareScreen/index.tsx

@@ -120,7 +120,7 @@ const DareScreen = () => {
         label="DARE"
         rightElement={
           <TouchableOpacity
-            onPress={() => navigation.navigate(NAVIGATION_PAGES.TRAVELS_INFO as never)}
+            onPress={() => navigation.navigate(NAVIGATION_PAGES.DARE_INFO as never)}
             style={{ width: 30 }}
           >
             <InfoIcon />

src/screens/InAppScreens/TravelsScreen/EarthScreen/index.tsx

@@ -157,7 +157,7 @@ const EarthScreen = () => {
           label={'My Earth'}
           rightElement={
             <TouchableOpacity
-              onPress={() => navigation.navigate(NAVIGATION_PAGES.TRAVELS_INFO as never)}
+              onPress={() => navigation.navigate(NAVIGATION_PAGES.EARTH_INFO as never)}
               style={{ width: 30 }}
             >
               <InfoIcon />

src/screens/InAppScreens/TravelsScreen/RegionsScreen/index.tsx

@@ -199,7 +199,7 @@ const RegionsScreen = () => {
         label="Regions"
         rightElement={
           <TouchableOpacity
-            onPress={() => navigation.navigate(NAVIGATION_PAGES.TRAVELS_INFO as never)}
+            onPress={() => navigation.navigate(NAVIGATION_PAGES.REGIONS_INFO as never)}
             style={{ width: 30 }}
           >
             <InfoIcon />

src/screens/InAppScreens/TravelsScreen/TripsScreen/index.tsx

@@ -79,7 +79,7 @@ const TripsScreen = ({ route }: { route: any }) => {
         label="Trips"
         rightElement={
           <TouchableOpacity
-            onPress={() => navigation.navigate(NAVIGATION_PAGES.TRAVELS_INFO as never)}
+            onPress={() => navigation.navigate(NAVIGATION_PAGES.TRIPS_INFO as never)}
             style={{ width: 30 }}
           >
             <InfoIcon />

src/screens/InAppScreens/TravelsScreen/index.tsx

@@ -58,7 +58,7 @@ const TravelsScreen = () => {
         <View style={{ width: 30 }} />
         <Text style={styles.title}>Travels</Text>
         <TouchableOpacity
-          onPress={() => navigation.navigate(NAVIGATION_PAGES.TRAVELS_INFO as never)}
+          onPress={() => navigation.navigate(NAVIGATION_PAGES.DISCOVER_INFO as never)}
           style={{ width: 30 }}
         >
           <InfoIcon />

src/screens/InfoScreens/CountriesInfoScreen/index.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { ImageBackground, View, Text, ScrollView } from 'react-native';
+import type { NavigationProp } from '@react-navigation/native';
+
+import { Header, PageWrapper } from '../../../components';
+import { styles } from './styles';
+
+type Props = {
+  navigation: NavigationProp<any>;
+};
+
+export const CountriesInfoScreen: FC<Props> = ({ navigation }) => {
+  return (
+    <PageWrapper>
+      <Header label={'Countries'} />
+      <ImageBackground
+        style={styles.background}
+        source={require('../../../../assets/images/nm-background.png')}
+      >
+        <ScrollView
+          style={styles.wrapper}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.contentContainerStyle}
+        >
+        </ScrollView>
+      </ImageBackground>
+    </PageWrapper>
+  );
+};

src/screens/InfoScreens/CountriesInfoScreen/styles.tsx

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../theme';
+
+export const styles = StyleSheet.create({
+  background: { height: '100%', flex: 1 },
+  contentContainerStyle: { gap: 16, paddingBottom: 16 },
+  wrapper: {
+    display: 'flex',
+    height: '100%'
+  }
+});

src/screens/InfoScreens/DareInfoScreen/index.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { ImageBackground, View, Text, ScrollView } from 'react-native';
+import type { NavigationProp } from '@react-navigation/native';
+
+import { Header, PageWrapper } from '../../../components';
+import { styles } from './styles';
+
+type Props = {
+  navigation: NavigationProp<any>;
+};
+
+export const DareInfoScreen: FC<Props> = ({ navigation }) => {
+  return (
+    <PageWrapper>
+      <Header label={'DARE'} />
+      <ImageBackground
+        style={styles.background}
+        source={require('../../../../assets/images/nm-background.png')}
+      >
+        <ScrollView
+          style={styles.wrapper}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.contentContainerStyle}
+        >
+        </ScrollView>
+      </ImageBackground>
+    </PageWrapper>
+  );
+};

src/screens/InfoScreens/DareInfoScreen/styles.tsx

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../theme';
+
+export const styles = StyleSheet.create({
+  background: { height: '100%', flex: 1 },
+  contentContainerStyle: { gap: 16, paddingBottom: 16 },
+  wrapper: {
+    display: 'flex',
+    height: '100%'
+  }
+});

src/screens/DiscoverInfoScreen/index.tsx → src/screens/InfoScreens/DiscoverInfoScreen/index.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { ImageBackground, View, Text, Image, ScrollView } from 'react-native';
 import type { NavigationProp } from '@react-navigation/native';
 
-import { Header, PageWrapper } from '../../components/';
+import { Header, PageWrapper } from '../../../components';
 import { styles } from './styles';
 import { Colors } from 'src/theme';
 import TravellersIcon from 'assets/icons/bottom-navigation/travellers.svg';
@@ -11,24 +11,24 @@ type Props = {
   navigation: NavigationProp<any>;
 };
 
-const DiscoverInfoScreen: FC<Props> = ({ navigation }) => {
+export const DiscoverInfoScreen: FC<Props> = ({ navigation }) => {
   return (
     <PageWrapper>
       <Header label={'Discover the World'} />
       <ImageBackground
-        style={{ height: '100%' }}
-        source={require('../../../assets/images/nm-background.png')}
+        style={styles.background}
+        source={require('../../../../assets/images/nm-background.png')}
       >
         <ScrollView
           style={styles.wrapper}
           showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ gap: 16 }}
+          contentContainerStyle={styles.contentContainerStyle}
         >
           <View style={{ gap: 10 }}>
             <Text style={styles.title}>Use the map to explore</Text>
             <View style={styles.infoBlock}>
               <View style={styles.imgContainer}>
-                <Image source={require('../../../assets/images/map.jpeg')} style={styles.image} />
+                <Image source={require('../../../../assets/images/map.jpeg')} style={styles.image} />
               </View>
               <Text style={styles.text}>
                 Tap a region to see more details. Zoom the map to reveal our series.
@@ -53,5 +53,3 @@ const DiscoverInfoScreen: FC<Props> = ({ navigation }) => {
     </PageWrapper>
   );
 };
-
-export default DiscoverInfoScreen;

src/screens/DiscoverInfoScreen/styles.tsx → src/screens/InfoScreens/DiscoverInfoScreen/styles.tsx

@@ -1,7 +1,9 @@
 import { StyleSheet } from 'react-native';
-import { Colors } from '../../theme';
+import { Colors } from '../../../theme';
 
 export const styles = StyleSheet.create({
+  background: { height: '100%', flex: 1 },
+  contentContainerStyle: { gap: 16, paddingBottom: 16 },
   wrapper: { height: '100%', display: 'flex' },
   title: {
     fontFamily: 'montserrat-700',

src/screens/InfoScreens/EarthInfoScreen/index.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { ImageBackground, View, Text, ScrollView } from 'react-native';
+import type { NavigationProp } from '@react-navigation/native';
+
+import { Header, PageWrapper } from '../../../components';
+import { styles } from './styles';
+
+type Props = {
+  navigation: NavigationProp<any>;
+};
+
+export const EarthInfoScreen: FC<Props> = ({ navigation }) => {
+  return (
+    <PageWrapper>
+      <Header label={'Earth'} />
+      <ImageBackground
+        style={styles.background}
+        source={require('../../../../assets/images/nm-background.png')}
+      >
+        <ScrollView
+          style={styles.wrapper}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.contentContainerStyle}
+        >
+        </ScrollView>
+      </ImageBackground>
+    </PageWrapper>
+  );
+};

src/screens/InfoScreens/EarthInfoScreen/styles.tsx

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../theme';
+
+export const styles = StyleSheet.create({
+  background: { height: '100%', flex: 1 },
+  contentContainerStyle: { gap: 16, paddingBottom: 16 },
+  wrapper: {
+    display: 'flex',
+    height: '100%'
+  }
+});

src/screens/InfoScreens/FirstStepsInfoScreen/index.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { ImageBackground, View, Text, ScrollView } from 'react-native';
+import type { NavigationProp } from '@react-navigation/native';
+
+import { Header, PageWrapper } from '../../../components';
+import { styles } from './styles';
+
+type Props = {
+  navigation: NavigationProp<any>;
+};
+
+export const FirstStepsInfoScreen: FC<Props> = ({ navigation }) => {
+  return (
+    <PageWrapper>
+      <Header label={'First steps'} />
+      <ImageBackground
+        style={styles.background}
+        source={require('../../../../assets/images/nm-background.png')}
+      >
+        <ScrollView
+          style={styles.wrapper}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.contentContainerStyle}
+        >
+        </ScrollView>
+      </ImageBackground>
+    </PageWrapper>
+  );
+};

src/screens/InfoScreens/FirstStepsInfoScreen/styles.tsx

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../theme';
+
+export const styles = StyleSheet.create({
+  background: { height: '100%', flex: 1 },
+  contentContainerStyle: { gap: 16, paddingBottom: 16 },
+  wrapper: {
+    display: 'flex',
+    height: '100%'
+  }
+});

src/screens/InfoScreen/index.tsx → src/screens/InfoScreens/InfoScreen/index.tsx

@@ -2,27 +2,27 @@ import { FC } from 'react';
 import { ImageBackground, View, Text, TouchableOpacity, ScrollView } from 'react-native';
 import type { NavigationProp } from '@react-navigation/native';
 
-import { Header, PageWrapper } from '../../components/';
+import { Header, PageWrapper } from '../../../components';
 
 import { styles } from './styles';
-import { NAVIGATION_PAGES } from '../../types';
+import { NAVIGATION_PAGES } from '../../../types';
 
 type Props = {
   navigation: NavigationProp<any>;
 };
 
-const InfoScreen: FC<Props> = ({ navigation }) => {
+export const InfoScreen: FC<Props> = ({ navigation }) => {
   return (
     <PageWrapper>
       <Header label={'What is NomadMania...'} shouldClose={true} />
       <ImageBackground
-        style={{ height: '100%' }}
-        source={require('../../../assets/images/nm-background.png')}
+        style={styles.background}
+        source={require('../../../../assets/images/nm-background.png')}
       >
         <ScrollView
           style={styles.wrapper}
           showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ gap: 16 }}
+          contentContainerStyle={styles.contentContainerStyle}
         >
           <Text style={styles.title}>What is NomadMania...</Text>
           <Text style={styles.text}>
@@ -72,7 +72,23 @@ const InfoScreen: FC<Props> = ({ navigation }) => {
             <View style={styles.buttonsAndText}>
               <TouchableOpacity
                 style={styles.button}
-                onPress={() => navigation.navigate(NAVIGATION_PAGES.TRAVELS_INFO)}
+                onPress={() => navigation.navigate(NAVIGATION_PAGES.PLAN_INFO)}
+              >
+                <Text style={styles.buttonText}>Read more...</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <View style={{ gap: 6 }}>
+            <Text style={styles.subtitle}>First steps</Text>
+            <View style={styles.divider} />
+            <Text style={styles.text}>
+              Tell us where you've been and where you're going and we will create your travel map
+            </Text>
+            <View style={styles.buttonsAndText}>
+              <TouchableOpacity
+                style={styles.button}
+                onPress={() => navigation.navigate(NAVIGATION_PAGES.FIRST_STEPS_INFO)}
               >
                 <Text style={styles.buttonText}>Read more...</Text>
               </TouchableOpacity>
@@ -83,5 +99,3 @@ const InfoScreen: FC<Props> = ({ navigation }) => {
     </PageWrapper>
   );
 };
-
-export default InfoScreen;

src/screens/InfoScreen/styles.tsx → src/screens/InfoScreens/InfoScreen/styles.tsx

@@ -1,7 +1,9 @@
 import { StyleSheet } from 'react-native';
-import { Colors } from '../../theme';
+import { Colors } from '../../../theme';
 
 export const styles = StyleSheet.create({
+  background: { height: '100%', flex: 1 },
+  contentContainerStyle: { gap: 16, paddingBottom: 16 },
   wrapper: {
     display: 'flex',
     height: '100%'

src/screens/JoinInfoScreen/index.tsx → src/screens/InfoScreens/JoinInfoScreen/index.tsx

@@ -2,25 +2,25 @@ import { FC } from 'react';
 import { ImageBackground, View, Text, ScrollView } from 'react-native';
 import type { NavigationProp } from '@react-navigation/native';
 
-import { Header, PageWrapper } from '../../components/';
+import { Header, PageWrapper } from '../../../components';
 import { styles } from './styles';
 
 type Props = {
   navigation: NavigationProp<any>;
 };
 
-const JoinInfoScreen: FC<Props> = ({ navigation }) => {
+export const JoinInfoScreen: FC<Props> = ({ navigation }) => {
   return (
     <PageWrapper>
       <Header label={'Join our community'} />
       <ImageBackground
-        style={{ height: '100%' }}
-        source={require('../../../assets/images/nm-background.png')}
+        style={styles.background}
+        source={require('../../../../assets/images/nm-background.png')}
       >
         <ScrollView
           style={styles.wrapper}
           showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ gap: 16 }}
+          contentContainerStyle={styles.contentContainerStyle}
         >
           <Text style={styles.text}>
             Check out our ranking and statistics, see where others are traveling meet with fellow
@@ -31,5 +31,3 @@ const JoinInfoScreen: FC<Props> = ({ navigation }) => {
     </PageWrapper>
   );
 };
-
-export default JoinInfoScreen;

src/screens/JoinInfoScreen/styles.tsx → src/screens/InfoScreens/JoinInfoScreen/styles.tsx

@@ -1,7 +1,9 @@
 import { StyleSheet } from 'react-native';
-import { Colors } from '../../theme';
+import { Colors } from '../../../theme';
 
 export const styles = StyleSheet.create({
+  background: { height: '100%', flex: 1 },
+  contentContainerStyle: { gap: 16, paddingBottom: 16 },
   wrapper: {
     display: 'flex',
     height: '100%'

src/screens/TravelsInfoScreen/index.tsx → src/screens/InfoScreens/PlanInfoScreen/index.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { ImageBackground, View, Text, ScrollView } from 'react-native';
 import type { NavigationProp } from '@react-navigation/native';
 
-import { Header, PageWrapper } from '../../components/';
+import { Header, PageWrapper } from '../../../components';
 import { styles } from './styles';
 import { Colors } from 'src/theme';
 import FlagsSvg from 'assets/icons/travels-section/flags.svg';
@@ -11,18 +11,18 @@ type Props = {
   navigation: NavigationProp<any>;
 };
 
-const TravelsInfoScreen: FC<Props> = ({ navigation }) => {
+export const PlanInfoScreen: FC<Props> = ({ navigation }) => {
   return (
     <PageWrapper>
       <Header label={'Plan & track your travels'} />
       <ImageBackground
-        style={{ height: '100%' }}
-        source={require('../../../assets/images/nm-background.png')}
+        style={styles.background}
+        source={require('../../../../assets/images/nm-background.png')}
       >
         <ScrollView
           style={styles.wrapper}
           showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ gap: 16 }}
+          contentContainerStyle={styles.contentContainerStyle}
         >
           <Text style={[styles.text, { flex: 0 }]}>
             Travels section is a structured way to record your visited countries / regions / points
@@ -51,5 +51,3 @@ const TravelsInfoScreen: FC<Props> = ({ navigation }) => {
     </PageWrapper>
   );
 };
-
-export default TravelsInfoScreen;

src/screens/TravelsInfoScreen/styles.tsx → src/screens/InfoScreens/PlanInfoScreen/styles.tsx

@@ -1,7 +1,9 @@
 import { StyleSheet } from 'react-native';
-import { Colors } from '../../theme';
+import { Colors } from '../../../theme';
 
 export const styles = StyleSheet.create({
+  background: { height: '100%', flex: 1 },
+  contentContainerStyle: { gap: 16, paddingBottom: 16 },
   wrapper: { height: '100%', display: 'flex' },
   title: {
     fontFamily: 'montserrat-700',

src/screens/InfoScreens/RegionsInfoScreen/index.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { ImageBackground, View, Text, ScrollView } from 'react-native';
+import type { NavigationProp } from '@react-navigation/native';
+
+import { Header, PageWrapper } from '../../../components';
+import { styles } from './styles';
+
+type Props = {
+  navigation: NavigationProp<any>;
+};
+
+export const RegionsInfoScreen: FC<Props> = ({ navigation }) => {
+  return (
+    <PageWrapper>
+      <Header label={'Regions'} />
+      <ImageBackground
+        style={styles.background}
+        source={require('../../../../assets/images/nm-background.png')}
+      >
+        <ScrollView
+          style={styles.wrapper}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.contentContainerStyle}
+        >
+        </ScrollView>
+      </ImageBackground>
+    </PageWrapper>
+  );
+};

src/screens/InfoScreens/RegionsInfoScreen/styles.tsx

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../theme';
+
+export const styles = StyleSheet.create({
+  background: { height: '100%', flex: 1 },
+  contentContainerStyle: { gap: 16, paddingBottom: 16 },
+  wrapper: {
+    display: 'flex',
+    height: '100%'
+  }
+});

src/screens/InfoScreens/TripsInfoScreen/index.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { ImageBackground, View, Text, ScrollView } from 'react-native';
+import type { NavigationProp } from '@react-navigation/native';
+
+import { Header, PageWrapper } from '../../../components';
+import { styles } from './styles';
+
+type Props = {
+  navigation: NavigationProp<any>;
+};
+
+export const TripsInfoScreen: FC<Props> = ({ navigation }) => {
+  return (
+    <PageWrapper>
+      <Header label={'Trips'} />
+      <ImageBackground
+        style={styles.background}
+        source={require('../../../../assets/images/nm-background.png')}
+      >
+        <ScrollView
+          style={styles.wrapper}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.contentContainerStyle}
+        >
+        </ScrollView>
+      </ImageBackground>
+    </PageWrapper>
+  );
+};

src/screens/InfoScreens/TripsInfoScreen/styles.tsx

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../theme';
+
+export const styles = StyleSheet.create({
+  background: { height: '100%', flex: 1 },
+  contentContainerStyle: { gap: 16, paddingBottom: 16 },
+  wrapper: {
+    display: 'flex',
+    height: '100%'
+  }
+});

src/screens/InfoScreens/index.ts

@@ -0,0 +1,10 @@
+export * from './InfoScreen';
+export * from './PlanInfoScreen';
+export * from './DiscoverInfoScreen';
+export * from './JoinInfoScreen';
+export * from './CountriesInfoScreen';
+export * from './DareInfoScreen';
+export * from './EarthInfoScreen';
+export * from './FirstStepsInfoScreen';
+export * from './RegionsInfoScreen';
+export * from './TripsInfoScreen';

src/screens/RegisterScreen/EditAccount/index.tsx

@@ -9,7 +9,7 @@ import { AvatarPicker, BigText, Button, Header, Input, PageWrapper } from '../..
 import { InputDatePicker } from '../../../components/Calendar/InputDatePicker';
 import { ModalFlatList } from '../../../components/FlatList/modal-flatlist';
 import { useRegisterMutation } from '@api/auth';
-import { StoreType, storage } from '../../../storage';
+import { storage } from '../../../storage';
 
 import store from '../../../storage/zustand';
 import { NAVIGATION_PAGES } from '../../../types';
@@ -27,7 +27,6 @@ const SignUpSchema = yup.object({
 
 const EditAccount = () => {
   const { dispatch } = useNavigation();
-  const isFirstLaunch = storage.get('isFirstLaunch', StoreType.BOOLEAN) ?? true;
 
   const [user] = store((state) => [state.registration.user]);
 
@@ -48,22 +47,14 @@ const EditAccount = () => {
     if (data && data.token) {
       storage.set('token', data.token);
       storage.set('uid', data.uid.toString());
-      storage.set('isFirstLaunch', false);
       updateLocalData(data.token);
 
-      isFirstLaunch
-        ? dispatch(
-            CommonActions.reset({
-              index: 1,
-              routes: [{ name: NAVIGATION_PAGES.INFO }]
-            })
-          )
-        : dispatch(
-            CommonActions.reset({
-              index: 1,
-              routes: [{ name: NAVIGATION_PAGES.IN_APP }]
-            })
-          );
+      dispatch(
+        CommonActions.reset({
+          index: 1,
+          routes: [{ name: NAVIGATION_PAGES.INFO }]
+        })
+      );
     }
   }, [data]);
 

src/types/navigation.ts

@@ -8,7 +8,13 @@ export enum NAVIGATION_PAGES {
   INFO = 'info',
   JOIN_INFO = 'joinInfo',
   DISCOVER_INFO = 'discoverInfo',
-  TRAVELS_INFO = 'travelsInfo',
+  PLAN_INFO = 'planTravelsInfo',
+  FIRST_STEPS_INFO = 'firstStepsInfo',
+  COUNTRIES_INFO = 'countriesInfo',
+  DARE_INFO = 'dareInfo',
+  EARTH_INFO = 'earthInfo',
+  TRIPS_INFO = 'tripsInfo',
+  REGIONS_INFO = 'regionsInfo',
   IN_APP = 'inAppStack',
   IN_APP_MAP_TAB = 'Map',
   MAP_TAB = 'inAppMapTab',