Add star press animation

src/components/Lists/PlanexGroups/GroupListItem.js

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