complete intro screen

apps/mobile/src/components/SplashScreen/index.js

@@ -1,20 +1,27 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, {useEffect, useRef, useState} from 'react';
-import { Image, View } from 'react-native';
+import {Image, View} from 'react-native';
-import Animated, { Easing, timing, useValue } from 'react-native-reanimated';
+import Animated, {Easing, timing, useValue} from 'react-native-reanimated';
 import Carousel from 'react-native-snap-carousel';
-import { SvgXml } from 'react-native-svg';
+import {SvgXml} from 'react-native-svg';
-import { NOTE_SVG, SYNC_SVG } from '../../assets/images/assets';
+import {
-import { useTracked } from '../../provider';
+  NOTE_SVG,
-import { eSendEvent } from '../../services/EventManager';
+  SYNC_SVG,
-import { dHeight, dWidth, getElevation } from '../../utils';
+  ORGANIZE_SVG,
-import { eOpenLoginDialog } from '../../utils/Events';
+  PRIVACY_SVG,
-import { SIZE } from '../../utils/SizeUtils';
+  COMMUNITY_SVG,
+} from '../../assets/images/assets';
+import {useTracked} from '../../provider';
+import {eSendEvent} from '../../services/EventManager';
+import {dHeight, dWidth, getElevation} from '../../utils';
+import {eOpenLoginDialog} from '../../utils/Events';
+import {SIZE} from '../../utils/SizeUtils';
 import Storage from '../../utils/storage';
-import { sleep } from '../../utils/TimeUtils';
+import {sleep} from '../../utils/TimeUtils';
-import { Button } from '../Button';
+import {Button} from '../Button';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 const SplashScreen = () => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
@@ -32,20 +39,36 @@ const SplashScreen = () => {
       type: 'image',
     },
     {
-      title: 'Zero Knowledge',
+      title: 'Made to protect your privacy',
-      description: 'Write without fear, no tracking.',
+      description:
-      icon: SYNC_SVG,
+        'Your data is encrypted on your device. No one but you can read your notes.',
+      icon: PRIVACY_SVG,
+      link: 'https://notesnook.com',
     },
     {
-      title: 'Zero Knowledge',
+      icon: SYNC_SVG,
+      title: 'While keeping you in sync',
       description:
-        'No sneaking, no stealing. We give all the keys for your data to you. Privacy is not just a word to us. We use industry-grade XChaChaPoly1305 and Argon2 which is miles ahead other solutions making sure your data is secure and private even a million years from now.',
+        'Everything is automatically synced to all your devices in a safe and secure way. Notesnook is available on all major platforms.',
+      link: 'https://notesnook.com',
+    },
+    {
+      icon: ORGANIZE_SVG,
+      title: 'And helping you stay organized',
+      description:
+        'Add your notes in notebooks and topics or simply assign tags or colors to find them easily.',
+      link: 'https://notesnook.com',
+    },
+    {
+      icon: COMMUNITY_SVG,
+      title: 'Join our community',
+      description:
+        'We are not ghosts, chat with us and share your experience. Give suggestions, report issues and meet other people using Notesnook',
+      link: 'https://discord.gg/zQBK97EE22',
     },
   ];
 
   useEffect(() => {
-
-    return;
     Storage.read('introCompleted').then(async (r) => {
       setVisible(true);
       await sleep(500);
@@ -106,16 +129,13 @@ const SplashScreen = () => {
               },
             ],
           }}>
-          <View
+          <View style={{}}>
-            style={{
-              height: 300,
-            }}>
             <Carousel
               ref={carouselRef}
               data={features}
               itemWidth={dWidth}
               sliderWidth={dWidth}
-              autoplay={false}
+              autoplay={true}
               loop={false}
               shouldOptimizeUpdates
               autoplayInterval={5000}
@@ -125,63 +145,85 @@ const SplashScreen = () => {
               }}
               renderItem={({item, index}) => (
                 <View
-                  key={item.description}
                   style={{
-                    paddingVertical: 5,
+                    height: '100%',
-                    marginBottom: 10,
+                    justifyContent: 'center',
-                    alignSelf: 'center',
                   }}>
                   <View
+                    key={item.description}
                     style={{
-                      flexWrap: 'wrap',
+                      paddingVertical: 5,
-                      width: '100%',
+                      marginBottom: 10,
-                      alignItems: 'center',
+                      alignSelf: 'center',
                     }}>
-                    {item.type === 'image' ? (
+                    <View
-                      <Image
+                      style={{
-                        source={item.icon}
+                        flexWrap: 'wrap',
-                        style={{
+                        width: '100%',
-                          width: 170,
+                        alignItems: 'center',
-                          height: 170,
+                      }}>
-                        }}
+                      {item.type === 'image' ? (
-                      />
+                        <Image
-                    ) : (
+                          source={item.icon}
-                      <SvgXml
+                          style={{
-                        xml={
+                            width: 170,
-                          item.icon
+                            height: 170,
-                            ? item.icon(colors.accent)
+                          }}
-                            : NOTE_SVG(colors.accent)
+                        />
-                        }
+                      ) : item.type === 'icon' ? (
-                        width={170}
+                        <Icon color={item.color} name={item.icon} size={170} />
-                        height={170}
+                      ) : (
-                      />
+                        <SvgXml
-                    )}
+                          xml={
+                            item.icon
+                              ? item.icon(colors.accent)
+                              : NOTE_SVG(colors.accent)
+                          }
+                          width={250}
+                          height={250}
+                        />
+                      )}
 
-                    {item.title && (
+                      {item.title && (
-                      <Heading
+                        <Heading
-                        size={SIZE.xl}
+                          size={SIZE.xl}
-                        style={{
+                          style={{
-                          textAlign: 'center',
+                            textAlign: 'center',
-                          alignSelf: 'center',
+                            alignSelf: 'center',
-                          marginTop: 10,
+                            marginTop: 10,
-                        }}>
+                          }}>
-                        {item.title}
+                          {item.title}
-                      </Heading>
+                        </Heading>
-                    )}
+                      )}
 
-                    {item.description && (
+                      {item.description && (
-                      <Paragraph
+                        <Paragraph
-                        size={SIZE.md}
+                          size={SIZE.md}
-                        color={colors.icon}
+                          color={colors.icon}
-                        textBreakStrategy="balanced"
+                          textBreakStrategy="balanced"
-                        style={{
+                          style={{
-                          fontWeight: 'normal',
+                            fontWeight: 'normal',
-                          textAlign: 'center',
+                            textAlign: 'center',
-                          alignSelf: 'center',
+                            alignSelf: 'center',
-                        }}>
+                          }}>
-                        {item.description}
+                          {item.description}
-                      </Paragraph>
+                        </Paragraph>
-                    )}
+                      )}
+
+                      {item.link && (
+                        <Button
+                          title="Learn more"
+                          fontSize={SIZE.md}
+                          onPress={() => {
+                            openLinkInBrowser(item.link, colors)
+                              .catch((e) => ToastEvent.show(e.message, 'error'))
+                              .then((r) => {
+                                console.log('closed');
+                              });
+                          }}
+                        />
+                      )}
+                    </View>
                   </View>
                 </View>
               )}