Browse Source

Add star press animation

Arnaud Vergnet 3 years ago
parent
commit
b378473591
1 changed files with 20 additions and 6 deletions
  1. 20
    6
      src/components/Lists/PlanexGroups/GroupListItem.js

+ 20
- 6
src/components/Lists/PlanexGroups/GroupListItem.js View File

@@ -2,6 +2,7 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {IconButton, List, withTheme} from 'react-native-paper';
5
+import * as Animatable from 'react-native-animatable';
5 6
 import type {CustomThemeType} from '../../../managers/ThemeManager';
6 7
 import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
7 8
 
@@ -19,6 +20,8 @@ const REPLACE_REGEX = /_/g;
19 20
 class GroupListItem extends React.Component<PropsType> {
20 21
   isFav: boolean;
21 22
 
23
+  starRef = {current: null | IconButton};
24
+
22 25
   constructor(props: PropsType) {
23 26
     super(props);
24 27
     this.isFav = this.isGroupInFavorites(props.favorites);
@@ -42,6 +45,15 @@ class GroupListItem extends React.Component<PropsType> {
42 45
     return false;
43 46
   }
44 47
 
48
+  onStarPress = () => {
49
+    const {props} = this;
50
+    if (this.starRef.current != null) {
51
+      if (this.isFav) this.starRef.current.rubberBand();
52
+      else this.starRef.current.swing();
53
+    }
54
+    props.onStarPress();
55
+  };
56
+
45 57
   render(): React.Node {
46 58
     const {props} = this;
47 59
     const {colors} = props.theme;
@@ -53,12 +65,14 @@ class GroupListItem extends React.Component<PropsType> {
53 65
           <List.Icon size={size} icon="chevron-right" />
54 66
         )}
55 67
         right={({size, color}: {size: number, color: string}): React.Node => (
56
-          <IconButton
57
-            size={size}
58
-            icon="star"
59
-            onPress={props.onStarPress}
60
-            color={this.isFav ? colors.tetrisScore : color}
61
-          />
68
+          <Animatable.View ref={this.starRef} useNativeDriver>
69
+            <IconButton
70
+              size={size}
71
+              icon="star"
72
+              onPress={this.onStarPress}
73
+              color={this.isFav ? colors.tetrisScore : color}
74
+            />
75
+          </Animatable.View>
62 76
         )}
63 77
         style={{
64 78
           height: props.height,

Loading…
Cancel
Save