Use card items when viewing the section

src/components/Lists/CardList/CardList.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import {Animated} from "react-native";
+import ImageListItem from "./ImageListItem";
 import CardListItem from "./CardListItem";
 
 type Props = {
@@ -26,25 +27,25 @@ export default class CardList extends React.Component<Props> {
     }
 
     renderItem = ({item}: { item: cardItem }) => {
-        return (
+        if (this.props.isHorizontal)
-            <CardListItem item={item} key={item.title}/>
+            return <ImageListItem item={item} key={item.title}/>;
-        );
+        else
+            return <CardListItem item={item} key={item.title}/>;
     };
 
     keyExtractor = (item: cardItem) => item.title;
 
     render() {
-        let containerStyle = {
+        let containerStyle;
-            ...this.props.contentContainerStyle,
+        if (this.props.isHorizontal) {
-            height: 150,
-            justifyContent: 'space-around',
-        };
-        if (!this.props.isHorizontal) {
             containerStyle = {
-                ...containerStyle,
+                ...this.props.contentContainerStyle,
-                marginLeft: 'auto',
+                height: 150,
-                marginRight: 'auto',
+                justifyContent: 'space-around',
-                height: 'auto',
+            };
+        } else {
+            containerStyle = {
+                ...this.props.contentContainerStyle,
             }
         }
         return (
@@ -53,7 +54,7 @@ export default class CardList extends React.Component<Props> {
                 data={this.props.dataset}
                 renderItem={this.renderItem}
                 keyExtractor={this.keyExtractor}
-                numColumns={this.props.isHorizontal ? undefined : 3}
+                numColumns={this.props.isHorizontal ? undefined : 2}
                 horizontal={this.props.isHorizontal}
                 contentContainerStyle={containerStyle}
             />

src/components/Lists/CardList/CardListItem.js

@@ -1,8 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Text, TouchableRipple} from 'react-native-paper';
+import {Caption, Card, Paragraph} from 'react-native-paper';
-import {Image, View} from 'react-native';
 import type {cardItem} from "./CardList";
 
 type Props = {
@@ -22,31 +21,24 @@ export default class CardListItem extends React.Component<Props> {
             ? item.image
             : {uri: item.image};
         return (
-            <TouchableRipple
+            <Card
                 style={{
-                    width: 100,
+                    width: '40%',
-                    height: 150,
                     margin: 5,
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
                 }}
                 onPress={item.onPress}
             >
-                <View>
+                <Card.Cover
-                    <Image
+                    style={{height: 80}}
-                        style={{
+                    source={source}
-                            width: 100,
+                />
-                            height: 100,
+                <Card.Content>
-                            marginLeft: 'auto',
+                    <Paragraph>{item.title}</Paragraph>
-                            marginRight: 'auto',
+                    <Caption>{item.subtitle}</Caption>
-                        }}
+                </Card.Content>
-                        source={source}
+            </Card>
-                    />
-                    <Text style={{
-                        marginTop: 5,
-                        marginLeft: 'auto',
-                        marginRight: 'auto',
-                    }}>{item.title}</Text>
-                </View>
-            </TouchableRipple>
         );
     }
 }

src/components/Lists/CardList/ImageListItem.js

@@ -0,0 +1,52 @@
+// @flow
+
+import * as React from 'react';
+import {Text, TouchableRipple} from 'react-native-paper';
+import {Image, View} from 'react-native';
+import type {cardItem} from "./CardList";
+
+type Props = {
+    item: cardItem,
+}
+
+export default class ImageListItem extends React.Component<Props> {
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+    render() {
+        const props = this.props;
+        const item = props.item;
+        const source = typeof item.image === "number"
+            ? item.image
+            : {uri: item.image};
+        return (
+            <TouchableRipple
+                style={{
+                    width: 100,
+                    height: 150,
+                    margin: 5,
+                }}
+                onPress={item.onPress}
+            >
+                <View>
+                    <Image
+                        style={{
+                            width: 100,
+                            height: 100,
+                            marginLeft: 'auto',
+                            marginRight: 'auto',
+                        }}
+                        source={source}
+                    />
+                    <Text style={{
+                        marginTop: 5,
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
+                    }}>{item.title}</Text>
+                </View>
+            </TouchableRipple>
+        );
+    }
+}