Browse Source

Added mascot on home header

Arnaud Vergnet 1 year ago
parent
commit
5ad1e1d3f3
2 changed files with 38 additions and 7 deletions
  1. 14
    6
      src/components/Mascot/Mascot.js
  2. 24
    1
      src/navigation/TabNavigator.js

+ 14
- 6
src/components/Mascot/Mascot.js View File

@@ -54,15 +54,12 @@ export const MASCOT_STYLE = {
54 54
     LOVE: 6,
55 55
     COOL: 7,
56 56
     ANGRY: 8,
57
+    RANDOM: 999,
57 58
 };
58 59
 
59 60
 
60 61
 class Mascot extends React.Component<Props, State> {
61 62
 
62
-    state = {
63
-        currentEmotion: this.props.emotion
64
-    }
65
-
66 63
     static defaultProps = {
67 64
         animated: false,
68 65
         entryAnimation: {
@@ -91,6 +88,8 @@ class Mascot extends React.Component<Props, State> {
91 88
     onPress: (viewRef: AnimatableViewRef) => null;
92 89
     onLongPress: (viewRef: AnimatableViewRef) => null;
93 90
 
91
+    initialEmotion: number;
92
+
94 93
     constructor(props: Props) {
95 94
         super(props);
96 95
         this.viewRef = React.createRef();
@@ -106,12 +105,21 @@ class Mascot extends React.Component<Props, State> {
106 105
         this.glassesList[GLASSES_STYLE.NORMAL] = MASCOT_GLASSES;
107 106
         this.glassesList[GLASSES_STYLE.COOl] = MASCOT_SUNGLASSES;
108 107
 
108
+        this.initialEmotion = this.props.emotion;
109
+
110
+        if (this.initialEmotion === MASCOT_STYLE.RANDOM)
111
+            this.initialEmotion = Math.floor(Math.random() * MASCOT_STYLE.ANGRY) + 1;
112
+
113
+        this.state = {
114
+            currentEmotion: this.initialEmotion
115
+        }
116
+
109 117
         if (this.props.onPress == null) {
110 118
             this.onPress = (viewRef: AnimatableViewRef) => {
111 119
                 if (viewRef.current != null) {
112 120
                     this.setState({currentEmotion: MASCOT_STYLE.LOVE});
113 121
                     viewRef.current.rubberBand(1500).then(() => {
114
-                        this.setState({currentEmotion: this.props.emotion});
122
+                        this.setState({currentEmotion: this.initialEmotion});
115 123
                     });
116 124
 
117 125
                 }
@@ -125,7 +133,7 @@ class Mascot extends React.Component<Props, State> {
125 133
                 if (viewRef.current != null) {
126 134
                     this.setState({currentEmotion: MASCOT_STYLE.ANGRY});
127 135
                     viewRef.current.tada(1000).then(() => {
128
-                        this.setState({currentEmotion: this.props.emotion});
136
+                        this.setState({currentEmotion: this.initialEmotion});
129 137
                     });
130 138
 
131 139
                 }

+ 24
- 1
src/navigation/TabNavigator.js View File

@@ -9,7 +9,7 @@ import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
9 9
 import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
10 10
 import PlanexScreen from '../screens/Planex/PlanexScreen';
11 11
 import AsyncStorageManager from "../managers/AsyncStorageManager";
12
-import {useTheme} from 'react-native-paper';
12
+import {Title, useTheme} from 'react-native-paper';
13 13
 import {Platform} from 'react-native';
14 14
 import i18n from "i18n-js";
15 15
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
@@ -22,6 +22,8 @@ import WebsitesHomeScreen from "../screens/Services/ServicesScreen";
22 22
 import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen";
23 23
 import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
24 24
 import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
25
+import {View} from "react-native-animatable";
26
+import Mascot, {MASCOT_STYLE} from "../components/Mascot/Mascot";
25 27
 
26 28
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
27 29
 
@@ -113,6 +115,27 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
113 115
                         headerStyle: {
114 116
                             backgroundColor: colors.surface,
115 117
                         },
118
+                        headerTitle: (props) => <View style={{flexDirection: "row"}}>
119
+                            <Mascot
120
+                                emotion={MASCOT_STYLE.RANDOM}
121
+                                size={50}
122
+                                animated={true}
123
+                                entryAnimation={{
124
+                                    animation: "bounceIn",
125
+                                    duration: 1000
126
+                                }}
127
+                                loopAnimation={{
128
+                                    animation: "pulse",
129
+                                    duration: 2000,
130
+                                    iterationCount: "infinite"
131
+                                }}
132
+                            />
133
+                            <Title style={{
134
+                                marginLeft: 10,
135
+                                marginTop: "auto",
136
+                                marginBottom: "auto",
137
+                            }}>{i18n.t('screens.home.title')}</Title>
138
+                        </View>
116 139
                     }}
117 140
                     initialParams={params}
118 141
                 />,

Loading…
Cancel
Save