Add star press animation

This commit is contained in:
Arnaud Vergnet 2020-08-06 17:48:35 +02:00
parent 327488a470
commit b378473591

View file

@ -2,6 +2,7 @@
import * as React from 'react'; import * as React from 'react';
import {IconButton, List, withTheme} from 'react-native-paper'; import {IconButton, List, withTheme} from 'react-native-paper';
import * as Animatable from 'react-native-animatable';
import type {CustomThemeType} from '../../../managers/ThemeManager'; import type {CustomThemeType} from '../../../managers/ThemeManager';
import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen'; import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
@ -19,6 +20,8 @@ const REPLACE_REGEX = /_/g;
class GroupListItem extends React.Component<PropsType> { class GroupListItem extends React.Component<PropsType> {
isFav: boolean; isFav: boolean;
starRef = {current: null | IconButton};
constructor(props: PropsType) { constructor(props: PropsType) {
super(props); super(props);
this.isFav = this.isGroupInFavorites(props.favorites); this.isFav = this.isGroupInFavorites(props.favorites);
@ -42,6 +45,15 @@ class GroupListItem extends React.Component<PropsType> {
return false; return false;
} }
onStarPress = () => {
const {props} = this;
if (this.starRef.current != null) {
if (this.isFav) this.starRef.current.rubberBand();
else this.starRef.current.swing();
}
props.onStarPress();
};
render(): React.Node { render(): React.Node {
const {props} = this; const {props} = this;
const {colors} = props.theme; const {colors} = props.theme;
@ -53,12 +65,14 @@ class GroupListItem extends React.Component<PropsType> {
<List.Icon size={size} icon="chevron-right" /> <List.Icon size={size} icon="chevron-right" />
)} )}
right={({size, color}: {size: number, color: string}): React.Node => ( right={({size, color}: {size: number, color: string}): React.Node => (
<Animatable.View ref={this.starRef} useNativeDriver>
<IconButton <IconButton
size={size} size={size}
icon="star" icon="star"
onPress={props.onStarPress} onPress={this.onStarPress}
color={this.isFav ? colors.tetrisScore : color} color={this.isFav ? colors.tetrisScore : color}
/> />
</Animatable.View>
)} )}
style={{ style={{
height: props.height, height: props.height,