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

Added mascot on home header

Browse source
This commit is contained in:
Arnaud Vergnet 2020-07-16 23:31:04 +02:00
parent 96c64a98e0
commit 5ad1e1d3f3
2 changed files with 38 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/Mascot/Mascot.js
View file

@ -54,15 +54,12 @@ export const MASCOT_STYLE = {
LOVE: 6, LOVE: 6,
COOL: 7, COOL: 7,
ANGRY: 8, ANGRY: 8,
RANDOM: 999,
}; };
class Mascot extends React.Component<Props, State> { class Mascot extends React.Component<Props, State> {
state = {
currentEmotion: this.props.emotion
}
static defaultProps = { static defaultProps = {
animated: false, animated: false,
entryAnimation: { entryAnimation: {
@ -91,6 +88,8 @@ class Mascot extends React.Component<Props, State> {
onPress: (viewRef: AnimatableViewRef) => null; onPress: (viewRef: AnimatableViewRef) => null;
onLongPress: (viewRef: AnimatableViewRef) => null; onLongPress: (viewRef: AnimatableViewRef) => null;
initialEmotion: number;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
this.viewRef = React.createRef(); this.viewRef = React.createRef();
@ -106,12 +105,21 @@ class Mascot extends React.Component<Props, State> {
this.glassesList[GLASSES_STYLE.NORMAL] = MASCOT_GLASSES; this.glassesList[GLASSES_STYLE.NORMAL] = MASCOT_GLASSES;
this.glassesList[GLASSES_STYLE.COOl] = MASCOT_SUNGLASSES; this.glassesList[GLASSES_STYLE.COOl] = MASCOT_SUNGLASSES;
this.initialEmotion = this.props.emotion;
if (this.initialEmotion === MASCOT_STYLE.RANDOM)
this.initialEmotion = Math.floor(Math.random() * MASCOT_STYLE.ANGRY) + 1;
this.state = {
currentEmotion: this.initialEmotion
}
if (this.props.onPress == null) { if (this.props.onPress == null) {
this.onPress = (viewRef: AnimatableViewRef) => { this.onPress = (viewRef: AnimatableViewRef) => {
if (viewRef.current != null) { if (viewRef.current != null) {
this.setState({currentEmotion: MASCOT_STYLE.LOVE}); this.setState({currentEmotion: MASCOT_STYLE.LOVE});
viewRef.current.rubberBand(1500).then(() => { viewRef.current.rubberBand(1500).then(() => {
this.setState({currentEmotion: this.props.emotion}); this.setState({currentEmotion: this.initialEmotion});
}); });
} }
@ -125,7 +133,7 @@ class Mascot extends React.Component<Props, State> {
if (viewRef.current != null) { if (viewRef.current != null) {
this.setState({currentEmotion: MASCOT_STYLE.ANGRY}); this.setState({currentEmotion: MASCOT_STYLE.ANGRY});
viewRef.current.tada(1000).then(() => { viewRef.current.tada(1000).then(() => {
this.setState({currentEmotion: this.props.emotion}); this.setState({currentEmotion: this.initialEmotion});
}); });
} }

25
src/navigation/TabNavigator.js
View file

@ -9,7 +9,7 @@ import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen'; import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
import PlanexScreen from '../screens/Planex/PlanexScreen'; import PlanexScreen from '../screens/Planex/PlanexScreen';
import AsyncStorageManager from "../managers/AsyncStorageManager"; import AsyncStorageManager from "../managers/AsyncStorageManager";
import {useTheme} from 'react-native-paper'; import {Title, useTheme} from 'react-native-paper';
import {Platform} from 'react-native'; import {Platform} from 'react-native';
import i18n from "i18n-js"; import i18n from "i18n-js";
import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen"; import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
@ -22,6 +22,8 @@ import WebsitesHomeScreen from "../screens/Services/ServicesScreen";
import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen"; import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen";
import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen"; import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils"; import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
import {View} from "react-native-animatable";
import Mascot, {MASCOT_STYLE} from "../components/Mascot/Mascot";
const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS; const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
@ -113,6 +115,27 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
headerStyle: { headerStyle: {
backgroundColor: colors.surface, backgroundColor: colors.surface,
}, },
headerTitle: (props) => <View style={{flexDirection: "row"}}>
<Mascot
emotion={MASCOT_STYLE.RANDOM}
size={50}
animated={true}
entryAnimation={{
animation: "bounceIn",
duration: 1000
}}
loopAnimation={{
animation: "pulse",
duration: 2000,
iterationCount: "infinite"
}}
/>
<Title style={{
marginLeft: 10,
marginTop: "auto",
marginBottom: "auto",
}}>{i18n.t('screens.home.title')}</Title>
</View>
}} }}
initialParams={params} initialParams={params}
/>, />,