Added app intro slider on first startup

2019-08-05 17:18:48 +02:00 · 2019-08-05 17:18:48 +02:00 · 5c73dc8715
commit 5c73dc8715
parent fb086aac58
5 changed files with 125 additions and 209 deletions
--- a/App.js
+++ b/App.js
@ -1,21 +1,85 @@
 // @flow

 import React from 'react';
-import {StyleProvider, Root, View} from 'native-base';
+import {Root, StyleProvider, Text} from 'native-base';
+import {Ionicons} from '@expo/vector-icons';
+import {StyleSheet, View, Image} from 'react-native'
 import AppNavigator from './navigation/AppNavigator';
 import ThemeManager from './utils/ThemeManager';
 import LocaleManager from './utils/LocaleManager';
 import * as Font from 'expo-font';
+import {LinearGradient} from 'expo-linear-gradient';
+import AppIntroSlider from 'react-native-app-intro-slider';
 // edited native-base-shoutem-theme according to
 // https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422
 // to allow for dynamic theme switching
 import {clearThemeCache} from 'native-base-shoutem-theme';
 import AsyncStorageManager from "./utils/AsyncStorageManager";
+import CustomMaterialIcon from "./components/CustomMaterialIcon";
+
+const styles = StyleSheet.create({
+    mainContent: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingBottom: 100
+    },
+    image: {
+        width: 200,
+        height: 200,
+    },
+    text: {
+        color: 'rgba(255, 255, 255, 0.8)',
+        backgroundColor: 'transparent',
+        textAlign: 'center',
+        paddingHorizontal: 16,
+    },
+    title: {
+        fontSize: 22,
+        color: 'white',
+        backgroundColor: 'transparent',
+        textAlign: 'center',
+        marginBottom: 16,
+    },
+});
+
+const slides = [
+    {
+        key: '1',
+        title: 'L\'application de l\'Amicale',
+        text: 'Toutes les informations du campus de Toulouse',
+        image: require('./assets/amicale.png'),
+        colors: ['#ff8a6d', '#aa1c0d'],
+    },
+    {
+        key: '2',
+        title: 'N\'oubliez plus votre linge',
+        text: 'Visualisez les disponibilités des machines et rajoutez des alarmes',
+        icon: 'washing-machine',
+        colors: ['#9cd6d3', '#3186be'],
+    },
+    {
+        key: '3',
+        title: 'Le proximo',
+        text: 'Regardez le stock de la supérette de l\'INSA depuis n\'importe où' ,
+        icon: 'shopping',
+        colors: ['#f9a967', '#da5204'],
+    },
+    {
+        key: '4',
+        title: 'Toujours en développement',
+        text: 'D\'autres fonctionnalités seront disponibles prochainement',
+        icon: 'settings-outline',
+        colors: ['#9be238', '#1e6a22'],
+    },
+];
+

 type Props = {};

 type State = {
    isLoading: boolean,
+    showIntro: boolean,
    currentTheme: ?Object,
 };

@ -23,6 +87,7 @@ export default class App extends React.Component<Props, State> {

    state = {
        isLoading: true,
+        showIntro: true,
        currentTheme: null,
    };

@ -44,7 +109,8 @@ export default class App extends React.Component<Props, State> {
        ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
        this.setState({
            isLoading: false,
-            currentTheme: ThemeManager.getCurrentTheme()
+            currentTheme: ThemeManager.getCurrentTheme(),
+            showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1'
        });
    }

@ -59,6 +125,34 @@ export default class App extends React.Component<Props, State> {
        clearThemeCache();
    }

+
+    getIntroRenderItem(item: Object, dimensions: Object) {
+        return (
+            <LinearGradient
+                style={[
+                    styles.mainContent,
+                    dimensions,
+                ]}
+                colors={item.colors}
+                start={{x: 0, y: 0.1}}
+                end={{x: 0.1, y: 1}}
+            >
+                {item.image !== undefined ?
+                    <Image source={item.image} style={styles.image}/>
+                    : <CustomMaterialIcon icon={item.icon} color={'#fff'} fontSize={200} width={200}/>}
+                <View style={{marginTop: 20}}>
+                    <Text style={styles.title}>{item.title}</Text>
+                    <Text style={styles.text}>{item.text}</Text>
+                </View>
+            </LinearGradient>
+        );
+    }
+
+    onIntroDone() {
+        this.setState({showIntro: false});
+        AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showIntro.key, '0');
+    }
+
    /**
     * Renders the app based on loading state
     *
@ -68,16 +162,17 @@ export default class App extends React.Component<Props, State> {
        if (this.state.isLoading) {
            return <View/>;
        }
-        // console.log('rendering');
-        // console.log(this.state.currentTheme.variables.containerBgColor);
-        return (
-            <Root>
-                <StyleProvider style={this.state.currentTheme}>
-
-                    <AppNavigator/>
-
-                </StyleProvider>
-            </Root>
-        );
+        if (this.state.showIntro) {
+            return <AppIntroSlider renderItem={({item, dimensions}) => this.getIntroRenderItem(item, dimensions)}
+                                   slides={slides} onDone={() => this.onIntroDone()} bottomButton showSkipButton/>;
+        } else {
+            return (
+                <Root>
+                    <StyleProvider style={this.state.currentTheme}>
+                        <AppNavigator/>
+                    </StyleProvider>
+                </Root>
+            );
+        }
    }
 }
--- a/app.json
+++ b/app.json
@ -9,7 +9,7 @@
      "android",
      "web"
    ],
-    "version": "0.0.3",
+    "version": "0.0.4",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "primaryColor": "#e42612",
--- a/package-lock.json
+++ b/package-lock.json
@ -1551,11 +1551,6 @@
      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
      "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw="
    },
-    "array-find-index": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
-    },
    "array-map": {
      "version": "0.0.0",
      "resolved": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz",
@ -2271,27 +2266,6 @@
        "which": "^1.2.9"
      }
    },
-    "css-in-js-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
-      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
-      "requires": {
-        "hyphenate-style-name": "^1.0.2",
-        "isobject": "^3.0.1"
-      },
-      "dependencies": {
-        "isobject": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
-        }
-      }
-    },
-    "debounce": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
-      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
-    },
    "debug": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@ -2315,14 +2289,6 @@
      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.6.0.tgz",
      "integrity": "sha1-Dm2o8M5Sg471zsXI+TlrDBtko8s="
    },
-    "deep-assign": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/deep-assign/-/deep-assign-3.0.0.tgz",
-      "integrity": "sha512-YX2i9XjJ7h5q/aQ/IM9PEwEnDqETAIYbggmdDB3HLTlSgo1CxPsj6pvhPG68rq6SVE0+p+6Ywsm5fTYNrYtBWw==",
-      "requires": {
-        "is-obj": "^1.0.0"
-      }
-    },
    "define-property": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
@ -2624,6 +2590,11 @@
          "requires": {
            "lodash": "^4.17.4"
          }
+        },
+        "expo-linear-gradient": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-5.0.1.tgz",
+          "integrity": "sha512-5dKn9JIXmXXHq6itC/Jpqo65Tkgjwacyw1kpD8sekoFTEVfT6ciFd2djqIcciUqIa57FF/5d2q54mUvjoqD/TA=="
        }
      }
    },
@ -3865,14 +3836,6 @@
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
      "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w=="
    },
-    "html-parse-stringify2": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
-      "integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
-      "requires": {
-        "void-elements": "^2.0.1"
-      }
-    },
    "http-errors": {
      "version": "1.7.3",
      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@ -3885,24 +3848,11 @@
        "toidentifier": "1.0.0"
      }
    },
-    "hyphenate-style-name": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
-      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
-    },
    "i18n-js": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-3.3.0.tgz",
      "integrity": "sha512-+m8jh84IIWlFwEJgwrWCkeIwIES9ilJKBOj5qx8ZTLLmlPz7bjKnCdxf254wRf6M4pkQHtgXGT9r9lGk0e9aug=="
    },
-    "i18next": {
-      "version": "17.0.4",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-17.0.4.tgz",
-      "integrity": "sha512-+lwmv3FT8Sv/HwVPjkR6rtEFhgOqt9L/CTehzyxvL/NdkeUYbFZJfE57MsBToB6LFWg3d0sZJIVgYqCpWzUyLQ==",
-      "requires": {
-        "@babel/runtime": "^7.3.1"
-      }
-    },
    "iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -3949,14 +3899,6 @@
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
-    "inline-style-prefixer": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-5.1.0.tgz",
-      "integrity": "sha512-giteQHPMrApQOSjNSjteO5ZGSGMRf9gas14fRy2lg2buSc1nRnj6o6xuNds5cMTKrkncyrTu3gJn/yflFMVdmg==",
-      "requires": {
-        "css-in-js-utils": "^2.0.0"
-      }
-    },
    "inquirer": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz",
@ -4093,11 +4035,6 @@
        "kind-of": "^3.0.2"
      }
    },
-    "is-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
-    },
    "is-plain-object": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@ -4284,14 +4221,6 @@
        "invert-kv": "^1.0.0"
      }
    },
-    "linkify-it": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-1.2.4.tgz",
-      "integrity": "sha1-B3NSbDF8j9E71TTuHRgP+Iq/iBo=",
-      "requires": {
-        "uc.micro": "^1.0.1"
-      }
-    },
    "load-json-file": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@ -4440,11 +4369,6 @@
        "buffer-alloc": "^1.1.0"
      }
    },
-    "mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
-    },
    "mem": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
@ -5107,11 +5031,6 @@
      "resolved": "https://registry.npmjs.org/noop-fn/-/noop-fn-1.0.0.tgz",
      "integrity": "sha1-XzPUfxPSFQ35PgywNmmemC94/78="
    },
-    "normalize-css-color": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/normalize-css-color/-/normalize-css-color-1.0.2.tgz",
-      "integrity": "sha1-Apkel8zOxmI/5XOvu/Deah8+n40="
-    },
    "normalize-package-data": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@ -5800,15 +5719,6 @@
        "warning": "^3.0.0"
      }
    },
-    "react-i18next": {
-      "version": "10.11.4",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-10.11.4.tgz",
-      "integrity": "sha512-/CWXaf3a5BLNeVnBGxzWOIZLQgSNEc2LWHX4ZaJb7ww0xgY0S5K9HRAMzJIHeHGe7jfpSraprD66VDblWb4ZXA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "html-parse-stringify2": "2.0.1"
-      }
-    },
    "react-is": {
      "version": "16.8.6",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
@ -5935,13 +5845,10 @@
        }
      }
    },
-    "react-native-animatable": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.2.tgz",
-      "integrity": "sha512-rmah3KQ63ft8DxkzFUwJSuZeq+oSYwldoGF4DTOR5WM2WR5wiWLgBAtrAHlI3Di3by323uOR21s+MlqPcHz2Kw==",
-      "requires": {
-        "prop-types": "^15.5.10"
-      }
+    "react-native-app-intro-slider": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-app-intro-slider/-/react-native-app-intro-slider-3.0.0.tgz",
+      "integrity": "sha512-2XXUYnSeMYZTLhdRYHSwv8mhoyuEaYxmQfXrWQInH1QvjsnJtKgvORI3bJuJN+tNPg3aut6JYYCNOFsI5of32A=="
    },
    "react-native-autolink": {
      "version": "1.8.1",
@ -5984,28 +5891,6 @@
        "prop-types": "^15.5.10"
      }
    },
-    "react-native-hyperlink": {
-      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/react-native-hyperlink/-/react-native-hyperlink-0.0.14.tgz",
-      "integrity": "sha1-E4u/5bQQZn0eN/BKK0cTFjqw7YE=",
-      "requires": {
-        "linkify-it": "^1.2.0",
-        "mdurl": "^1.0.0"
-      }
-    },
-    "react-native-image-pan-zoom": {
-      "version": "2.1.11",
-      "resolved": "https://registry.npmjs.org/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.11.tgz",
-      "integrity": "sha512-ZCisGUFpPchHXsjT7ZI0anlSLPgcTmjRKXqpVnPu3RDWFXfKjuL4zpY57DX4Y8YgGZCpbf9fApN7KjVYody2Mw=="
-    },
-    "react-native-image-zoom-viewer": {
-      "version": "2.2.26",
-      "resolved": "https://registry.npmjs.org/react-native-image-zoom-viewer/-/react-native-image-zoom-viewer-2.2.26.tgz",
-      "integrity": "sha512-Mh4+CJQCDcAumLFXLlDk8nQ5iMxNnupc9HwktsZ3I/v4HULcFPmTLDQ0HGAxjLa5foZRPnKDN06iKGsEb9raoA==",
-      "requires": {
-        "react-native-image-pan-zoom": "^2.1.9"
-      }
-    },
    "react-native-iphone-x-helper": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",
@ -6020,14 +5905,6 @@
        "react-native-iphone-x-helper": "^1.0.3"
      }
    },
-    "react-native-lightbox": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/react-native-lightbox/-/react-native-lightbox-0.8.0.tgz",
-      "integrity": "sha512-qiPx8ordPiDuyBNIfR0pxxNERSIeOSU0P40bpPSEMyuQ6xsI4JDghyuRFD+onRjIpNnuOolsLCbsTTjeVwAB5g==",
-      "requires": {
-        "prop-types": "^15.5.10"
-      }
-    },
    "react-native-maps": {
      "version": "0.24.2",
      "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.24.2.tgz",
@ -6042,15 +5919,6 @@
        "prop-types": "^15.6.0"
      }
    },
-    "react-native-modal": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-11.3.0.tgz",
-      "integrity": "sha512-574hg0dF/gKY0jICg+D4j10F4fKQR8/u88DcVx82LU9QkuYokHr5Rn4E+BoaOUNf3BdNi1z9vzItMQEZa3M8rQ==",
-      "requires": {
-        "prop-types": "^15.6.2",
-        "react-native-animatable": "^1.3.1"
-      }
-    },
    "react-native-platform-touchable": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz",
@ -6069,11 +5937,6 @@
        "dedent": "^0.6.0"
      }
    },
-    "react-native-scalable-image": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/react-native-scalable-image/-/react-native-scalable-image-0.5.1.tgz",
-      "integrity": "sha512-bUphGBuRdet6Tx2lkgD9goa6UDcQNV9piiUUWxN59cg5BY7B1OFfkcM+9gAELCBPWqYGEoADEk6MtY35b1Rbpg=="
-    },
    "react-native-screens": {
      "version": "1.0.0-alpha.22",
      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz",
@ -6134,45 +5997,6 @@
      "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-2.6.0.tgz",
      "integrity": "sha512-yO9vWi/11m2hEJl8FrW1SMeVzFfPtMKh20MUInGqlsL0H8Ya2JGGlFfrBzx1KiFR2hFb5OdsTLYNtcVZtJ6pLQ=="
    },
-    "react-native-web": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.11.4.tgz",
-      "integrity": "sha512-xuiHd9mxtOUlCY/CY8UO25a3cX5u3qsEdhl7zXLDNbJ0nu1Tf98GsplBZgdnDB0q/LpYVPQWmjnTEerncsO2vw==",
-      "requires": {
-        "array-find-index": "^1.0.2",
-        "create-react-class": "^15.6.2",
-        "debounce": "^1.2.0",
-        "deep-assign": "^3.0.0",
-        "fbjs": "^1.0.0",
-        "hyphenate-style-name": "^1.0.2",
-        "inline-style-prefixer": "^5.0.3",
-        "normalize-css-color": "^1.0.2",
-        "prop-types": "^15.6.0",
-        "react-timer-mixin": "^0.13.4"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
-          "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
-        },
-        "fbjs": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-1.0.0.tgz",
-          "integrity": "sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==",
-          "requires": {
-            "core-js": "^2.4.1",
-            "fbjs-css-vars": "^1.0.0",
-            "isomorphic-fetch": "^2.1.1",
-            "loose-envify": "^1.0.0",
-            "object-assign": "^4.1.0",
-            "promise": "^7.1.1",
-            "setimmediate": "^1.0.5",
-            "ua-parser-js": "^0.7.18"
-          }
-        }
-      }
-    },
    "react-native-webview": {
      "version": "5.8.1",
      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-5.8.1.tgz",
@ -7408,11 +7232,6 @@
      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
      "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
    },
-    "uc.micro": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
-      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
-    },
    "uglify-es": {
      "version": "3.3.9",
      "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",
@ -7644,11 +7463,6 @@
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
    },
-    "void-elements": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
-      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
-    },
    "walker": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
--- a/package.json
+++ b/package.json
@ -12,6 +12,7 @@
    "@shoutem/theme": "^0.11.3",
    "expo": "^33.0.7",
    "expo-font": "^5.0.1",
+    "expo-linear-gradient": "^5.0.1",
    "expo-localization": "^5.0.1",
    "expo-permissions": "^5.0.1",
    "i18n-js": "^3.3.0",
@ -20,6 +21,7 @@
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-native": "^0.59.9",
+    "react-native-app-intro-slider": "^3.0.0",
    "react-native-autolink": "^1.8.1",
    "react-native-platform-touchable": "^1.1.1",
    "react-native-status-bar-height": "^2.3.1",
--- a/utils/AsyncStorageManager.js
+++ b/utils/AsyncStorageManager.js
@ -22,6 +22,11 @@ export default class AsyncStorageManager {


    preferences = {
+        showIntro: {
+            key: 'showIntro',
+            default: '1',
+            current : '',
+        },
        proxiwashNotifications: {
            key: 'proxiwashNotifications',
            default: '5',