locales/en.json

@@ -379,10 +379,18 @@
       "title": "Stay up to date",
       "text": "CAMPUS allows you to be aware of any event occurring on the campus, from pancake sales to Enfoiros concerts!"
     },
+    "slideProxiwash": {
+      "title": "Never forget your laundry",
+      "text": "CAMPUS will inform you on the availability of washing machines and will remind you just before yours finishes!"
+    },
     "slidePlanex": {
       "title": "Planex",
       "text": "Lookup your next course on CAMPUS with a mobile friendly timetable"
     },
+    "slideRU": {
+      "title": "RU Menu",
+      "text": "For the hungry, check this week's menu!"
+    },
     "slideServices": {
       "title": "More services!",
       "text": "You can do much more with CAMPUS, explore the app to find out"

locales/fr.json

@@ -340,7 +340,7 @@
       "bugs": "Rapporter des Bugs",
       "bugsSubtitle": "Tu as trouvé un bug ?",
       "bugsDescription": "Rapporter les bugs m'aide à améliorer l'appli. Pour cela, merci d'utiliser un des boutons ci-dessous et de décrire ton problème le plus précisément possible !",
-      "feedbackSubtitle": "Dis moi ce que tu penses !",
+      "feedbackSubtitle": "Dites moi ce que tu penses !",
       "feedbackDescription": "tu veux voir une fonctionnalité ajoutée/modifiée/supprimée ? Tu veux donner ton opinion sur l'appli ou simplement discuter avec le développeur (c'est moi coucou) ? Utilise un des liens ci-dessous !",
       "contactMeans": "L'utilisation de Gitea est recommandée, pour l'utiliser, connecte toi avec tes identifiants INSA.",
       "homeButtonTitle": "Feedback/Bugs",
@@ -372,24 +372,32 @@
   },
   "intro": {
     "slideMain": {
-      "title": "Bienvenue sur CAMPUS !",
+      "title": "Bienvenue sur CAMPUS",
-      "text": "L'appli du campus de l'INSA Toulouse ! Laisse toi guider pour comprendre tout ce que tu peux faire."
+      "text": "La nouvelle appli à consulter pendant la pause café pour être au courant de la vie du campus !"
-    },
-    "slidePlanex": {
-      "title": "Planex tout beau",
-      "text": "Regarde ton emploi du temps et celui de tes amis avec un Planex adapté mobile !"
     },
     "slideEvents": {
-      "title": "Plein d'infos",
+      "title": "Restez informés",
-      "text": "Sois au courant de tout ce qui se passe sur le campus, de la vente de crêpes jusqu'aux concerts Enfoiros !"
+      "text": "CAMPUS vous permet d'être au courant de tous les événements qui ont lieu sur le campus, de la vente de crêpes jusqu'aux concerts enfoiros !"
+    },
+    "slideProxiwash": {
+      "title": "N'oubliez plus votre linge !",
+      "text": "CAMPUS vous informe de la disponibilité des machines et vous permet d'être notifié lorsque la vôtre se termine bientôt !"
+    },
+    "slidePlanex": {
+      "title": "Planex",
+      "text": "Vérifiez votre prochain cours sur CAMPUS avec un emploi du temps adapté mobile"
+    },
+    "slideRU": {
+      "title": "Menu du RU",
+      "text": "Pour ceux qui ont faim, vérifiez le menu du RU de la semaine !"
     },
     "slideServices": {
-      "title": "Et plus encore !",
+      "title": "Encore plus de services !",
-      "text": "Tu peux faire bien plus avec CAMPUS, mais je n'ai pas le temps de tout dire ici. Balade toi sur l'appli pour tout découvrir !"
+      "text": "CAMPUS vous permet de faire bien plus, explorez l'appli pour savoir quoi"
     },
     "slideDone": {
-      "title": "Réalisé par un étudiant",
+      "title": "Fait par un étudiant",
-      "text": "Cette appli à été réalisée par un seul étudiant (avec un peu d'aide par-ci par-là), donc tes retours sont les bienvenus !"
+      "text": "Cette appli à été réalisée par un seul étudiant (avec un peu d'aide par-ci par-là), donc tous les retours sont les bienvenus !"
     },
     "updateSlide0": {
       "title": "Nouveau dans cette mise à jour !",

src/components/Mascot/Mascot.js

@@ -2,46 +2,26 @@
 
 import * as React from 'react';
 import * as Animatable from "react-native-animatable";
-import {Image, TouchableWithoutFeedback, View} from "react-native";
+import {Image, View} from "react-native-animatable";
 
 type Props = {
     size: number,
     emotion: number,
     animated: boolean,
-    entryAnimation: Animatable.AnimatableProperties | null,
-    loopAnimation: Animatable.AnimatableProperties | null,
-    onPress?: (viewRef: AnimatableViewRef) => null,
-    onLongPress?: (viewRef: AnimatableViewRef) => null,
 }
 
-type State = {
-    currentEmotion: number,
-}
-
-export type AnimatableViewRef = {current: null | Animatable.View};
-
 const MASCOT_IMAGE = require("../../../assets/mascot/mascot.png");
 const MASCOT_EYES_NORMAL = require("../../../assets/mascot/mascot_eyes_normal.png");
 const MASCOT_EYES_GIRLY = require("../../../assets/mascot/mascot_eyes_girly.png");
 const MASCOT_EYES_CUTE = require("../../../assets/mascot/mascot_eyes_cute.png");
 const MASCOT_EYES_WINK = require("../../../assets/mascot/mascot_eyes_wink.png");
-const MASCOT_EYES_HEART = require("../../../assets/mascot/mascot_eyes_heart.png");
-const MASCOT_EYES_ANGRY = require("../../../assets/mascot/mascot_eyes_angry.png");
 const MASCOT_GLASSES = require("../../../assets/mascot/mascot_glasses.png");
-const MASCOT_SUNGLASSES = require("../../../assets/mascot/mascot_sunglasses.png");
 
 export const EYE_STYLE = {
     NORMAL: 0,
     GIRLY: 2,
     CUTE: 3,
     WINK: 4,
-    HEART: 5,
-    ANGRY: 6,
-}
-
-const GLASSES_STYLE = {
-    NORMAL: 0,
-    COOl: 1
 }
 
 export const MASCOT_STYLE = {
@@ -51,96 +31,30 @@ export const MASCOT_STYLE = {
     WINK: 3,
     CUTE: 4,
     INTELLO: 5,
-    LOVE: 6,
-    COOL: 7,
-    ANGRY: 8,
 };
 
 
-class Mascot extends React.Component<Props, State> {
+class Mascot extends React.Component<Props> {
-
-    state = {
-        currentEmotion: this.props.emotion
-    }
 
     static defaultProps = {
-        animated: false,
+        animated: false
-        entryAnimation: {
-            useNativeDriver: true,
-            animation: "rubberBand",
-            duration: 2000,
-        },
-        loopAnimation: {
-            useNativeDriver: true,
-            animation: "swing",
-            duration: 2000,
-            iterationDelay: 250,
-            iterationCount: "infinite",
-        },
-        clickAnimation: {
-            useNativeDriver: true,
-            animation: "rubberBand",
-            duration: 2000,
-        },
     }
 
-    viewRef: AnimatableViewRef;
+    eyeList: { [key: number]: number | string }
-    eyeList: { [key: number]: number | string };
-    glassesList: { [key: number]: number | string };
-
-    onPress: (viewRef: AnimatableViewRef) => null;
-    onLongPress: (viewRef: AnimatableViewRef) => null;
 
     constructor(props: Props) {
         super(props);
-        this.viewRef = React.createRef();
         this.eyeList = {};
-        this.glassesList = {};
         this.eyeList[EYE_STYLE.NORMAL] = MASCOT_EYES_NORMAL;
         this.eyeList[EYE_STYLE.GIRLY] = MASCOT_EYES_GIRLY;
         this.eyeList[EYE_STYLE.CUTE] = MASCOT_EYES_CUTE;
         this.eyeList[EYE_STYLE.WINK] = MASCOT_EYES_WINK;
-        this.eyeList[EYE_STYLE.HEART] = MASCOT_EYES_HEART;
-        this.eyeList[EYE_STYLE.ANGRY] = MASCOT_EYES_ANGRY;
-
-        this.glassesList[GLASSES_STYLE.NORMAL] = MASCOT_GLASSES;
-        this.glassesList[GLASSES_STYLE.COOl] = MASCOT_SUNGLASSES;
-
-        if (this.props.onPress == null) {
-            this.onPress = (viewRef: AnimatableViewRef) => {
-                if (viewRef.current != null) {
-                    this.setState({currentEmotion: MASCOT_STYLE.LOVE});
-                    viewRef.current.rubberBand(1500).then(() => {
-                        this.setState({currentEmotion: this.props.emotion});
-                    });
-
-                }
-                return null;
-            }
-        } else
-            this.onPress = this.props.onPress;
-
-        if (this.props.onLongPress == null) {
-            this.onLongPress = (viewRef: AnimatableViewRef) => {
-                if (viewRef.current != null) {
-                    this.setState({currentEmotion: MASCOT_STYLE.ANGRY});
-                    viewRef.current.tada(1000).then(() => {
-                        this.setState({currentEmotion: this.props.emotion});
-                    });
-
-                }
-                return null;
-            }
-        } else
-            this.onLongPress = this.props.onLongPress;
-
     }
 
-    getGlasses(style: number) {
+    getGlasses() {
-        const glasses = this.glassesList[style];
         return <Image
             key={"glasses"}
-            source={glasses != null ? glasses : this.glassesList[GLASSES_STYLE.NORMAL]}
+            source={MASCOT_GLASSES}
             style={{
                 position: "absolute",
                 top: "15%",
@@ -151,7 +65,7 @@ class Mascot extends React.Component<Props, State> {
         />
     }
 
-    getEye(style: number, isRight: boolean, rotation: string="0deg") {
+    getEye(style: number, isRight: boolean) {
         const eye = this.eyeList[style];
         return <Image
             key={isRight ? "right" : "left"}
@@ -162,7 +76,6 @@ class Mascot extends React.Component<Props, State> {
                 left: isRight ? "-11%" : "11%",
                 width: this.props.size,
                 height: this.props.size,
-                transform: [{rotateY: rotation}]
             }}
         />
     }
@@ -172,10 +85,10 @@ class Mascot extends React.Component<Props, State> {
         final.push(<View
             key={"container"}
             style={{
-                position: "absolute",
+            position: "absolute",
-                width: this.props.size,
+            width: this.props.size,
-                height: this.props.size,
+            height: this.props.size,
-            }}/>);
+        }}/>);
         if (emotion === MASCOT_STYLE.CUTE) {
             final.push(this.getEye(EYE_STYLE.CUTE, true));
             final.push(this.getEye(EYE_STYLE.CUTE, false));
@@ -188,21 +101,13 @@ class Mascot extends React.Component<Props, State> {
         } else if (emotion === MASCOT_STYLE.WINK) {
             final.push(this.getEye(EYE_STYLE.WINK, true));
             final.push(this.getEye(EYE_STYLE.NORMAL, false));
-        } else if (emotion === MASCOT_STYLE.LOVE) {
-            final.push(this.getEye(EYE_STYLE.HEART, true));
-            final.push(this.getEye(EYE_STYLE.HEART, false));
-        } else if (emotion === MASCOT_STYLE.ANGRY) {
-            final.push(this.getEye(EYE_STYLE.ANGRY, true));
-            final.push(this.getEye(EYE_STYLE.ANGRY, false, "180deg"));
-        } else if (emotion === MASCOT_STYLE.COOL) {
-            final.push(this.getGlasses(GLASSES_STYLE.COOl));
         } else {
             final.push(this.getEye(EYE_STYLE.NORMAL, true));
             final.push(this.getEye(EYE_STYLE.NORMAL, false));
         }
 
-        if (emotion === MASCOT_STYLE.INTELLO) { // Needs to have normal eyes behind the glasses
+        if (emotion === MASCOT_STYLE.INTELLO) {
-            final.push(this.getGlasses(GLASSES_STYLE.NORMAL));
+            final.push(this.getGlasses())
         }
         final.push(<View key={"container2"}/>);
         return final;
@@ -210,37 +115,31 @@ class Mascot extends React.Component<Props, State> {
 
     render() {
         const size = this.props.size;
-        const entryAnimation = this.props.animated ? this.props.entryAnimation : null;
-        const loopAnimation = this.props.animated ? this.props.loopAnimation : null;
         return (
             <Animatable.View
                 style={{
                     width: size,
                     height: size,
                 }}
-                {...entryAnimation}
+                useNativeDriver={true}
+                animation={this.props.animated ? "rubberBand" : null}
+                duration={2000}
             >
-                <TouchableWithoutFeedback
+                <View
-                    onPress={() => this.onPress(this.viewRef)}
+                    useNativeDriver={true}
-                    onLongPress={() => this.onLongPress(this.viewRef)}
+                    animation={this.props.animated ? "swing" : null}
+                    duration={2000}
+                    iterationCount={"infinite"}
                 >
-                    <Animatable.View
+                    <Image
-                        ref={this.viewRef}
+                        source={MASCOT_IMAGE}
-                    >
+                        style={{
-                        <Animatable.View
+                            width: size,
-                            {...loopAnimation}
+                            height: size,
-                        >
+                        }}
-                            <Image
+                    />
-                                source={MASCOT_IMAGE}
+                    {this.getEyes(this.props.emotion)}
-                                style={{
+                </View>
-                                    width: size,
-                                    height: size,
-                                }}
-                            />
-                            {this.getEyes(this.state.currentEmotion)}
-                        </Animatable.View>
-                    </Animatable.View>
-                </TouchableWithoutFeedback>
             </Animatable.View>
         );
     }

src/components/Overrides/CustomIntroSlider.js

@@ -1,17 +1,14 @@
 // @flow
 
 import * as React from 'react';
-import {Platform, StatusBar, StyleSheet, View} from "react-native";
+import {Image, Platform, StatusBar, StyleSheet, View} from "react-native";
-import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import {Text} from "react-native-paper";
 import i18n from 'i18n-js';
 import AppIntroSlider from "react-native-app-intro-slider";
 import Update from "../../constants/Update";
 import ThemeManager from "../../managers/ThemeManager";
 import LinearGradient from 'react-native-linear-gradient';
-import Mascot, {MASCOT_STYLE} from "../Mascot/Mascot";
-import * as Animatable from "react-native-animatable";
-import {Card} from "react-native-paper";
 
 type Props = {
     onDone: Function,
@@ -19,34 +16,17 @@ type Props = {
     isAprilFools: boolean,
 };
 
-type State = {
-    currentSlide: number,
-}
-
-type Slide = {
-    key: string,
-    title: string,
-    text: string,
-    view: () => React.Node,
-    mascotStyle: number,
-    colors: [string, string]
-};
-
 /**
  * Class used to create intro slides
  */
-export default class CustomIntroSlider extends React.Component<Props, State> {
+export default class CustomIntroSlider extends React.Component<Props> {
 
-    state = {
+    sliderRef: {current: null | AppIntroSlider};
-        currentSlide: 0,
-    }
 
-    sliderRef: { current: null | AppIntroSlider };
+    introSlides: Array<Object>;
-
+    updateSlides: Array<Object>;
-    introSlides: Array<Slide>;
+    aprilFoolsSlides: Array<Object>;
-    updateSlides: Array<Slide>;
+    currentSlides: Array<Object>;
-    aprilFoolsSlides: Array<Slide>;
-    currentSlides: Array<Slide>;
 
     /**
      * Generates intro slides
@@ -56,44 +36,53 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
         this.sliderRef = React.createRef();
         this.introSlides = [
             {
-                key: '0', // Mascot
+                key: 'main',
                 title: i18n.t('intro.slideMain.title'),
                 text: i18n.t('intro.slideMain.text'),
-                view: this.getWelcomeView,
+                image: require('../../../assets/splash.png'),
-                mascotStyle: MASCOT_STYLE.NORMAL,
+                colors: ['#be1522', '#740d15'],
-                colors: ['#be1522', '#57080e'],
             },
             {
-                key: '1',
+                key: 'Planex',
                 title: i18n.t('intro.slidePlanex.title'),
                 text: i18n.t('intro.slidePlanex.text'),
-                view: () => this.getIconView("calendar-clock"),
+                icon: 'timetable',
-                mascotStyle: MASCOT_STYLE.INTELLO,
+                colors: ['#e77020', '#803e12'],
-                colors: ['#be1522', '#57080e'],
             },
             {
-                key: '2',
+                key: 'RU',
+                title: i18n.t('intro.slideRU.title'),
+                text: i18n.t('intro.slideRU.text'),
+                icon: 'silverware-fork-knife',
+                colors: ['#dcac18', '#8b6a15'],
+            },
+            {
+                key: 'events',
                 title: i18n.t('intro.slideEvents.title'),
                 text: i18n.t('intro.slideEvents.text'),
-                view: () => this.getIconView("calendar-star",),
+                icon: 'calendar-range',
-                mascotStyle: MASCOT_STYLE.HAPPY,
+                colors: ['#41a006', '#095c03'],
-                colors: ['#be1522', '#57080e'],
             },
             {
-                key: '3',
+                key: 'proxiwash',
+                title: i18n.t('intro.slideProxiwash.title'),
+                text: i18n.t('intro.slideProxiwash.text'),
+                icon: 'washing-machine',
+                colors: ['#1fa5ee', '#06537d'],
+            },
+            {
+                key: 'services',
                 title: i18n.t('intro.slideServices.title'),
                 text: i18n.t('intro.slideServices.text'),
-                view: () => this.getIconView("view-dashboard-variant",),
+                icon: 'view-dashboard-variant',
-                mascotStyle: MASCOT_STYLE.CUTE,
+                colors: ['#6737c1', '#281a5a'],
-                colors: ['#be1522', '#57080e'],
             },
             {
-                key: '4',
+                key: 'done',
                 title: i18n.t('intro.slideDone.title'),
                 text: i18n.t('intro.slideDone.text'),
-                view: () => this.getIconView("account-heart",),
+                icon: 'account-heart',
-                mascotStyle: MASCOT_STYLE.COOL,
+                colors: ['#b837c1', '#501a5a'],
-                colors: ['#9c165b', '#3e042b'],
             },
         ];
         this.updateSlides = [];
@@ -114,127 +103,50 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
                 key: '1',
                 title: i18n.t('intro.aprilFoolsSlide.title'),
                 text: i18n.t('intro.aprilFoolsSlide.text'),
-                view: () => <View/>,
+                icon: 'fish',
-                mascotStyle: MASCOT_STYLE.NORMAL,
                 colors: ['#e01928', '#be1522'],
             },
         ];
     }
 
+
     /**
      * Render item to be used for the intro introSlides
      *
      * @param item The item to be displayed
      * @param dimensions Dimensions of the item
      */
-    getIntroRenderItem = ({item, dimensions}: { item: Slide, dimensions: { width: number, height: number } }) => {
+    static getIntroRenderItem({item, dimensions}: Object) {
-        const index = parseInt(item.key);
         return (
             <LinearGradient
                 style={[
                     styles.mainContent,
-                    dimensions
+                    dimensions,
                 ]}
                 colors={item.colors}
                 start={{x: 0, y: 0.1}}
                 end={{x: 0.1, y: 1}}
             >
-                {this.state.currentSlide === index
+                {item.image !== undefined ?
-                    ? <View style={{height: "100%", flex: 1}}>
+                    <View style={styles.image}>
-                        <View style={{flex: 1}}>
+                        <Image
-                            {item.view()}
+                            source={item.image}
-                        </View>
+                            resizeMode={"contain"}
-                        <Animatable.View
+                            style={{width: '100%', height: '100%'}}
-                            animation={"fadeIn"}>
+                            />
-                            {index !== 0
+                    </View>
-                                ? <Animatable.View
+                    : <MaterialCommunityIcons
-                                    animation={"pulse"}
+                        name={item.icon}
-                                    iterationCount={"infinite"}
+                        color={'#fff'}
-                                    duration={2000}
+                        size={200}/>}
-                                    style={{
+                <View style={{marginTop: 20}}>
-                                        marginLeft: 30,
+                    <Text style={styles.title}>{item.title}</Text>
-                                        marginBottom: 0,
+                    <Text style={styles.text}>{item.text}</Text>
-                                        width: 80
+                </View>
-                                    }}>
-                                    <Mascot emotion={item.mascotStyle} size={80}/>
-                                </Animatable.View> : null}
-
-                            <View style={{
-                                marginLeft: 50,
-                                width: 0,
-                                height: 0,
-                                borderLeftWidth: 20,
-                                borderRightWidth: 0,
-                                borderBottomWidth: 20,
-                                borderStyle: 'solid',
-                                backgroundColor: 'transparent',
-                                borderLeftColor: 'transparent',
-                                borderRightColor: 'transparent',
-                                borderBottomColor: "rgba(0,0,0,0.60)",
-                            }}/>
-                            <Card style={{
-                                backgroundColor: "rgba(0,0,0,0.38)",
-                                marginHorizontal: 20,
-                                borderColor: "rgba(0,0,0,0.60)",
-                                borderWidth: 4,
-                                borderRadius: 10,
-                            }}>
-                                <Card.Content>
-                                    <Animatable.Text
-                                        animation={"fadeIn"}
-                                        delay={100}
-                                        style={styles.title}>
-                                        {item.title}
-                                    </Animatable.Text>
-                                    <Animatable.Text
-                                        animation={"fadeIn"}
-                                        delay={200}
-                                        style={styles.text}>
-                                        {item.text}
-                                    </Animatable.Text>
-                                </Card.Content>
-                            </Card>
-                        </Animatable.View>
-                    </View> : null}
             </LinearGradient>
         );
     }
 
-    getWelcomeView = () => {
-        return (
-            <View style={{flex: 1}}>
-                <View
-                    style={styles.center}>
-                    <Mascot
-                        size={250}
-                        emotion={MASCOT_STYLE.NORMAL}
-                        animated={true}
-                        entryAnimation={{
-                            animation: "bounceIn",
-                            duration: 2000,
-                        }}
-                    />
-                </View>
-            </View>
-        )
-    }
-
-    getIconView(icon: MaterialCommunityIconsGlyphs) {
-        return (
-            <View style={{flex: 1}}>
-                <Animatable.View
-                    style={styles.center}
-                    animation={"fadeIn"}
-                >
-                    <MaterialCommunityIcons
-                        name={icon}
-                        color={'#fff'}
-                        size={200}/>
-                </Animatable.View>
-            </View>
-        )
-    }
-
     setStatusBarColor(color: string) {
         if (Platform.OS === 'android')
             StatusBar.setBackgroundColor(color, true);
@@ -242,13 +154,12 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
 
     onSlideChange = (index: number, lastIndex: number) => {
         this.setStatusBarColor(this.currentSlides[index].colors[0]);
-        this.setState({currentSlide: index});
     };
 
     onSkip = () => {
-        this.setStatusBarColor(this.currentSlides[this.currentSlides.length - 1].colors[0]);
+        this.setStatusBarColor(this.currentSlides[this.currentSlides.length-1].colors[0]);
         if (this.sliderRef.current != null)
-            this.sliderRef.current.goToSlide(this.currentSlides.length - 1);
+            this.sliderRef.current.goToSlide(this.currentSlides.length-1);
     }
 
     onDone = () => {
@@ -256,42 +167,6 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
         this.props.onDone();
     }
 
-    renderNextButton = () => {
-        return (
-            <Animatable.View
-                animation={"fadeIn"}
-
-                style={{
-                    borderRadius: 25,
-                    padding: 5,
-                    backgroundColor: "rgba(0,0,0,0.2)"
-                }}>
-                <MaterialCommunityIcons
-                    name={"arrow-right"}
-                    color={'#fff'}
-                    size={40}/>
-            </Animatable.View>
-        )
-    }
-
-    renderDoneButton = () => {
-        return (
-            <Animatable.View
-                animation={"bounceIn"}
-
-                style={{
-                    borderRadius: 25,
-                    padding: 5,
-                    backgroundColor: "rgb(190,21,34)"
-                }}>
-                <MaterialCommunityIcons
-                    name={"check"}
-                    color={'#fff'}
-                    size={40}/>
-            </Animatable.View>
-        )
-    }
-
     render() {
         this.currentSlides = this.introSlides;
         if (this.props.isUpdate)
@@ -302,16 +177,16 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
         return (
             <AppIntroSlider
                 ref={this.sliderRef}
+                renderItem={CustomIntroSlider.getIntroRenderItem}
                 data={this.currentSlides}
-                extraData={this.state.currentSlide}
-
-                renderItem={this.getIntroRenderItem}
-                renderNextButton={this.renderNextButton}
-                renderDoneButton={this.renderDoneButton}
-
                 onDone={this.onDone}
+                bottomButton
+                showSkipButton
                 onSlideChange={this.onSlideChange}
                 onSkip={this.onSkip}
+                skipLabel={i18n.t('intro.buttons.skip')}
+                doneLabel={i18n.t('intro.buttons.done')}
+                nextLabel={i18n.t('intro.buttons.next')}
             />
         );
     }
@@ -321,7 +196,15 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
 
 const styles = StyleSheet.create({
     mainContent: {
-        paddingBottom: 100,
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingBottom: 100
+    },
+    image: {
+        width: 300,
+        height: 300,
+        marginBottom: -50,
     },
     text: {
         color: 'rgba(255, 255, 255, 0.8)',
@@ -336,10 +219,4 @@ const styles = StyleSheet.create({
         textAlign: 'center',
         marginBottom: 16,
     },
-    center: {
-        marginTop: 'auto',
-        marginBottom: 'auto',
-        marginRight: 'auto',
-        marginLeft: 'auto',
-    }
 });