ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Added app intro slider on first startup

Browse source
This commit is contained in:
keplyx 2019-08-05 17:18:48 +02:00
parent fb086aac58
commit 5c73dc8715
5 changed files with 125 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
App.js
View file

@ -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);
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>
);
}
}
}

2
app.json
View file

@ -9,7 +9,7 @@
"android",
"web"
],
"version": "0.0.3",
"version": "0.0.4",
"orientation": "portrait",
"icon": "./assets/icon.png",
"primaryColor": "#e42612",

204
package-lock.json generated
View file

@ -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",

2
package.json
View file

@ -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",

5
utils/AsyncStorageManager.js
View file

@ -22,6 +22,11 @@ export default class AsyncStorageManager {
preferences = {
showIntro: {
key: 'showIntro',
default: '1',
current : '',
},
proxiwashNotifications: {
key: 'proxiwashNotifications',
default: '5',