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
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import {IconButton, List, withTheme} from 'react-native-paper';
4
 import {IconButton, List, withTheme} from 'react-native-paper';
5
+import * as Animatable from 'react-native-animatable';
5
 import type {CustomThemeType} from '../../../managers/ThemeManager';
6
 import type {CustomThemeType} from '../../../managers/ThemeManager';
6
 import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
7
 import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
7
 
8
 
19
 class GroupListItem extends React.Component<PropsType> {
20
 class GroupListItem extends React.Component<PropsType> {
20
   isFav: boolean;
21
   isFav: boolean;
21
 
22
 
23
+  starRef = {current: null | IconButton};
24
+
22
   constructor(props: PropsType) {
25
   constructor(props: PropsType) {
23
     super(props);
26
     super(props);
24
     this.isFav = this.isGroupInFavorites(props.favorites);
27
     this.isFav = this.isGroupInFavorites(props.favorites);
42
     return false;
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
   render(): React.Node {
57
   render(): React.Node {
46
     const {props} = this;
58
     const {props} = this;
47
     const {colors} = props.theme;
59
     const {colors} = props.theme;
53
           <List.Icon size={size} icon="chevron-right" />
65
           <List.Icon size={size} icon="chevron-right" />
54
         )}
66
         )}
55
         right={({size, color}: {size: number, color: string}): React.Node => (
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
         style={{
77
         style={{
64
           height: props.height,
78
           height: props.height,

Loading…
Cancel
Save