Improve favorite buttons

src/components/Lists/PlanexGroups/GroupListItem.js

@@ -1,8 +1,9 @@
 // @flow
 
 import * as React from 'react';
-import {IconButton, List, withTheme} from 'react-native-paper';
+import {List, TouchableRipple, withTheme} from 'react-native-paper';
 import * as Animatable from 'react-native-animatable';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import type {CustomThemeType} from '../../../managers/ThemeManager';
 import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
 import type {ListIconPropsType} from '../../../constants/PaperStyles';
@@ -21,7 +22,7 @@ const REPLACE_REGEX = /_/g;
 class GroupListItem extends React.Component<PropsType> {
   isFav: boolean;
 
-  starRef = {current: null | IconButton};
+  starRef: null | Animatable.View;
 
   constructor(props: PropsType) {
     super(props);
@@ -38,6 +39,16 @@ class GroupListItem extends React.Component<PropsType> {
     return shouldUpdate;
   }
 
+  onStarPress = () => {
+    const {props} = this;
+    const ref = this.starRef;
+    if (ref != null) {
+      if (this.isFav) ref.rubberBand();
+      else ref.swing();
+    }
+    props.onStarPress();
+  };
+
   isGroupInFavorites(favorites: Array<PlanexGroupType>): boolean {
     const {item} = this.props;
     for (let i = 0; i < favorites.length; i += 1) {
@@ -46,15 +57,6 @@ 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;
@@ -69,14 +71,27 @@ class GroupListItem extends React.Component<PropsType> {
             icon="chevron-right"
           />
         )}
-        right={({size, color}: {size: number, color: string}): React.Node => (
+        right={(iconProps: ListIconPropsType): React.Node => (
-          <Animatable.View ref={this.starRef} useNativeDriver>
+          <Animatable.View
-            <IconButton
+            ref={(ref: Animatable.View) => {
-              size={size}
+              this.starRef = ref;
-              icon="star"
+            }}
+            useNativeDriver>
+            <TouchableRipple
               onPress={this.onStarPress}
-              color={this.isFav ? colors.tetrisScore : color}
+              style={{
-            />
+                marginRight: 10,
+                marginLeft: 'auto',
+                marginTop: 'auto',
+                marginBottom: 'auto',
+              }}>
+              <MaterialCommunityIcons
+                size={30}
+                style={{padding: 10}}
+                name="star"
+                color={this.isFav ? colors.tetrisScore : iconProps.color}
+              />
+            </TouchableRipple>
           </Animatable.View>
         )}
         style={{