From 5c73dc8715ef23dc81243492e312be8e1a71c046 Mon Sep 17 00:00:00 2001 From: keplyx Date: Mon, 5 Aug 2019 17:18:48 +0200 Subject: [PATCH] Added app intro slider on first startup --- App.js | 121 ++++++++++++++++++--- app.json | 2 +- package-lock.json | 204 ++--------------------------------- package.json | 2 + utils/AsyncStorageManager.js | 5 + 5 files changed, 125 insertions(+), 209 deletions(-) diff --git a/App.js b/App.js index 634f571..76b7d26 100644 --- 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 { state = { isLoading: true, + showIntro: true, currentTheme: null, }; @@ -44,7 +109,8 @@ export default class App extends React.Component { 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 { clearThemeCache(); } + + getIntroRenderItem(item: Object, dimensions: Object) { + return ( + + {item.image !== undefined ? + + : } + + {item.title} + {item.text} + + + ); + } + + 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 { if (this.state.isLoading) { return ; } - // console.log('rendering'); - // console.log(this.state.currentTheme.variables.containerBgColor); - return ( - - - - - - - - ); + if (this.state.showIntro) { + return this.getIntroRenderItem(item, dimensions)} + slides={slides} onDone={() => this.onIntroDone()} bottomButton showSkipButton/>; + } else { + return ( + + + + + + ); + } } } diff --git a/app.json b/app.json index 37f35c0..c75b5ab 100644 --- 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", diff --git a/package-lock.json b/package-lock.json index 2c584ba..ec2b19f 100644 --- 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", diff --git a/package.json b/package.json index 28d0c2e..f5a25eb 100644 --- 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", diff --git a/utils/AsyncStorageManager.js b/utils/AsyncStorageManager.js index 72a9828..4069929 100644 --- 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',