From 3b977bdf6411a35988a6b18ab36fc3b03d769256 Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Tue, 21 Apr 2020 10:38:38 +0200
Subject: [PATCH] Added badge animation

---
 src/components/Home/SmallDashboardItem.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Home/SmallDashboardItem.js b/src/components/Home/SmallDashboardItem.js
index d3c8bab..6617c49 100644
--- a/src/components/Home/SmallDashboardItem.js
+++ b/src/components/Home/SmallDashboardItem.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 import {Badge, IconButton, withTheme} from 'react-native-paper';
 import {View} from "react-native";
 import type {CustomTheme} from "../../managers/ThemeManager";
-
+import * as Animatable from "react-native-animatable";
 
 type Props = {
     color: string,
@@ -15,6 +15,9 @@ type Props = {
     theme: CustomTheme,
 };
 
+const AnimatableBadge = Animatable.createAnimatableComponent(Badge);
+const AnimatableIconButton = Animatable.createAnimatableComponent(IconButton);
+
 /**
  * Component used to render a small dashboard item
  */
@@ -31,7 +34,7 @@ class SmallDashboardItem extends React.Component<Props> {
         const colors = props.theme.colors;
         return (
             <View>
-                <IconButton
+                <AnimatableIconButton
                     icon={props.icon}
                     color={
                         props.isAvailable
@@ -43,14 +46,17 @@ class SmallDashboardItem extends React.Component<Props> {
                 />
                 {
                     props.badgeNumber > 0 ?
-                        <Badge
+                        <AnimatableBadge
+                            animation={"zoomIn"}
+                            duration={300}
+                            useNativeDriver
                             style={{
                                 position: 'absolute',
                                 top: 5,
                                 right: 5
                             }}>
                             {props.badgeNumber}
-                        </Badge> : null
+                        </AnimatableBadge> : null
                 }
             </View>
         );