Improve list icon handling

src/components/Amicale/Vote/VoteResults.js

@@ -13,6 +13,10 @@ import {FlatList, StyleSheet} from 'react-native';
 import i18n from 'i18n-js';
 import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen';
 import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {
+  CardTitleIconPropsType,
+  ListIconPropsType,
+} from '../../../constants/PaperStyles';
 
 type PropsType = {
   teams: Array<VoteTeamType>,
@@ -78,10 +82,10 @@ class VoteResults extends React.Component<PropsType> {
         <List.Item
           title={item.name}
           description={`${item.votes} ${i18n.t('screens.vote.results.votes')}`}
-          left={({size}: {size: number}): React.Node =>
+          left={(iconProps: ListIconPropsType): React.Node =>
             isWinner ? (
               <List.Icon
-                size={size}
+                style={iconProps.style}
                 icon={isDraw ? 'trophy-outline' : 'trophy'}
                 color={props.theme.colors.primary}
               />
@@ -111,8 +115,8 @@ class VoteResults extends React.Component<PropsType> {
           subtitle={`${i18n.t('screens.vote.results.subtitle')} ${
             props.dateEnd
           }`}
-          left={({size}: {size: number}): React.Node => (
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
-            <Avatar.Icon size={size} icon="podium-gold" />
+            <Avatar.Icon size={iconProps.size} icon="podium-gold" />
           )}
         />
         <Card.Content>

src/components/Amicale/Vote/VoteSelect.js

@@ -8,6 +8,7 @@ import ConnectionManager from '../../../managers/ConnectionManager';
 import LoadingConfirmDialog from '../../Dialogs/LoadingConfirmDialog';
 import ErrorDialog from '../../Dialogs/ErrorDialog';
 import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen';
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
 
 type PropsType = {
   teams: Array<VoteTeamType>,
@@ -99,8 +100,8 @@ export default class VoteSelect extends React.PureComponent<
           <Card.Title
             title={i18n.t('screens.vote.select.title')}
             subtitle={i18n.t('screens.vote.select.subtitle')}
-            left={({size}: {size: number}): React.Node => (
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              <Avatar.Icon size={size} icon="alert-decagram" />
+              <Avatar.Icon size={iconProps.size} icon="alert-decagram" />
             )}
           />
           <Card.Content>

src/components/Amicale/Vote/VoteTease.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import {Avatar, Card, Paragraph} from 'react-native-paper';
 import {StyleSheet} from 'react-native';
 import i18n from 'i18n-js';
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
 
 type PropsType = {
   startDate: string,
@@ -30,8 +31,8 @@ export default class VoteTease extends React.Component<PropsType> {
         <Card.Title
           title={i18n.t('screens.vote.tease.title')}
           subtitle={i18n.t('screens.vote.tease.subtitle')}
-          left={({size}: {size: number}): React.Node => (
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
-            <Avatar.Icon size={size} icon="vote" />
+            <Avatar.Icon size={iconProps.size} icon="vote" />
           )}
         />
         <Card.Content>

src/components/Amicale/Vote/VoteWait.js

@@ -1,15 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {
+import {Avatar, Card, Paragraph, withTheme} from 'react-native-paper';
-  ActivityIndicator,
-  Card,
-  Paragraph,
-  withTheme,
-} from 'react-native-paper';
 import {StyleSheet} from 'react-native';
 import i18n from 'i18n-js';
 import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
 
 type PropsType = {
   startDate: string | null,
@@ -45,8 +41,8 @@ class VoteWait extends React.Component<PropsType> {
               : i18n.t('screens.vote.wait.titleEnded')
           }
           subtitle={i18n.t('screens.vote.wait.subtitle')}
-          left={({size}: {size: number}): React.Node => (
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
-            <ActivityIndicator size={size} />
+            <Avatar.Icon size={iconProps.size} icon="progress-check" />
           )}
         />
         <Card.Content>

src/components/Animations/AnimatedAccordion.js

@@ -6,6 +6,7 @@ import {List, withTheme} from 'react-native-paper';
 import Collapsible from 'react-native-collapsible';
 import * as Animatable from 'react-native-animatable';
 import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {ListIconPropsType} from '../../constants/PaperStyles';
 
 type PropsType = {
   theme: CustomThemeType,
@@ -91,14 +92,13 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
           subtitle={props.subtitle}
           titleStyle={state.expanded ? {color: colors.primary} : null}
           onPress={this.toggleAccordion}
-          right={({size}: {size: number}): React.Node => (
+          right={(iconProps: ListIconPropsType): React.Node => (
             <AnimatedListIcon
               ref={this.chevronRef}
-              size={size}
+              style={iconProps.style}
               icon={this.chevronIcon}
-              color={state.expanded ? colors.primary : null}
+              color={state.expanded ? colors.primary : iconProps.color}
               useNativeDriver
-              style={{rotate: '0deg'}}
             />
           )}
           left={props.left}

src/components/Home/ActionsDashboardItem.js

@@ -6,6 +6,7 @@ import {View} from 'react-native';
 import i18n from 'i18n-js';
 import {StackNavigationProp} from '@react-navigation/stack';
 import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {ListIconPropsType} from '../../constants/PaperStyles';
 
 type PropsType = {
   navigation: StackNavigationProp,
@@ -19,19 +20,27 @@ class ActionsDashBoardItem extends React.Component<PropsType> {
   }
 
   render(): React.Node {
-    const {props} = this;
+    const {navigation} = this.props;
     return (
       <View>
         <List.Item
           title={i18n.t('screens.feedback.homeButtonTitle')}
           description={i18n.t('screens.feedback.homeButtonSubtitle')}
-          left={({size}: {size: number}): React.Node => (
+          left={(props: ListIconPropsType): React.Node => (
-            <List.Icon size={size} icon="comment-quote" />
+            <List.Icon
+              color={props.color}
+              style={props.style}
+              icon="comment-quote"
+            />
           )}
-          right={({size}: {size: number}): React.Node => (
+          right={(props: ListIconPropsType): React.Node => (
-            <List.Icon size={size} icon="chevron-right" />
+            <List.Icon
+              color={props.color}
+              style={props.style}
+              icon="chevron-right"
+            />
           )}
-          onPress={(): void => props.navigation.navigate('feedback')}
+          onPress={(): void => navigation.navigate('feedback')}
           style={{
             paddingTop: 0,
             paddingBottom: 0,

src/components/Home/EventDashboardItem.js

@@ -11,6 +11,7 @@ import {
 import {StyleSheet, View} from 'react-native';
 import i18n from 'i18n-js';
 import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
 
 type PropsType = {
   eventNumber: number,
@@ -76,11 +77,11 @@ class EventDashBoardItem extends React.Component<PropsType> {
               titleStyle={{color: textColor}}
               subtitle={subtitle}
               subtitleStyle={{color: textColor}}
-              left={(): React.Node => (
+              left={(iconProps: CardTitleIconPropsType): React.Node => (
                 <Avatar.Icon
                   icon="calendar-range"
                   color={iconColor}
-                  size={60}
+                  size={iconProps.size}
                   style={styles.avatar}
                 />
               )}

src/components/Lists/Clubs/ClubListHeader.js

@@ -7,6 +7,7 @@ import i18n from 'i18n-js';
 import AnimatedAccordion from '../../Animations/AnimatedAccordion';
 import {isItemInCategoryFilter} from '../../../utils/Search';
 import type {ClubCategoryType} from '../../../screens/Amicale/Clubs/ClubListScreen';
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
 
 type PropsType = {
   categories: Array<ClubCategoryType>,
@@ -74,8 +75,8 @@ class ClubListHeader extends React.Component<PropsType> {
       <Card style={styles.card}>
         <AnimatedAccordion
           title={i18n.t('screens.clubs.categories')}
-          left={({size}: {size: number}): React.Node => (
+          left={(props: ListIconPropsType): React.Node => (
-            <List.Icon size={size} icon="star" />
+            <List.Icon color={props.color} style={props.style} icon="star" />
           )}
           opened>
           <Text style={styles.text}>

src/components/Lists/DashboardEdit/DashboardEditItem.js

@@ -5,6 +5,7 @@ import {Image} from 'react-native';
 import {List, withTheme} from 'react-native-paper';
 import type {CustomThemeType} from '../../../managers/ThemeManager';
 import type {ServiceItemType} from '../../../managers/ServicesManager';
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
 
 type PropsType = {
   item: ServiceItemType,
@@ -21,36 +22,36 @@ class DashboardEditItem extends React.Component<PropsType> {
   }
 
   render(): React.Node {
-    const {props} = this;
+    const {item, onPress, height, isActive, theme} = this.props;
     return (
       <List.Item
-        title={props.item.title}
+        title={item.title}
-        description={props.item.subtitle}
+        description={item.subtitle}
-        onPress={props.isActive ? null : props.onPress}
+        onPress={isActive ? null : onPress}
         left={(): React.Node => (
           <Image
-            source={{uri: props.item.image}}
+            source={{uri: item.image}}
             style={{
               width: 40,
               height: 40,
             }}
           />
         )}
-        right={({size}: {size: number}): React.Node =>
+        right={(props: ListIconPropsType): React.Node =>
-          props.isActive ? (
+          isActive ? (
             <List.Icon
-              size={size}
+              style={props.style}
               icon="check"
-              color={props.theme.colors.success}
+              color={theme.colors.success}
             />
           ) : null
         }
         style={{
-          height: props.height,
+          height,
           justifyContent: 'center',
           paddingLeft: 30,
-          backgroundColor: props.isActive
+          backgroundColor: isActive
-            ? props.theme.colors.proxiwashFinishedColor
+            ? theme.colors.proxiwashFinishedColor
             : 'transparent',
         }}
       />

src/components/Lists/PlanexGroups/GroupListAccordion.js

@@ -11,6 +11,7 @@ import type {
   PlanexGroupCategoryType,
 } from '../../../screens/Planex/GroupSelectionScreen';
 import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
 
 type PropsType = {
   item: PlanexGroupCategoryType,
@@ -87,10 +88,10 @@ class GroupListAccordion extends React.Component<PropsType> {
             height: props.height,
             justifyContent: 'center',
           }}
-          left={({size}: {size: number}): React.Node =>
+          left={(iconProps: ListIconPropsType): React.Node =>
             item.id === 0 ? (
               <List.Icon
-                size={size}
+                style={iconProps.style}
                 icon="star"
                 color={props.theme.colors.tetrisScore}
               />

src/components/Lists/PlanexGroups/GroupListItem.js

@@ -5,6 +5,7 @@ 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';
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
 
 type PropsType = {
   theme: CustomThemeType,
@@ -61,8 +62,12 @@ class GroupListItem extends React.Component<PropsType> {
       <List.Item
         title={props.item.name.replace(REPLACE_REGEX, ' ')}
         onPress={props.onPress}
-        left={({size}: {size: number}): React.Node => (
+        left={(iconProps: ListIconPropsType): React.Node => (
-          <List.Icon size={size} icon="chevron-right" />
+          <List.Icon
+            color={iconProps.color}
+            style={iconProps.style}
+            icon="chevron-right"
+          />
         )}
         right={({size, color}: {size: number, color: string}): React.Node => (
           <Animatable.View ref={this.starRef} useNativeDriver>

src/constants/PaperStyles.js

@@ -0,0 +1,12 @@
+// @flow
+
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+
+export type ListIconPropsType = {
+  color: string,
+  style: ViewStyleProp,
+};
+
+export type CardTitleIconPropsType = {
+  size: number,
+};

src/screens/About/AboutScreen.js

@@ -8,6 +8,10 @@ import {StackNavigationProp} from '@react-navigation/stack';
 import packageJson from '../../../package.json';
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
 import APP_LOGO from '../../../assets/android.icon.png';
+import type {
+  CardTitleIconPropsType,
+  ListIconPropsType,
+} from '../../constants/PaperStyles';
 
 type ListItemType = {
   onPressCallback: () => void,
@@ -217,9 +221,9 @@ class AboutScreen extends React.Component<PropsType> {
         <Card.Title
           title="Campus"
           subtitle={packageJson.version}
-          left={({size}: {size: number}): React.Node => (
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
             <Avatar.Image
-              size={size}
+              size={iconProps.size}
               source={APP_LOGO}
               style={{backgroundColor: 'transparent'}}
             />
@@ -246,8 +250,8 @@ class AboutScreen extends React.Component<PropsType> {
       <Card style={{marginBottom: 10}}>
         <Card.Title
           title={i18n.t('screens.about.team')}
-          left={({size, color}: {size: number, color: string}): React.Node => (
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
-            <Avatar.Icon size={size} color={color} icon="account-multiple" />
+            <Avatar.Icon size={iconProps.size} icon="account-multiple" />
           )}
         />
         <Card.Content>
@@ -296,14 +300,10 @@ class AboutScreen extends React.Component<PropsType> {
    * @param props
    * @return {*}
    */
-  static getChevronIcon({
+  static getChevronIcon(props: ListIconPropsType): React.Node {
-    size,
+    return (
-    color,
+      <List.Icon color={props.color} style={props.style} icon="chevron-right" />
-  }: {
+    );
-    size: number,
-    color: string,
-  }): React.Node {
-    return <List.Icon size={size} color={color} icon="chevron-right" />;
   }
 
   /**
@@ -313,11 +313,10 @@ class AboutScreen extends React.Component<PropsType> {
    * @param props
    * @return {*}
    */
-  static getItemIcon(
+  static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
-    item: ListItemType,
+    return (
-    {size, color}: {size: number, color: string},
+      <List.Icon color={props.color} style={props.style} icon={item.icon} />
-  ): React.Node {
+    );
-    return <List.Icon size={size} color={color} icon={item.icon} />;
   }
 
   /**
@@ -326,7 +325,7 @@ class AboutScreen extends React.Component<PropsType> {
    * @returns {*}
    */
   getCardItem = ({item}: {item: ListItemType}): React.Node => {
-    const getItemIcon = (props: {size: number, color: string}): React.Node =>
+    const getItemIcon = (props: ListIconPropsType): React.Node =>
       AboutScreen.getItemIcon(item, props);
     if (item.showChevron) {
       return (

src/screens/Amicale/AmicaleContactScreen.js

@@ -2,11 +2,15 @@
 
 import * as React from 'react';
 import {FlatList, Image, Linking, View} from 'react-native';
-import {Card, List, Text, withTheme} from 'react-native-paper';
+import {Card, List, Text, withTheme, Avatar} from 'react-native-paper';
 import i18n from 'i18n-js';
 import type {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons';
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
 import AMICALE_LOGO from '../../../assets/amicale.png';
+import type {
+  CardTitleIconPropsType,
+  ListIconPropsType,
+} from '../../constants/PaperStyles';
 
 type DatasetItemType = {
   name: string,
@@ -74,14 +78,12 @@ class AmicaleContactScreen extends React.Component<null> {
 
   keyExtractor = (item: DatasetItemType): string => item.email;
 
-  getChevronIcon = ({
+  getChevronIcon = (iconProps: ListIconPropsType): React.Node => (
-    size,
+    <List.Icon
-    color,
+      color={iconProps.color}
-  }: {
+      style={iconProps.style}
-    size: number,
+      icon="chevron-right"
-    color: string,
+    />
-  }): React.Node => (
-    <List.Icon size={size} color={color} icon="chevron-right" />
   );
 
   getRenderItem = ({item}: {item: DatasetItemType}): React.Node => {
@@ -92,8 +94,12 @@ class AmicaleContactScreen extends React.Component<null> {
       <List.Item
         title={item.name}
         description={item.email}
-        left={({size, color}: {size: number, color: string}): React.Node => (
+        left={(iconProps: ListIconPropsType): React.Node => (
-          <List.Icon size={size} color={color} icon={item.icon} />
+          <List.Icon
+            color={iconProps.color}
+            style={iconProps.style}
+            icon={item.icon}
+          />
         )}
         right={this.getChevronIcon}
         onPress={onPress}
@@ -123,14 +129,8 @@ class AmicaleContactScreen extends React.Component<null> {
           <Card.Title
             title={i18n.t('screens.amicaleAbout.title')}
             subtitle={i18n.t('screens.amicaleAbout.subtitle')}
-            left={({
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              size,
+              <Avatar.Icon size={iconProps.size} icon="information" />
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="information" />
             )}
           />
           <Card.Content>

src/screens/Amicale/Clubs/ClubAboutScreen.js

@@ -2,11 +2,12 @@
 
 import * as React from 'react';
 import {Image, View} from 'react-native';
-import {Card, List, Text, withTheme} from 'react-native-paper';
+import {Card, Avatar, Text, withTheme} from 'react-native-paper';
 import i18n from 'i18n-js';
 import Autolink from 'react-native-autolink';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
 import AMICALE_ICON from '../../../../assets/amicale.png';
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
 
 const CONTACT_LINK = 'clubs@amicale-insat.fr';
 
@@ -35,8 +36,8 @@ class ClubAboutScreen extends React.Component<null> {
           <Card.Title
             title={i18n.t('screens.clubs.about.title')}
             subtitle={i18n.t('screens.clubs.about.subtitle')}
-            left={({size}: {size: number}): React.Node => (
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              <List.Icon size={size} icon="information" />
+              <Avatar.Icon size={iconProps.size} icon="information" />
             )}
           />
           <Card.Content>

src/screens/Amicale/Clubs/ClubDisplayScreen.js

@@ -21,6 +21,7 @@ import type {CustomThemeType} from '../../../managers/ThemeManager';
 import {ERROR_TYPE} from '../../../utils/WebData';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
 import type {ApiGenericDataType} from '../../../utils/WebData';
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
 
 type PropsType = {
   navigation: StackNavigationProp,
@@ -133,9 +134,9 @@ class ClubDisplayScreen extends React.Component<PropsType> {
               ? i18n.t('screens.clubs.managersSubtitle')
               : i18n.t('screens.clubs.managersUnavailable')
           }
-          left={({size}: {size: number}): React.Node => (
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
             <Avatar.Icon
-              size={size}
+              size={iconProps.size}
               style={{backgroundColor: 'transparent'}}
               color={
                 hasManagers

src/screens/Amicale/ProfileScreen.js

@@ -25,6 +25,10 @@ import Mascot, {MASCOT_STYLE} from '../../components/Mascot/Mascot';
 import ServicesManager, {SERVICES_KEY} from '../../managers/ServicesManager';
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
 import type {ServiceItemType} from '../../managers/ServicesManager';
+import type {
+  CardTitleIconPropsType,
+  ListIconPropsType,
+} from '../../constants/PaperStyles';
 
 type PropsType = {
   navigation: StackNavigationProp,
@@ -229,11 +233,11 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
       <List.Item
         title={title}
         description={subtitle}
-        left={({size}: {size: number}): React.Node => (
+        left={(props: ListIconPropsType): React.Node => (
           <List.Icon
-            size={size}
+            style={props.style}
             icon={icon}
-            color={field != null ? null : theme.colors.textDisabled}
+            color={field != null ? props.color : theme.colors.textDisabled}
           />
         )}
       />
@@ -252,9 +256,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
         <Card.Title
           title={`${this.data.first_name} ${this.data.last_name}`}
           subtitle={this.data.email}
-          left={({size}: {size: number}): React.Node => (
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
             <Avatar.Icon
-              size={size}
+              size={iconProps.size}
               icon="account"
               color={theme.colors.primary}
               style={styles.icon}
@@ -305,9 +309,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
         <Card.Title
           title={i18n.t('screens.profile.clubs')}
           subtitle={i18n.t('screens.profile.clubsSubtitle')}
-          left={({size}: {size: number}): React.Node => (
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
             <Avatar.Icon
-              size={size}
+              size={iconProps.size}
               icon="account-group"
               color={theme.colors.primary}
               style={styles.icon}
@@ -334,9 +338,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
         <Card.Title
           title={i18n.t('screens.profile.membership')}
           subtitle={i18n.t('screens.profile.membershipSubtitle')}
-          left={({size}: {size: number}): React.Node => (
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
             <Avatar.Icon
-              size={size}
+              size={iconProps.size}
               icon="credit-card"
               color={theme.colors.primary}
               style={styles.icon}
@@ -366,9 +370,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
             ? i18n.t('screens.profile.membershipPayed')
             : i18n.t('screens.profile.membershipNotPayed')
         }
-        left={({size}: {size: number}): React.Node => (
+        left={(props: ListIconPropsType): React.Node => (
           <List.Icon
-            size={size}
+            style={props.style}
             color={state ? theme.colors.success : theme.colors.danger}
             icon={state ? 'check' : 'close'}
           />
@@ -389,13 +393,17 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
       this.openClubDetailsScreen(item.id);
     };
     let description = i18n.t('screens.profile.isMember');
-    let icon = ({size, color}: {size: number, color: string}): React.Node => (
+    let icon = (props: ListIconPropsType): React.Node => (
-      <List.Icon size={size} color={color} icon="chevron-right" />
+      <List.Icon color={props.color} style={props.style} icon="chevron-right" />
     );
     if (item.is_manager) {
       description = i18n.t('screens.profile.isManager');
-      icon = ({size}: {size: number}): React.Node => (
+      icon = (props: ListIconPropsType): React.Node => (
-        <List.Icon size={size} icon="star" color={theme.colors.primary} />
+        <List.Icon
+          style={props.style}
+          icon="star"
+          color={theme.colors.primary}
+        />
       );
     }
     return (

src/screens/Other/FeedbackScreen.js

@@ -6,6 +6,7 @@ import i18n from 'i18n-js';
 import {Linking} from 'react-native';
 import type {CustomThemeType} from '../../managers/ThemeManager';
 import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
+import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
 
 type PropsType = {
   theme: CustomThemeType,
@@ -91,14 +92,8 @@ class FeedbackScreen extends React.Component<PropsType> {
           <Card.Title
             title={i18n.t('screens.feedback.bugs')}
             subtitle={i18n.t('screens.feedback.bugsSubtitle')}
-            left={({
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              size,
+              <Avatar.Icon size={iconProps.size} icon="bug" />
-              color,
-            }: {
-              size: number,
-              color: number,
-            }): React.Node => (
-              <Avatar.Icon size={size} color={color} icon="bug" />
             )}
           />
           <Card.Content>
@@ -114,14 +109,8 @@ class FeedbackScreen extends React.Component<PropsType> {
           <Card.Title
             title={i18n.t('screens.feedback.title')}
             subtitle={i18n.t('screens.feedback.feedbackSubtitle')}
-            left={({
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              size,
+              <Avatar.Icon size={iconProps.size} icon="comment" />
-              color,
-            }: {
-              size: number,
-              color: number,
-            }): React.Node => (
-              <Avatar.Icon size={size} color={color} icon="comment" />
             )}
           />
           <Card.Content>

src/screens/Other/Settings/SettingsScreen.js

@@ -11,6 +11,7 @@ import ThemeManager from '../../../managers/ThemeManager';
 import AsyncStorageManager from '../../../managers/AsyncStorageManager';
 import CustomSlider from '../../../components/Overrides/CustomSlider';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
 
 type PropsType = {
   navigation: StackNavigationProp,
@@ -171,8 +172,8 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
       <List.Item
         title={title}
         description={subtitle}
-        left={({size, color}: {size: number, color: number}): React.Node => (
+        left={(props: ListIconPropsType): React.Node => (
-          <List.Icon size={size} color={color} icon={icon} />
+          <List.Icon color={props.color} style={props.style} icon={icon} />
         )}
         right={(): React.Node => (
           <Switch value={state} onValueChange={onPressCallback} />
@@ -196,11 +197,15 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
         onPress={() => {
           navigation.navigate(route);
         }}
-        left={({size, color}: {size: number, color: number}): React.Node => (
+        left={(props: ListIconPropsType): React.Node => (
-          <List.Icon size={size} color={color} icon={icon} />
+          <List.Icon color={props.color} style={props.style} icon={icon} />
         )}
-        right={({size, color}: {size: number, color: number}): React.Node => (
+        right={(props: ListIconPropsType): React.Node => (
-          <List.Icon size={size} color={color} icon="chevron-right" />
+          <List.Icon
+            color={props.color}
+            style={props.style}
+            icon="chevron-right"
+          />
         )}
         onLongPress={onLongPress}
       />
@@ -249,14 +254,12 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
             <List.Item
               title={i18n.t('screens.settings.startScreen')}
               description={i18n.t('screens.settings.startScreenSub')}
-              left={({
+              left={(props: ListIconPropsType): React.Node => (
-                size,
+                <List.Icon
-                color,
+                  color={props.color}
-              }: {
+                  style={props.style}
-                size: number,
+                  icon="power"
-                color: number,
+                />
-              }): React.Node => (
-                <List.Icon size={size} color={color} icon="power" />
               )}
             />
             {this.getStartScreenPicker()}
@@ -274,14 +277,12 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
             <List.Item
               title={i18n.t('screens.settings.proxiwashNotifReminder')}
               description={i18n.t('screens.settings.proxiwashNotifReminderSub')}
-              left={({
+              left={(props: ListIconPropsType): React.Node => (
-                size,
+                <List.Icon
-                color,
+                  color={props.color}
-              }: {
+                  style={props.style}
-                size: number,
+                  icon="washing-machine"
-                color: number,
+                />
-              }): React.Node => (
-                <List.Icon size={size} color={color} icon="washing-machine" />
               )}
             />
             <View style={{marginLeft: 30}}>

src/screens/Proxiwash/ProxiwashAboutScreen.js

@@ -3,9 +3,10 @@
 import * as React from 'react';
 import {Image, View} from 'react-native';
 import i18n from 'i18n-js';
-import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
+import {Card, Avatar, Paragraph, Text, Title} from 'react-native-paper';
 import CustomTabBar from '../../components/Tabbar/CustomTabBar';
 import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
+import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
 
 const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png';
 
@@ -35,14 +36,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.dryer')}
-            left={({
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              size,
+              <Avatar.Icon size={iconProps.size} icon="tumble-dryer" />
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="tumble-dryer" />
             )}
           />
           <Card.Content>
@@ -56,14 +51,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.washer')}
-            left={({
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              size,
+              <Avatar.Icon size={iconProps.size} icon="washing-machine" />
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="washing-machine" />
             )}
           />
           <Card.Content>
@@ -77,14 +66,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.tariffs')}
-            left={({
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              size,
+              <Avatar.Icon size={iconProps.size} icon="circle-multiple" />
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="circle-multiple" />
             )}
           />
           <Card.Content>
@@ -96,14 +79,8 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
           style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.paymentMethods')}
-            left={({
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              size,
+              <Avatar.Icon size={iconProps.size} icon="cash" />
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="cash" />
             )}
           />
           <Card.Content>

src/screens/Services/Proximo/ProximoAboutScreen.js

@@ -3,9 +3,10 @@
 import * as React from 'react';
 import {Image, View} from 'react-native';
 import i18n from 'i18n-js';
-import {Card, List, Paragraph, Text} from 'react-native-paper';
+import {Card, Avatar, Paragraph, Text} from 'react-native-paper';
 import CustomTabBar from '../../../components/Tabbar/CustomTabBar';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
+import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
 
 const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png';
 
@@ -35,14 +36,8 @@ export default class ProximoAboutScreen extends React.Component<null> {
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proximo.openingHours')}
-            left={({
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              size,
+              <Avatar.Icon size={iconProps.size} icon="clock-outline" />
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="clock-outline" />
             )}
           />
           <Card.Content>
@@ -53,14 +48,8 @@ export default class ProximoAboutScreen extends React.Component<null> {
           style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
           <Card.Title
             title={i18n.t('screens.proximo.paymentMethods')}
-            left={({
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              size,
+              <Avatar.Icon size={iconProps.size} icon="cash" />
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="cash" />
             )}
           />
           <Card.Content>

src/screens/Services/Proximo/ProximoMainScreen.js

@@ -10,6 +10,7 @@ import MaterialHeaderButtons, {
 } from '../../../components/Overrides/CustomHeaderButton';
 import type {CustomThemeType} from '../../../managers/ThemeManager';
 import type {SectionListDataType} from '../../../components/Screens/WebSectionList';
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
 
 const DATA_URL = 'https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json';
 const LIST_ITEM_HEIGHT = 84;
@@ -199,15 +200,19 @@ class ProximoMainScreen extends React.Component<PropsType> {
           title={item.type.name}
           description={subtitle}
           onPress={onPress}
-          left={({size}: {size: number}): React.Node => (
+          left={(props: ListIconPropsType): React.Node => (
             <List.Icon
-              size={size}
+              style={props.style}
               icon={item.type.icon}
               color={theme.colors.primary}
             />
           )}
-          right={({size, color}: {size: number, color: string}): React.Node => (
+          right={(props: ListIconPropsType): React.Node => (
-            <List.Icon size={size} color={color} icon="chevron-right" />
+            <List.Icon
+              color={props.color}
+              style={props.style}
+              icon="chevron-right"
+            />
           )}
           style={{
             height: LIST_ITEM_HEIGHT,

src/screens/Services/ServicesScreen.js

@@ -118,9 +118,7 @@ class ServicesScreen extends React.Component<PropsType> {
             title={item.title}
             subtitle={item.subtitle}
             left={(): React.Node => this.getListTitleImage(item.image)}
-            right={({size}: {size: number}): React.Node => (
+            right={(): React.Node => <List.Icon icon="chevron-right" />}
-              <List.Icon size={size} icon="chevron-right" />
-            )}
           />
           <CardList dataset={item.content} isHorizontal />
         </View>