123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- // @flow
-
- import * as React from 'react';
- import {LinearGradient} from "expo-linear-gradient";
- import {Image, StyleSheet, View} from "react-native";
- import CustomMaterialIcon from "./CustomMaterialIcon";
- import {Text} from "native-base";
- import i18n from 'i18n-js';
- import AppIntroSlider from "react-native-app-intro-slider";
-
- // Content to be used int the intro slides
-
- const styles = StyleSheet.create({
- mainContent: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- paddingBottom: 100
- },
- image: {
- width: 300,
- height: 300,
- marginBottom: -50,
- },
- 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,
- },
- });
-
- type Props = {
- onDone: Function,
- isUpdate: boolean
- };
-
- export default class CustomIntroSlider extends React.Component<Props> {
-
- introSlides: Array<Object>;
- updateSlides: Array<Object>;
-
- constructor() {
- super();
- this.introSlides = [
- {
- key: '1',
- title: i18n.t('intro.slide1.title'),
- text: i18n.t('intro.slide1.text'),
- image: require('../assets/splash.png'),
- colors: ['#e01928', '#be1522'],
- },
- {
- key: '2',
- title: i18n.t('intro.slide2.title'),
- text: i18n.t('intro.slide2.text'),
- icon: 'calendar-range',
- colors: ['#d99e09', '#c28d08'],
- },
- {
- key: '3',
- title: i18n.t('intro.slide3.title'),
- text: i18n.t('intro.slide3.text'),
- icon: 'washing-machine',
- colors: ['#1fa5ee', '#1c97da'],
- },
- {
- key: '4',
- title: i18n.t('intro.slide4.title'),
- text: i18n.t('intro.slide4.text'),
- icon: 'shopping',
- colors: ['#ec5904', '#da5204'],
- },
- {
- key: '5',
- title: i18n.t('intro.slide5.title'),
- text: i18n.t('intro.slide5.text'),
- icon: 'timetable',
- colors: ['#7c33ec', '#732fda'],
- },
- {
- key: '6',
- title: i18n.t('intro.slide6.title'),
- text: i18n.t('intro.slide6.text'),
- icon: 'silverware-fork-knife',
- colors: ['#ec1213', '#ff372f'],
- },
- {
- key: '7',
- title: i18n.t('intro.slide7.title'),
- text: i18n.t('intro.slide7.text'),
- icon: 'cogs',
- colors: ['#37c13e', '#26852b'],
- },
- ];
- this.updateSlides = [
- {
- key: '1',
- title: i18n.t('intro.updateSlide.title'),
- text: i18n.t('intro.updateSlide.text'),
- icon: 'silverware-fork-knife',
- colors: ['#e01928', '#be1522'],
- },
- ]
- }
-
-
- /**
- * Render item to be used for the intro introSlides
- * @param item
- * @param dimensions
- */
- static 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>
- );
- }
-
- render() {
- return (
- <AppIntroSlider
- renderItem={({item, dimensions}) => CustomIntroSlider.getIntroRenderItem(item, dimensions)}
- slides={this.props.isUpdate ? this.updateSlides : this.introSlides}
- onDone={() => this.props.onDone()}
- bottomButton
- showSkipButton
- skipLabel={i18n.t('intro.buttons.skip')}
- doneLabel={i18n.t('intro.buttons.done')}
- nextLabel={i18n.t('intro.buttons.next')}
- />
- );
- }
-
- }
-
|