Improve list icon handling

src/components/Amicale/Vote/VoteResults.js

 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>,
         <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}
               />
           subtitle={`${i18n.t('screens.vote.results.subtitle')} ${
             props.dateEnd
           }`}
-          left={({size}: {size: number}): React.Node => (
-            <Avatar.Icon size={size} icon="podium-gold" />
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
+            <Avatar.Icon size={iconProps.size} icon="podium-gold" />
           )}
         />
         <Card.Content>

src/components/Amicale/Vote/VoteSelect.js

 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>,
           <Card.Title
             title={i18n.t('screens.vote.select.title')}
             subtitle={i18n.t('screens.vote.select.subtitle')}
-            left={({size}: {size: number}): React.Node => (
-              <Avatar.Icon size={size} icon="alert-decagram" />
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="alert-decagram" />
             )}
           />
           <Card.Content>

src/components/Amicale/Vote/VoteTease.js

 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,
         <Card.Title
           title={i18n.t('screens.vote.tease.title')}
           subtitle={i18n.t('screens.vote.tease.subtitle')}
-          left={({size}: {size: number}): React.Node => (
-            <Avatar.Icon size={size} icon="vote" />
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
+            <Avatar.Icon size={iconProps.size} icon="vote" />
           )}
         />
         <Card.Content>

src/components/Amicale/Vote/VoteWait.js

 // @flow
 
 import * as React from 'react';
-import {
-  ActivityIndicator,
-  Card,
-  Paragraph,
-  withTheme,
-} from 'react-native-paper';
+import {Avatar, 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,
               : i18n.t('screens.vote.wait.titleEnded')
           }
           subtitle={i18n.t('screens.vote.wait.subtitle')}
-          left={({size}: {size: number}): React.Node => (
-            <ActivityIndicator size={size} />
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
+            <Avatar.Icon size={iconProps.size} icon="progress-check" />
           )}
         />
         <Card.Content>

src/components/Animations/AnimatedAccordion.js

 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,
           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

 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,
   }
 
   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 => (
-            <List.Icon size={size} icon="comment-quote" />
+          left={(props: ListIconPropsType): React.Node => (
+            <List.Icon
+              color={props.color}
+              style={props.style}
+              icon="comment-quote"
+            />
           )}
-          right={({size}: {size: number}): React.Node => (
-            <List.Icon size={size} icon="chevron-right" />
+          right={(props: ListIconPropsType): React.Node => (
+            <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

 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,
               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

 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>,
       <Card style={styles.card}>
         <AnimatedAccordion
           title={i18n.t('screens.clubs.categories')}
-          left={({size}: {size: number}): React.Node => (
-            <List.Icon size={size} icon="star" />
+          left={(props: ListIconPropsType): React.Node => (
+            <List.Icon color={props.color} style={props.style} icon="star" />
           )}
           opened>
           <Text style={styles.text}>

src/components/Lists/DashboardEdit/DashboardEditItem.js

 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,
   }
 
   render(): React.Node {
-    const {props} = this;
+    const {item, onPress, height, isActive, theme} = this.props;
     return (
       <List.Item
-        title={props.item.title}
-        description={props.item.subtitle}
-        onPress={props.isActive ? null : props.onPress}
+        title={item.title}
+        description={item.subtitle}
+        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 =>
-          props.isActive ? (
+        right={(props: ListIconPropsType): React.Node =>
+          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
-            ? props.theme.colors.proxiwashFinishedColor
+          backgroundColor: isActive
+            ? theme.colors.proxiwashFinishedColor
             : 'transparent',
         }}
       />

src/components/Lists/PlanexGroups/GroupListAccordion.js

   PlanexGroupCategoryType,
 } from '../../../screens/Planex/GroupSelectionScreen';
 import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {ListIconPropsType} from '../../../constants/PaperStyles';
 
 type PropsType = {
   item: PlanexGroupCategoryType,
             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

 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,
       <List.Item
         title={props.item.name.replace(REPLACE_REGEX, ' ')}
         onPress={props.onPress}
-        left={({size}: {size: number}): React.Node => (
-          <List.Icon size={size} icon="chevron-right" />
+        left={(iconProps: ListIconPropsType): React.Node => (
+          <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

+// @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

 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,
         <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'}}
             />
       <Card style={{marginBottom: 10}}>
         <Card.Title
           title={i18n.t('screens.about.team')}
-          left={({size, color}: {size: number, color: string}): React.Node => (
-            <Avatar.Icon size={size} color={color} icon="account-multiple" />
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
+            <Avatar.Icon size={iconProps.size} icon="account-multiple" />
           )}
         />
         <Card.Content>
    * @param props
    * @return {*}
    */
-  static getChevronIcon({
-    size,
-    color,
-  }: {
-    size: number,
-    color: string,
-  }): React.Node {
-    return <List.Icon size={size} color={color} icon="chevron-right" />;
+  static getChevronIcon(props: ListIconPropsType): React.Node {
+    return (
+      <List.Icon color={props.color} style={props.style} icon="chevron-right" />
+    );
   }
 
   /**
    * @param props
    * @return {*}
    */
-  static getItemIcon(
-    item: ListItemType,
-    {size, color}: {size: number, color: string},
-  ): React.Node {
-    return <List.Icon size={size} color={color} icon={item.icon} />;
+  static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
+    return (
+      <List.Icon color={props.color} style={props.style} icon={item.icon} />
+    );
   }
 
   /**
    * @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

 
 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,
 
   keyExtractor = (item: DatasetItemType): string => item.email;
 
-  getChevronIcon = ({
-    size,
-    color,
-  }: {
-    size: number,
-    color: string,
-  }): React.Node => (
-    <List.Icon size={size} color={color} icon="chevron-right" />
+  getChevronIcon = (iconProps: ListIconPropsType): React.Node => (
+    <List.Icon
+      color={iconProps.color}
+      style={iconProps.style}
+      icon="chevron-right"
+    />
   );
 
   getRenderItem = ({item}: {item: DatasetItemType}): React.Node => {
       <List.Item
         title={item.name}
         description={item.email}
-        left={({size, color}: {size: number, color: string}): React.Node => (
-          <List.Icon size={size} color={color} icon={item.icon} />
+        left={(iconProps: ListIconPropsType): React.Node => (
+          <List.Icon
+            color={iconProps.color}
+            style={iconProps.style}
+            icon={item.icon}
+          />
         )}
         right={this.getChevronIcon}
         onPress={onPress}
           <Card.Title
             title={i18n.t('screens.amicaleAbout.title')}
             subtitle={i18n.t('screens.amicaleAbout.subtitle')}
-            left={({
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="information" />
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="information" />
             )}
           />
           <Card.Content>

src/screens/Amicale/Clubs/ClubAboutScreen.js

 
 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';
 
           <Card.Title
             title={i18n.t('screens.clubs.about.title')}
             subtitle={i18n.t('screens.clubs.about.subtitle')}
-            left={({size}: {size: number}): React.Node => (
-              <List.Icon size={size} icon="information" />
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="information" />
             )}
           />
           <Card.Content>

src/screens/Amicale/Clubs/ClubDisplayScreen.js

 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,
               ? 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

 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,
       <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}
           />
         )}
       />
         <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}
         <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}
         <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}
             ? 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'}
           />
       this.openClubDetailsScreen(item.id);
     };
     let description = i18n.t('screens.profile.isMember');
-    let icon = ({size, color}: {size: number, color: string}): React.Node => (
-      <List.Icon size={size} color={color} icon="chevron-right" />
+    let icon = (props: ListIconPropsType): React.Node => (
+      <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 => (
-        <List.Icon size={size} icon="star" color={theme.colors.primary} />
+      icon = (props: ListIconPropsType): React.Node => (
+        <List.Icon
+          style={props.style}
+          icon="star"
+          color={theme.colors.primary}
+        />
       );
     }
     return (

src/screens/Other/FeedbackScreen.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,
           <Card.Title
             title={i18n.t('screens.feedback.bugs')}
             subtitle={i18n.t('screens.feedback.bugsSubtitle')}
-            left={({
-              size,
-              color,
-            }: {
-              size: number,
-              color: number,
-            }): React.Node => (
-              <Avatar.Icon size={size} color={color} icon="bug" />
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="bug" />
             )}
           />
           <Card.Content>
           <Card.Title
             title={i18n.t('screens.feedback.title')}
             subtitle={i18n.t('screens.feedback.feedbackSubtitle')}
-            left={({
-              size,
-              color,
-            }: {
-              size: number,
-              color: number,
-            }): React.Node => (
-              <Avatar.Icon size={size} color={color} icon="comment" />
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="comment" />
             )}
           />
           <Card.Content>

src/screens/Other/Settings/SettingsScreen.js

 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,
       <List.Item
         title={title}
         description={subtitle}
-        left={({size, color}: {size: number, color: number}): React.Node => (
-          <List.Icon size={size} color={color} icon={icon} />
+        left={(props: ListIconPropsType): React.Node => (
+          <List.Icon color={props.color} style={props.style} icon={icon} />
         )}
         right={(): React.Node => (
           <Switch value={state} onValueChange={onPressCallback} />
         onPress={() => {
           navigation.navigate(route);
         }}
-        left={({size, color}: {size: number, color: number}): React.Node => (
-          <List.Icon size={size} color={color} icon={icon} />
+        left={(props: ListIconPropsType): React.Node => (
+          <List.Icon color={props.color} style={props.style} icon={icon} />
         )}
-        right={({size, color}: {size: number, color: number}): React.Node => (
-          <List.Icon size={size} color={color} icon="chevron-right" />
+        right={(props: ListIconPropsType): React.Node => (
+          <List.Icon
+            color={props.color}
+            style={props.style}
+            icon="chevron-right"
+          />
         )}
         onLongPress={onLongPress}
       />
             <List.Item
               title={i18n.t('screens.settings.startScreen')}
               description={i18n.t('screens.settings.startScreenSub')}
-              left={({
-                size,
-                color,
-              }: {
-                size: number,
-                color: number,
-              }): React.Node => (
-                <List.Icon size={size} color={color} icon="power" />
+              left={(props: ListIconPropsType): React.Node => (
+                <List.Icon
+                  color={props.color}
+                  style={props.style}
+                  icon="power"
+                />
               )}
             />
             {this.getStartScreenPicker()}
             <List.Item
               title={i18n.t('screens.settings.proxiwashNotifReminder')}
               description={i18n.t('screens.settings.proxiwashNotifReminderSub')}
-              left={({
-                size,
-                color,
-              }: {
-                size: number,
-                color: number,
-              }): React.Node => (
-                <List.Icon size={size} color={color} icon="washing-machine" />
+              left={(props: ListIconPropsType): React.Node => (
+                <List.Icon
+                  color={props.color}
+                  style={props.style}
+                  icon="washing-machine"
+                />
               )}
             />
             <View style={{marginLeft: 30}}>

src/screens/Proxiwash/ProxiwashAboutScreen.js

 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';
 
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.dryer')}
-            left={({
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="tumble-dryer" />
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="tumble-dryer" />
             )}
           />
           <Card.Content>
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.washer')}
-            left={({
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="washing-machine" />
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="washing-machine" />
             )}
           />
           <Card.Content>
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.tariffs')}
-            left={({
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="circle-multiple" />
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="circle-multiple" />
             )}
           />
           <Card.Content>
           style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.paymentMethods')}
-            left={({
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="cash" />
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="cash" />
             )}
           />
           <Card.Content>

src/screens/Services/Proximo/ProximoAboutScreen.js

 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';
 
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proximo.openingHours')}
-            left={({
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="clock-outline" />
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="clock-outline" />
             )}
           />
           <Card.Content>
           style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
           <Card.Title
             title={i18n.t('screens.proximo.paymentMethods')}
-            left={({
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="cash" />
+            left={(iconProps: CardTitleIconPropsType): React.Node => (
+              <Avatar.Icon size={iconProps.size} icon="cash" />
             )}
           />
           <Card.Content>

src/screens/Services/Proximo/ProximoMainScreen.js

 } 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;
           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 => (
-            <List.Icon size={size} color={color} icon="chevron-right" />
+          right={(props: ListIconPropsType): React.Node => (
+            <List.Icon
+              color={props.color}
+              style={props.style}
+              icon="chevron-right"
+            />
           )}
           style={{
             height: LIST_ITEM_HEIGHT,

src/screens/Services/ServicesScreen.js

             title={item.title}
             subtitle={item.subtitle}
             left={(): React.Node => this.getListTitleImage(item.image)}
-            right={({size}: {size: number}): React.Node => (
-              <List.Icon size={size} icon="chevron-right" />
-            )}
+            right={(): React.Node => <List.Icon icon="chevron-right" />}
           />
           <CardList dataset={item.content} isHorizontal />
         </View>