Use native driver for more animations

App.js

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

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 => (
-            <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

@@ -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 => (
-              <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

@@ -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 => (
-            <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

@@ -1,15 +1,11 @@
 // @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,
@@ -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 => (
-            <ActivityIndicator size={size} />
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
+            <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 => (
-            <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

@@ -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 => (
-            <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

@@ -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}
-        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

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

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

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 animation="fadeIn">
+            <Animatable.View useNativeDriver animation="fadeIn">
               {index !== 0 && index !== this.introSlides.length - 1 ? (
                 <Mascot
                   style={{
@@ -218,15 +218,18 @@ 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}>
@@ -320,7 +323,10 @@ export default class CustomIntroSlider extends React.Component<
   static getIconView(icon: MaterialCommunityIconsGlyphs): React.Node {
     return (
       <View style={{flex: 1}}>
-        <Animatable.View style={styles.center} animation="fadeIn">
+        <Animatable.View
+          useNativeDriver
+          style={styles.center}
+          animation="fadeIn">
           <MaterialCommunityIcons name={icon} color="#fff" size={200} />
         </Animatable.View>
       </View>
@@ -355,6 +361,7 @@ export default class CustomIntroSlider extends React.Component<
   getRenderNextButton = (): React.Node => {
     return (
       <Animatable.View
+        useNativeDriver
         animation="fadeIn"
         style={{
           borderRadius: 25,
@@ -369,6 +376,7 @@ export default class CustomIntroSlider extends React.Component<
   getRenderDoneButton = (): React.Node => {
     return (
       <Animatable.View
+        useNativeDriver
         animation="bounceIn"
         style={{
           borderRadius: 25,

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 => (
-            <Avatar.Icon size={size} color={color} icon="account-multiple" />
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
+            <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({
-    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" />
+    );
   }
 
   /**
@@ -313,11 +313,10 @@ class AboutScreen extends React.Component<PropsType> {
    * @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} />
+    );
   }
 
   /**
@@ -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 = ({
-    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 => {
@@ -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 => (
-          <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}
@@ -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={({
-              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

@@ -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 => (
-              <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

@@ -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/Equipment/EquipmentListScreen.js

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

src/screens/Amicale/Equipment/EquipmentRentScreen.js

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

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 => (
-      <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/Game/screens/GameStartScreen.js

@@ -84,6 +84,7 @@ 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,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={({
-              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>
@@ -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={({
-              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

@@ -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 => (
-          <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} />
@@ -196,11 +197,15 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
         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}
       />
@@ -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={({
-                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()}
@@ -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={({
-                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

@@ -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={({
-              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>
@@ -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={({
-              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>
@@ -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={({
-              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>
@@ -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={({
-              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

@@ -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={({
-              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>
@@ -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={({
-              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

@@ -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 => (
-            <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

@@ -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 => (
-              <List.Icon size={size} icon="chevron-right" />
-            )}
+            right={(): React.Node => <List.Icon icon="chevron-right" />}
           />
           <CardList dataset={item.content} isHorizontal />
         </View>