Changed cards to basic view

src/components/Lists/CardList/CardList.js

@@ -27,7 +27,7 @@ export default class CardList extends React.Component<Props> {
 
     renderItem = ({item}: { item: cardItem }) => {
         return (
-            <CardListItem width={150} item={item} key={item.title}/>
+            <CardListItem item={item} key={item.title}/>
         );
     };
 
@@ -36,7 +36,7 @@ export default class CardList extends React.Component<Props> {
     render() {
         let containerStyle = {
             ...this.props.contentContainerStyle,
-            height: 200,
+            height: 150,
             justifyContent: 'space-around',
         };
         if (!this.props.isHorizontal) {
@@ -53,7 +53,7 @@ export default class CardList extends React.Component<Props> {
                 data={this.props.dataset}
                 renderItem={this.renderItem}
                 keyExtractor={this.keyExtractor}
-                numColumns={this.props.isHorizontal ? undefined : 2}
+                numColumns={this.props.isHorizontal ? undefined : 3}
                 horizontal={this.props.isHorizontal}
                 contentContainerStyle={containerStyle}
             />

src/components/Lists/CardList/CardListItem.js

@@ -1,11 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {Caption, Card, Paragraph} from 'react-native-paper';
+import {Text, TouchableRipple} from 'react-native-paper';
+import {Image, View} from 'react-native';
 import type {cardItem} from "./CardList";
 
 type Props = {
-    width: string | number,
     item: cardItem,
 }
 
@@ -22,22 +22,31 @@ export default class CardListItem extends React.Component<Props> {
             ? item.image
             : {uri: item.image};
         return (
-            <Card
+            <TouchableRipple
                 style={{
-                    width: props.width,
+                    width: 100,
+                    height: 150,
                     margin: 5,
                 }}
                 onPress={item.onPress}
             >
-                <Card.Cover
-                    style={{height: 80}}
-                    source={source}
-                />
-                <Card.Content>
-                    <Paragraph>{item.title}</Paragraph>
-                    <Caption>{item.subtitle}</Caption>
-                </Card.Content>
-            </Card>
+                <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>
         );
     }
 }

src/screens/Services/ServicesScreen.js

@@ -8,7 +8,7 @@ import {withCollapsible} from "../../utils/withCollapsible";
 import {Collapsible} from "react-navigation-collapsible";
 import {CommonActions} from "@react-navigation/native";
 import {Animated, View} from "react-native";
-import {Avatar, Card, List, TouchableRipple} from "react-native-paper";
+import {Avatar, Card, Divider, List, TouchableRipple} from "react-native-paper";
 
 type Props = {
     navigation: Object,
@@ -229,6 +229,7 @@ class ServicesScreen extends React.Component<Props> {
                 paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
             }}
             scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
+            ItemSeparatorComponent={() => <Divider/>}
         />
     }
 }