src/components/Amicale/Vote/VoteTitle.js

@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import {Card, Paragraph} from "react-native-paper";
+import {Avatar, Card, Paragraph} from "react-native-paper";
-import {Image, StyleSheet} from "react-native";
+import {StyleSheet} from "react-native";
 import i18n from 'i18n-js';
 
 const ICON_AMICALE = require('../../../../assets/amicale.png');
@@ -19,13 +19,10 @@ export default class VoteTitle extends React.Component<{}> {
                 <Card.Title
                     title={i18n.t('screens.vote.main.title')}
                     subtitle={i18n.t('screens.vote.main.subtitle')}
-                    left={(props) => <Image
+                    left={(props) => <Avatar.Image
                         {...props}
-                        style={{
-                            width: props.size,
-                            height: props.size,
-                        }}
                         source={ICON_AMICALE}
+                        style={styles.icon}
                     />}
                 />
                 <Card.Content>
@@ -45,4 +42,7 @@ const styles = StyleSheet.create({
     card: {
         margin: 10,
     },
+    icon: {
+        backgroundColor: 'transparent'
+    },
 });

src/components/Home/FeedItem.js

@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import {Button, Card, Text} from 'react-native-paper';
+import {Avatar, Button, Card, Text} from 'react-native-paper';
-import {Image, View} from "react-native";
+import {View} from "react-native";
 import Autolink from "react-native-autolink";
 import i18n from "i18n-js";
 import ImageModal from 'react-native-image-modal';
@@ -38,13 +38,9 @@ class FeedItem extends React.Component<Props> {
      */
     getAvatar() {
         return (
-            <Image
+            <Avatar.Image
-                size={48}
+                size={48} source={ICON_AMICALE}
-                source={ICON_AMICALE}
+                style={{backgroundColor: 'transparent'}}/>
-                style={{
-                    width: 48,
-                    height: 48,
-                }}/>
         );
     }
 

src/components/Lists/CardList/CardList.js

@@ -36,12 +36,17 @@ export default class CardList extends React.Component<Props> {
     keyExtractor = (item: cardItem) => item.title;
 
     render() {
-        let containerStyle = {};
+        let containerStyle;
         if (this.props.isHorizontal) {
             containerStyle = {
+                ...this.props.contentContainerStyle,
                 height: 150,
                 justifyContent: 'space-around',
             };
+        } else {
+            containerStyle = {
+                ...this.props.contentContainerStyle,
+            }
         }
         return (
             <Animated.FlatList
@@ -55,4 +60,4 @@ export default class CardList extends React.Component<Props> {
             />
         );
     }
-}
+}

src/screens/Amicale/Equipment/EquipmentListScreen.js

@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, Image} from "react-native";
+import {Animated} from "react-native";
-import {Card, Paragraph, withTheme} from 'react-native-paper';
+import {Avatar, Card, Paragraph, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import {Collapsible} from "react-navigation-collapsible";
 import {withCollapsible} from "../../../utils/withCollapsible";
@@ -87,13 +87,10 @@ class EquipmentListScreen extends React.Component<Props> {
         return <Card style={{margin: 5}}>
             <Card.Title
                 title={i18n.t('screens.equipment.title')}
-                left={(props) => <Image
+                left={(props) => <Avatar.Image
                     {...props}
-                    style={{
-                        width: props.size,
-                        height: props.size,
-                    }}
                     source={ICON_AMICALE}
+                    style={{backgroundColor: 'transparent'}}
                 />}
             />
             <Card.Content>

src/screens/Amicale/ProfileScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, FlatList, Image, StyleSheet, View} from "react-native";
+import {Animated, FlatList, StyleSheet, View} from "react-native";
 import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
 import i18n from 'i18n-js';
@@ -179,12 +179,10 @@ class ProfileScreen extends React.Component<Props, State> {
             <Card style={styles.card}>
                 <Card.Title
                     title={i18n.t("screens.profile.welcomeTitle", {name: this.data.first_name})}
-                    left={() => <Image
+                    left={() => <Avatar.Image
-                        style={{
+                        size={64}
-                            width: 50,
-                            height: 50,
-                        }}
                         source={ICON_AMICALE}
+                        style={{backgroundColor: 'transparent',}}
                     />}
                     titleStyle={{marginLeft: 10}}
                 />

src/screens/Services/ServicesScreen.js

@@ -6,7 +6,7 @@ import CardList from "../../components/Lists/CardList/CardList";
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 import {withCollapsible} from "../../utils/withCollapsible";
 import {Collapsible} from "react-navigation-collapsible";
-import {Animated, Image, View} from "react-native";
+import {Animated, View} from "react-native";
 import {Avatar, Card, Divider, List, TouchableRipple, withTheme} from "react-native-paper";
 import type {CustomTheme} from "../../managers/ThemeManager";
 import i18n from 'i18n-js';
@@ -227,13 +227,12 @@ class ServicesScreen extends React.Component<Props, State> {
      */
     getListTitleImage(props, source: string | number) {
         if (typeof source === "number")
-            return <Image
+            return <Avatar.Image
+                {...props}
                 size={48}
                 source={source}
-                style={{
+                style={{backgroundColor: 'transparent'}}
-                    width: 48,
+            />
-                    height: 48,
-                }}/>
         else
             return <Avatar.Icon
                 {...props}