Improved intro slides

locales/fr.json

@@ -380,7 +380,7 @@
       "text": "Regarde ton emploi du temps et celui de tes amis avec un Planex adapté mobile !"
     },
     "slideEvents": {
-      "title": "Plein d'infos",
+      "title": "Les Events",
       "text": "Sois au courant de tout ce qui se passe sur le campus, de la vente de crêpes jusqu'aux concerts Enfoiros !"
     },
     "slideServices": {
@@ -388,7 +388,7 @@
       "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 !"
     },
     "slideDone": {
-      "title": "Réalisé par un étudiant",
+      "title": "Ton avis compte !",
       "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 !"
     },
     "updateSlide0": {

src/components/Mascot/MascotPopup.js

@@ -64,7 +64,7 @@ class MascotPopup extends React.Component<Props, State> {
     shouldComponentUpdate(nextProps: Props): boolean {
         if (nextProps.visible) {
             this.state.shouldShowDialog = true;
-        }else if (nextProps.visible !== this.props.visible) {
+        } else if (nextProps.visible !== this.props.visible) {
             setTimeout(this.onAnimationEnd, 300);
         }
         return true;
@@ -144,7 +144,7 @@ class MascotPopup extends React.Component<Props, State> {
                         </ScrollView>
                     </Card.Content>
 
-                    <Card.Actions>
+                    <Card.Actions style={{marginTop: 10, marginBottom: 10}}>
                         {this.getButtons()}
                     </Card.Actions>
                 </Card>
@@ -239,11 +239,17 @@ class MascotPopup extends React.Component<Props, State> {
                         marginTop: "auto",
                         marginBottom: "auto",
                     }}>
-                        {this.getMascot()}
+                        <View style={{
-                        {this.getSpeechBubble()}
+                            marginTop: -80,
+                        }}>
+                            {this.getMascot()}
+                            {this.getSpeechBubble()}
                     </View>
-                </Portal>
+
-            );
+                </View>
+        </Portal>
+        )
+            ;
         } else
             return null;
 

src/components/Overrides/CustomIntroSlider.js

@@ -91,7 +91,7 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
                 key: '4',
                 title: i18n.t('intro.slideDone.title'),
                 text: i18n.t('intro.slideDone.text'),
-                view: () => this.getIconView("account-heart",),
+                view: () => this.getEndView(),
                 mascotStyle: MASCOT_STYLE.COOL,
                 colors: ['#9c165b', '#3e042b'],
             },
@@ -146,7 +146,7 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
                         </View>
                         <Animatable.View
                             animation={"fadeIn"}>
-                            {index !== 0
+                            {index !== 0 && index !== this.introSlides.length -1
                                 ? <Animatable.View
                                     animation={"pulse"}
                                     iterationCount={"infinite"}
@@ -154,9 +154,10 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
                                     style={{
                                         marginLeft: 30,
                                         marginBottom: 0,
-                                        width: 80
+                                        width: 100,
+                                        marginTop: -30,
                                     }}>
-                                    <Mascot emotion={item.mascotStyle} size={80}/>
+                                    <Mascot emotion={item.mascotStyle} size={100}/>
                                 </Animatable.View> : null}
 
                             <View style={{
@@ -200,6 +201,30 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
         );
     }
 
+    getEndView = () => {
+        return (
+            <View style={{flex: 1}}>
+                <View
+                    style={styles.center}>
+                    <Mascot
+                        size={250}
+                        emotion={MASCOT_STYLE.COOL}
+                        animated={true}
+                        entryAnimation={{
+                            animation: "slideInDown",
+                            duration: 2000,
+                        }}
+                        loopAnimation={{
+                            animation: "pulse",
+                            duration: 2000,
+                            iterationCount: "infinite"
+                        }}
+                    />
+                </View>
+            </View>
+        );
+    }
+
     getWelcomeView = () => {
         return (
             <View style={{flex: 1}}>
@@ -214,6 +239,43 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
                             duration: 2000,
                         }}
                     />
+                    <Animatable.Text
+                        useNativeDriver={true}
+                        animation={"fadeInUp"}
+                        duration={500}
+
+                        style={{
+                        color: "#fff",
+                        textAlign: "center",
+                        fontSize: 25,
+                    }}>
+                        PABLO
+                    </Animatable.Text>
+                    <Animatable.View
+                        useNativeDriver={true}
+                        animation={"fadeInUp"}
+                        duration={500}
+                        delay={200}
+
+                        style={{
+                            position: "absolute",
+                            top: 210,
+                            left: 160,
+                            width: 50,
+                            height: 50,
+                        }}>
+                        <MaterialCommunityIcons
+                            style={{
+                                marginLeft: "auto",
+                                marginRight: "auto",
+                                marginTop: "auto",
+                                marginBottom: "auto",
+                                transform: [{rotateZ: "70deg"}],
+                            }}
+                            name={"undo"}
+                            color={'#fff'}
+                            size={40}/>
+                    </Animatable.View>
                 </View>
             </View>
         )

src/components/Tabbar/TabIcon.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import {View} from "react-native";
 import {TouchableRipple, withTheme} from 'react-native-paper';
+import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import * as Animatable from "react-native-animatable";
 
@@ -10,15 +11,13 @@ type Props = {
     focused: boolean,
     color: string,
     label: string,
-    icon: string,
+    icon: MaterialCommunityIconsGlyphs,
     onPress: Function,
     onLongPress: Function,
     theme: Object,
     extraData: any,
 }
 
-const AnimatedIcon = Animatable.createAnimatableComponent(MaterialCommunityIcons);
-
 
 /**
  * Abstraction layer for Agenda component, using custom configuration
@@ -83,7 +82,7 @@ class TabIcon extends React.Component<Props> {
                         animation={props.focused ? "focusIn" : "focusOut"}
                         useNativeDriver
                     >
-                        <AnimatedIcon
+                        <MaterialCommunityIcons
                             name={props.icon}
                             color={props.color}
                             size={26}
@@ -112,4 +111,4 @@ class TabIcon extends React.Component<Props> {
     }
 }
 
-export default withTheme(TabIcon);
+export default withTheme(TabIcon);