Added badge animation

This commit is contained in:
Arnaud Vergnet 2020-04-21 10:38:38 +02:00
parent dca27e091c
commit 3b977bdf64

View file

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