App.js

@@ -165,9 +165,7 @@ export default class App extends React.Component<null, StateType> {
    */
   loadAssetsAsync = async () => {
     await AsyncStorageManager.getInstance().loadPreferences();
-    await ConnectionManager.getInstance()
+    await ConnectionManager.getInstance().recoverLogin();
-      .recoverLogin()
-      .catch(() => {});
   };
 
   /**

src/components/Amicale/Vote/VoteResults.js

@@ -13,10 +13,6 @@ 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>,
@@ -82,10 +78,10 @@ class VoteResults extends React.Component<PropsType> {
         <List.Item
           title={item.name}
           description={`${item.votes} ${i18n.t('screens.vote.results.votes')}`}
-          left={(iconProps: ListIconPropsType): React.Node =>
+          left={({size}: {size: number}): React.Node =>
             isWinner ? (
               <List.Icon
-                style={iconProps.style}
+                size={size}
                 icon={isDraw ? 'trophy-outline' : 'trophy'}
                 color={props.theme.colors.primary}
               />
@@ -115,8 +111,8 @@ class VoteResults extends React.Component<PropsType> {
           subtitle={`${i18n.t('screens.vote.results.subtitle')} ${
             props.dateEnd
           }`}
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
+          left={({size}: {size: number}): React.Node => (
-            <Avatar.Icon size={iconProps.size} icon="podium-gold" />
+            <Avatar.Icon size={size} icon="podium-gold" />
           )}
         />
         <Card.Content>

src/components/Amicale/Vote/VoteSelect.js

@@ -8,7 +8,6 @@ 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>,
@@ -100,8 +99,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={(iconProps: CardTitleIconPropsType): React.Node => (
+            left={({size}: {size: number}): React.Node => (
-              <Avatar.Icon size={iconProps.size} icon="alert-decagram" />
+              <Avatar.Icon size={size} icon="alert-decagram" />
             )}
           />
           <Card.Content>

src/components/Amicale/Vote/VoteTease.js

@@ -4,7 +4,6 @@ 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,
@@ -31,8 +30,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={(iconProps: CardTitleIconPropsType): React.Node => (
+          left={({size}: {size: number}): React.Node => (
-            <Avatar.Icon size={iconProps.size} icon="vote" />
+            <Avatar.Icon size={size} icon="vote" />
           )}
         />
         <Card.Content>

src/components/Amicale/Vote/VoteWait.js

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

src/components/Animations/AnimatedAccordion.js

@@ -6,7 +6,6 @@ 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,
@@ -92,13 +91,14 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
           subtitle={props.subtitle}
           titleStyle={state.expanded ? {color: colors.primary} : null}
           onPress={this.toggleAccordion}
-          right={(iconProps: ListIconPropsType): React.Node => (
+          right={({size}: {size: number}): React.Node => (
             <AnimatedListIcon
               ref={this.chevronRef}
-              style={iconProps.style}
+              size={size}
               icon={this.chevronIcon}
-              color={state.expanded ? colors.primary : iconProps.color}
+              color={state.expanded ? colors.primary : null}
               useNativeDriver
+              style={{rotate: '0deg'}}
             />
           )}
           left={props.left}

src/components/Home/ActionsDashboardItem.js

@@ -6,7 +6,6 @@ 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,
@@ -20,27 +19,19 @@ class ActionsDashBoardItem extends React.Component<PropsType> {
   }
 
   render(): React.Node {
-    const {navigation} = this.props;
+    const {props} = this;
     return (
       <View>
         <List.Item
           title={i18n.t('screens.feedback.homeButtonTitle')}
           description={i18n.t('screens.feedback.homeButtonSubtitle')}
-          left={(props: ListIconPropsType): React.Node => (
+          left={({size}: {size: number}): React.Node => (
-            <List.Icon
+            <List.Icon size={size} icon="comment-quote" />
-              color={props.color}
-              style={props.style}
-              icon="comment-quote"
-            />
           )}
-          right={(props: ListIconPropsType): React.Node => (
+          right={({size}: {size: number}): React.Node => (
-            <List.Icon
+            <List.Icon size={size} icon="chevron-right" />
-              color={props.color}
-              style={props.style}
-              icon="chevron-right"
-            />
           )}
-          onPress={(): void => navigation.navigate('feedback')}
+          onPress={(): void => props.navigation.navigate('feedback')}
           style={{
             paddingTop: 0,
             paddingBottom: 0,

src/components/Home/EventDashboardItem.js

@@ -11,7 +11,6 @@ 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,
@@ -77,11 +76,11 @@ class EventDashBoardItem extends React.Component<PropsType> {
               titleStyle={{color: textColor}}
               subtitle={subtitle}
               subtitleStyle={{color: textColor}}
-              left={(iconProps: CardTitleIconPropsType): React.Node => (
+              left={(): React.Node => (
                 <Avatar.Icon
                   icon="calendar-range"
                   color={iconColor}
-                  size={iconProps.size}
+                  size={60}
                   style={styles.avatar}
                 />
               )}

src/components/Lists/Clubs/ClubListHeader.js

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

src/components/Lists/DashboardEdit/DashboardEditItem.js

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

src/components/Lists/PlanexGroups/GroupListAccordion.js

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

src/components/Lists/PlanexGroups/GroupListItem.js

@@ -1,12 +1,10 @@
 // @flow
 
 import * as React from 'react';
-import {List, TouchableRipple, withTheme} from 'react-native-paper';
+import {IconButton, List, 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';
 
 type PropsType = {
   theme: CustomThemeType,
@@ -22,7 +20,7 @@ const REPLACE_REGEX = /_/g;
 class GroupListItem extends React.Component<PropsType> {
   isFav: boolean;
 
-  starRef: null | Animatable.View;
+  starRef = {current: null | IconButton};
 
   constructor(props: PropsType) {
     super(props);
@@ -39,16 +37,6 @@ 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) {
@@ -57,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;
@@ -64,34 +61,17 @@ class GroupListItem extends React.Component<PropsType> {
       <List.Item
         title={props.item.name.replace(REPLACE_REGEX, ' ')}
         onPress={props.onPress}
-        left={(iconProps: ListIconPropsType): React.Node => (
+        left={({size}: {size: number}): React.Node => (
-          <List.Icon
+          <List.Icon size={size} icon="chevron-right" />
-            color={iconProps.color}
-            style={iconProps.style}
-            icon="chevron-right"
-          />
         )}
-        right={(iconProps: ListIconPropsType): React.Node => (
+        right={({size, color}: {size: number, color: string}): React.Node => (
-          <Animatable.View
+          <Animatable.View ref={this.starRef} useNativeDriver>
-            ref={(ref: Animatable.View) => {
+            <IconButton
-              this.starRef = ref;
+              size={size}
-            }}
+              icon="star"
-            useNativeDriver>
-            <TouchableRipple
               onPress={this.onStarPress}
-              style={{
+              color={this.isFav ? colors.tetrisScore : color}
-                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={{

src/components/Overrides/CustomIntroSlider.js

@@ -174,7 +174,7 @@ export default class CustomIntroSlider extends React.Component<
         {state.currentSlide === index ? (
           <View style={{height: '100%', flex: 1}}>
             <View style={{flex: 1}}>{item.view()}</View>
-            <Animatable.View useNativeDriver animation="fadeIn">
+            <Animatable.View animation="fadeIn">
               {index !== 0 && index !== this.introSlides.length - 1 ? (
                 <Mascot
                   style={{
@@ -218,18 +218,15 @@ export default class CustomIntroSlider extends React.Component<
                   borderColor: 'rgba(0,0,0,0.60)',
                   borderWidth: 4,
                   borderRadius: 10,
-                  elevation: 0,
                 }}>
                 <Card.Content>
                   <Animatable.Text
-                    useNativeDriver
                     animation="fadeIn"
                     delay={100}
                     style={styles.title}>
                     {item.title}
                   </Animatable.Text>
                   <Animatable.Text
-                    useNativeDriver
                     animation="fadeIn"
                     delay={200}
                     style={styles.text}>
@@ -323,10 +320,7 @@ export default class CustomIntroSlider extends React.Component<
   static getIconView(icon: MaterialCommunityIconsGlyphs): React.Node {
     return (
       <View style={{flex: 1}}>
-        <Animatable.View
+        <Animatable.View style={styles.center} animation="fadeIn">
-          useNativeDriver
-          style={styles.center}
-          animation="fadeIn">
           <MaterialCommunityIcons name={icon} color="#fff" size={200} />
         </Animatable.View>
       </View>
@@ -361,7 +355,6 @@ export default class CustomIntroSlider extends React.Component<
   getRenderNextButton = (): React.Node => {
     return (
       <Animatable.View
-        useNativeDriver
         animation="fadeIn"
         style={{
           borderRadius: 25,
@@ -376,7 +369,6 @@ export default class CustomIntroSlider extends React.Component<
   getRenderDoneButton = (): React.Node => {
     return (
       <Animatable.View
-        useNativeDriver
         animation="bounceIn"
         style={{
           borderRadius: 25,

src/constants/PaperStyles.js

@@ -1,12 +0,0 @@
-// @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,10 +8,6 @@ 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,
@@ -221,9 +217,9 @@ class AboutScreen extends React.Component<PropsType> {
         <Card.Title
           title="Campus"
           subtitle={packageJson.version}
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
+          left={({size}: {size: number}): React.Node => (
             <Avatar.Image
-              size={iconProps.size}
+              size={size}
               source={APP_LOGO}
               style={{backgroundColor: 'transparent'}}
             />
@@ -250,8 +246,8 @@ class AboutScreen extends React.Component<PropsType> {
       <Card style={{marginBottom: 10}}>
         <Card.Title
           title={i18n.t('screens.about.team')}
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
+          left={({size, color}: {size: number, color: string}): React.Node => (
-            <Avatar.Icon size={iconProps.size} icon="account-multiple" />
+            <Avatar.Icon size={size} color={color} icon="account-multiple" />
           )}
         />
         <Card.Content>
@@ -300,10 +296,14 @@ class AboutScreen extends React.Component<PropsType> {
    * @param props
    * @return {*}
    */
-  static getChevronIcon(props: ListIconPropsType): React.Node {
+  static getChevronIcon({
-    return (
+    size,
-      <List.Icon color={props.color} style={props.style} icon="chevron-right" />
+    color,
-    );
+  }: {
+    size: number,
+    color: string,
+  }): React.Node {
+    return <List.Icon size={size} color={color} icon="chevron-right" />;
   }
 
   /**
@@ -313,10 +313,11 @@ class AboutScreen extends React.Component<PropsType> {
    * @param props
    * @return {*}
    */
-  static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
+  static getItemIcon(
-    return (
+    item: ListItemType,
-      <List.Icon color={props.color} style={props.style} icon={item.icon} />
+    {size, color}: {size: number, color: string},
-    );
+  ): React.Node {
+    return <List.Icon size={size} color={color} icon={item.icon} />;
   }
 
   /**
@@ -325,7 +326,7 @@ class AboutScreen extends React.Component<PropsType> {
    * @returns {*}
    */
   getCardItem = ({item}: {item: ListItemType}): React.Node => {
-    const getItemIcon = (props: ListIconPropsType): React.Node =>
+    const getItemIcon = (props: {size: number, color: string}): React.Node =>
       AboutScreen.getItemIcon(item, props);
     if (item.showChevron) {
       return (

src/screens/Amicale/AmicaleContactScreen.js

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

src/screens/Amicale/Clubs/ClubAboutScreen.js

@@ -2,12 +2,11 @@
 
 import * as React from 'react';
 import {Image, View} from 'react-native';
-import {Card, Avatar, Text, withTheme} from 'react-native-paper';
+import {Card, List, 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';
 
@@ -36,8 +35,8 @@ class ClubAboutScreen extends React.Component<null> {
           <Card.Title
             title={i18n.t('screens.clubs.about.title')}
             subtitle={i18n.t('screens.clubs.about.subtitle')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
+            left={({size}: {size: number}): React.Node => (
-              <Avatar.Icon size={iconProps.size} icon="information" />
+              <List.Icon size={size} icon="information" />
             )}
           />
           <Card.Content>

src/screens/Amicale/Clubs/ClubDisplayScreen.js

@@ -21,7 +21,6 @@ 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,
@@ -134,9 +133,9 @@ class ClubDisplayScreen extends React.Component<PropsType> {
               ? i18n.t('screens.clubs.managersSubtitle')
               : i18n.t('screens.clubs.managersUnavailable')
           }
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
+          left={({size}: {size: number}): React.Node => (
             <Avatar.Icon
-              size={iconProps.size}
+              size={size}
               style={{backgroundColor: 'transparent'}}
               color={
                 hasManagers

src/screens/Amicale/Equipment/EquipmentListScreen.js

@@ -39,7 +39,9 @@ export type RentedDeviceType = {
 const LIST_ITEM_HEIGHT = 64;
 
 class EquipmentListScreen extends React.Component<PropsType, StateType> {
-  userRents: null | Array<RentedDeviceType>;
+  data: Array<DeviceType>;
+
+  userRents: Array<RentedDeviceType>;
 
   authRef: {current: null | AuthenticatedScreen};
 
@@ -77,13 +79,11 @@ class EquipmentListScreen extends React.Component<PropsType, StateType> {
 
   getUserDeviceRentDates(item: DeviceType): [number, number] | null {
     let dates = null;
-    if (this.userRents != null) {
+    this.userRents.forEach((device: RentedDeviceType) => {
-      this.userRents.forEach((device: RentedDeviceType) => {
+      if (item.id === device.device_id) {
-        if (item.id === device.device_id) {
+        dates = [device.begin, device.end];
-          dates = [device.begin, device.end];
+      }
-        }
+    });
-      });
-    }
     return dates;
   }
 
@@ -123,14 +123,20 @@ class EquipmentListScreen extends React.Component<PropsType, StateType> {
    * @returns {*}
    */
   getScreen = (data: Array<ApiGenericDataType | null>): React.Node => {
-    const [allDevices, userRents] = data;
+    if (data[0] != null) {
-    if (userRents != null) this.userRents = userRents.locations;
+      const fetchedData = data[0];
+      if (fetchedData != null) this.data = fetchedData.devices;
+    }
+    if (data[1] != null) {
+      const fetchedData = data[1];
+      if (fetchedData != null) this.userRents = fetchedData.locations;
+    }
     return (
       <CollapsibleFlatList
         keyExtractor={this.keyExtractor}
         renderItem={this.getRenderItem}
         ListHeaderComponent={this.getListHeader()}
-        data={allDevices != null ? allDevices.devices : null}
+        data={this.data}
       />
     );
   };

src/screens/Amicale/Equipment/EquipmentRentScreen.js

@@ -280,7 +280,7 @@ class EquipmentRentScreen extends React.Component<PropsType, StateType> {
         end: getRelativeDateString(end),
       });
     else
-      subHeadingText = i18n.t('screens.equipment.bookingDay', {
+      i18n.t('screens.equipment.bookingDay', {
         date: getRelativeDateString(start),
       });
     if (item != null) {
@@ -408,7 +408,6 @@ class EquipmentRentScreen extends React.Component<PropsType, StateType> {
           />
           <Animatable.View
             ref={this.bookRef}
-            useNativeDriver
             style={{
               position: 'absolute',
               bottom: 0,

src/screens/Amicale/ProfileScreen.js

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

src/screens/Game/screens/GameStartScreen.js

@@ -84,7 +84,6 @@ class GameStartScreen extends React.Component<PropsType> {
           const animDuration = 2 * (2000 - size * 30);
           return (
             <Animatable.View
-              useNativeDriver
               animation="fadeInDownBig"
               delay={animDelay}
               duration={animDuration}

src/screens/Other/FeedbackScreen.js

@@ -6,7 +6,6 @@ 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,
@@ -92,8 +91,14 @@ class FeedbackScreen extends React.Component<PropsType> {
           <Card.Title
             title={i18n.t('screens.feedback.bugs')}
             subtitle={i18n.t('screens.feedback.bugsSubtitle')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
+            left={({
-              <Avatar.Icon size={iconProps.size} icon="bug" />
+              size,
+              color,
+            }: {
+              size: number,
+              color: number,
+            }): React.Node => (
+              <Avatar.Icon size={size} color={color} icon="bug" />
             )}
           />
           <Card.Content>
@@ -109,8 +114,14 @@ class FeedbackScreen extends React.Component<PropsType> {
           <Card.Title
             title={i18n.t('screens.feedback.title')}
             subtitle={i18n.t('screens.feedback.feedbackSubtitle')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
+            left={({
-              <Avatar.Icon size={iconProps.size} icon="comment" />
+              size,
+              color,
+            }: {
+              size: number,
+              color: number,
+            }): React.Node => (
+              <Avatar.Icon size={size} color={color} icon="comment" />
             )}
           />
           <Card.Content>

src/screens/Other/Settings/SettingsScreen.js

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

src/screens/Proxiwash/ProxiwashAboutScreen.js

@@ -3,10 +3,9 @@
 import * as React from 'react';
 import {Image, View} from 'react-native';
 import i18n from 'i18n-js';
-import {Card, Avatar, Paragraph, Text, Title} from 'react-native-paper';
+import {Card, List, 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';
 
@@ -36,8 +35,14 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.dryer')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
+            left={({
-              <Avatar.Icon size={iconProps.size} icon="tumble-dryer" />
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="tumble-dryer" />
             )}
           />
           <Card.Content>
@@ -51,8 +56,14 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.washer')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
+            left={({
-              <Avatar.Icon size={iconProps.size} icon="washing-machine" />
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="washing-machine" />
             )}
           />
           <Card.Content>
@@ -66,8 +77,14 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.tariffs')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
+            left={({
-              <Avatar.Icon size={iconProps.size} icon="circle-multiple" />
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="circle-multiple" />
             )}
           />
           <Card.Content>
@@ -79,8 +96,14 @@ 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={(iconProps: CardTitleIconPropsType): React.Node => (
+            left={({
-              <Avatar.Icon size={iconProps.size} icon="cash" />
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="cash" />
             )}
           />
           <Card.Content>

src/screens/Services/Proximo/ProximoAboutScreen.js

@@ -3,10 +3,9 @@
 import * as React from 'react';
 import {Image, View} from 'react-native';
 import i18n from 'i18n-js';
-import {Card, Avatar, Paragraph, Text} from 'react-native-paper';
+import {Card, List, 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';
 
@@ -36,8 +35,14 @@ export default class ProximoAboutScreen extends React.Component<null> {
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proximo.openingHours')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
+            left={({
-              <Avatar.Icon size={iconProps.size} icon="clock-outline" />
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="clock-outline" />
             )}
           />
           <Card.Content>
@@ -48,8 +53,14 @@ 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={(iconProps: CardTitleIconPropsType): React.Node => (
+            left={({
-              <Avatar.Icon size={iconProps.size} icon="cash" />
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="cash" />
             )}
           />
           <Card.Content>

src/screens/Services/Proximo/ProximoMainScreen.js

@@ -10,7 +10,6 @@ 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;
@@ -200,19 +199,15 @@ class ProximoMainScreen extends React.Component<PropsType> {
           title={item.type.name}
           description={subtitle}
           onPress={onPress}
-          left={(props: ListIconPropsType): React.Node => (
+          left={({size}: {size: number}): React.Node => (
             <List.Icon
-              style={props.style}
+              size={size}
               icon={item.type.icon}
               color={theme.colors.primary}
             />
           )}
-          right={(props: ListIconPropsType): React.Node => (
+          right={({size, color}: {size: number, color: string}): React.Node => (
-            <List.Icon
+            <List.Icon size={size} color={color} icon="chevron-right" />
-              color={props.color}
-              style={props.style}
-              icon="chevron-right"
-            />
           )}
           style={{
             height: LIST_ITEM_HEIGHT,

src/screens/Services/ServicesScreen.js

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