components/DashboardItem.js

@@ -7,7 +7,7 @@ import ThemeManager from "../utils/ThemeManager";
 import HTML from "react-native-render-html";
 import {LinearGradient} from "expo-linear-gradient";
 import i18n from "i18n-js";
-import {Avatar, Card, Text} from 'react-native-paper';
+import {Avatar, Card, Text, Title} from 'react-native-paper';
 
 type Props = {
     isAvailable: boolean,
@@ -28,13 +28,6 @@ export default class DashboardItem extends React.Component<Props> {
         displayEvent: undefined,
     };
 
-    getIcon: Function;
-
-    constructor() {
-        super();
-        this.getIcon = this.getIcon.bind(this);
-    }
-
     /**
      * Convert the date string given by in the event list json to a date object
      * @param dateString
@@ -71,17 +64,18 @@ export default class DashboardItem extends React.Component<Props> {
     getEventPreviewContainer() {
         if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) {
             const hasImage = this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null;
-            const getImage = () => <Avatar.Image
-                source={{uri: this.props.displayEvent['logo']}}
-                size={60}
-                style={{backgroundColor: 'transparent'}}/>;
             return (
                 <Card style={{marginBottom: 10}}>
                     {hasImage ?
                         <Card.Title
                             title={this.props.displayEvent['title']}
                             subtitle={this.getFormattedEventTime(this.props.displayEvent)}
-                            left={getImage}
+                            left={() =>
+                                <Avatar.Image
+                                    source={{uri: this.props.displayEvent['logo']}}
+                                    size={60}
+                                    style={{backgroundColor: 'transparent'}}/>
+                            }
                         /> :
                         <Card.Title
                             title={this.props.displayEvent['title']}
@@ -143,14 +137,58 @@ export default class DashboardItem extends React.Component<Props> {
 
     getIcon() {
         return (
-            <Avatar.Icon
+            <MaterialCommunityIcons
-                icon={this.props.icon}
+                name={this.props.icon}
-                color={this.props.isAvailable ? this.props.color : ThemeManager.getCurrentThemeVariables().textDisabled}
+                color={
-                size={60}
+                    this.props.isAvailable ?
-                style={{backgroundColor: 'transparent'}}/>
+                        this.props.color :
+                        ThemeManager.getCurrentThemeVariables().textDisabled
+                }
+                size={this.props.isSquare ? 50 : 40}/>
         );
     }
 
+    getText() {
+        return (
+            <View style={{
+                width: this.props.isSquare ? '100%' : 'auto',
+            }}>
+                <Title style={{
+                    color: this.props.isAvailable ?
+                        ThemeManager.getCurrentThemeVariables().text :
+                        ThemeManager.getCurrentThemeVariables().textDisabled,
+                    textAlign: this.props.isSquare ? 'center' : 'left',
+                    width: this.props.isSquare ? '100%' : 'auto',
+                }}>
+                    {this.props.title}
+                </Title>
+                <Text style={{
+                    color: this.props.isAvailable ?
+                        ThemeManager.getCurrentThemeVariables().text :
+                        ThemeManager.getCurrentThemeVariables().textDisabled,
+                    textAlign: this.props.isSquare ? 'center' : 'left',
+                    width: this.props.isSquare ? '100%' : 'auto',
+                }}>
+                    {this.props.subtitle}
+                </Text>
+            </View>
+        );
+    }
+
+    getContent() {
+        if (this.props.isSquare) {
+            return (
+                <View>
+                    <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
+                        {this.getIcon()}
+                    </View>
+                    {this.getText()}
+                </View>
+            );
+        }
+    }
+
+
     render() {
         // console.log("rendering DashboardItem " + this.props.title);
         let marginRight = 10;
@@ -173,17 +211,28 @@ export default class DashboardItem extends React.Component<Props> {
                     overflow: 'hidden',
                 }}
                 onPress={this.props.clickAction}>
-
+                {this.props.isSquare ?
+                    <Card.Content>
+                        {this.getContent()}
+                    </Card.Content>
+                    :
+                    <View>
                         <Card.Title
                             title={this.props.title}
                             titleStyle={{color: color}}
                             subtitle={this.props.subtitle}
                             subtitleStyle={{color: color}}
-                    left={this.getIcon}
+                            left={(props) => <Avatar.Icon
+                                {...props}
+                                icon={this.props.icon}
+                                color={this.props.isAvailable ? this.props.color : ThemeManager.getCurrentThemeVariables().textDisabled}
+                                size={60}
+                                style={{backgroundColor: 'transparent'}}/>}
                         />
                         <Card.Content>
                             {this.getEventPreviewContainer()}
                         </Card.Content>
+                    </View>}
             </Card>
         );
     }

components/FeedItem.js

@@ -6,13 +6,6 @@ import i18n from "i18n-js";
 
 const ICON_AMICALE = require('../assets/amicale.png');
 
-function getAvatar() {
-    return (
-        <Avatar.Image size={48} source={ICON_AMICALE}
-                      style={{backgroundColor: 'transparent'}}/>
-    );
-}
-
 function FeedItem(props) {
     const {colors} = props.theme;
     return (
@@ -20,7 +13,8 @@ function FeedItem(props) {
             <Card.Title
                 title={props.title}
                 subtitle={props.subtitle}
-                left={getAvatar}
+                left={props => <Avatar.Image size={48} source={ICON_AMICALE}
+                                             style={{backgroundColor: 'transparent'}}/>}
             />
             {props.full_picture !== '' && props.full_picture !== undefined ?
                 <TouchableOpacity onPress={props.onImagePress}>