[WIP] - Change service card

src/components/Lists/CardList/CardList.tsx

@@ -75,7 +75,7 @@ export default class CardList extends React.Component<PropsType> {
         data={props.dataset}
         renderItem={this.getRenderItem}
         keyExtractor={this.keyExtractor}
-        numColumns={props.isHorizontal ? undefined : 2}
+        numColumns={props.isHorizontal ? undefined : 1}
         horizontal={props.isHorizontal}
         contentContainerStyle={
           props.isHorizontal ? containerStyle : props.contentContainerStyle

src/components/Lists/CardList/CardListItem.tsx

@@ -18,43 +18,61 @@
  */
 
 import * as React from 'react';
-import { Caption, Card, Paragraph, TouchableRipple } from 'react-native-paper';
-import { StyleSheet, View } from 'react-native';
-import GENERAL_STYLES from '../../../constants/Styles';
+import { Avatar, List } from 'react-native-paper';
+import { StyleSheet } from 'react-native';
 import { ServiceItemType } from '../../../utils/Services';
 
 type PropsType = {
   item: ServiceItemType;
 };
 
 const styles = StyleSheet.create({
-  card: {
-    width: '40%',
-    margin: 5,
-    marginLeft: 'auto',
-    marginRight: 'auto',
+  listItem: {
+    width: '100%',
   },
   cover: {
-    height: 80,
+    height: 60,
+    width: 60,
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 });
 
 function CardListItem(props: PropsType) {
   const { item } = props;
   const source =
     typeof item.image === 'number' ? item.image : { uri: item.image };
+
+  const cardIcon = () => (
+    <Avatar.Image size={50} source={source} style={styles.cover} />
+  );
+
+  const getChevronIcon = (iconProps: {
+    color: string;
+    style?: {
+      marginRight: number;
+      marginVertical?: number;
+    };
+  }) => {
+    return (
+      <List.Icon
+        color={iconProps.color}
+        style={iconProps.style}
+        icon="chevron-right"
+      />
+    );
+  };
+
   return (
-    <Card style={styles.card}>
-      <TouchableRipple style={GENERAL_STYLES.flex} onPress={item.onPress}>
-        <View>
-          <Card.Cover style={styles.cover} source={source} />
-          <Card.Content>
-            <Paragraph>{item.title}</Paragraph>
-            <Caption>{item.subtitle}</Caption>
-          </Card.Content>
-        </View>
-      </TouchableRipple>
-    </Card>
+    <List.Item
+      title={item.title}
+      description={item.subtitle}
+      left={cardIcon}
+      right={getChevronIcon}
+      onPress={item.onPress}
+      style={styles.listItem}
+    />
   );
 }
 

src/screens/Services/ServicesScreen.tsx

@@ -28,7 +28,6 @@ import {
   useTheme,
 } from 'react-native-paper';
 import i18n from 'i18n-js';
-import CardList from '../../components/Lists/CardList/CardList';
 import MaterialHeaderButtons, {
   Item,
 } from '../../components/Overrides/CustomHeaderButton';
@@ -113,6 +112,9 @@ function ServicesScreen() {
    * @returns {*}
    */
   const getRenderItem = ({ item }: { item: ServiceCategoryType }) => {
+    const subtitle = () =>
+      item.content.map((service) => service.title).join(', ');
+
     return (
       <TouchableRipple
         style={styles.container}
@@ -123,11 +125,12 @@ function ServicesScreen() {
         <View>
           <Card.Title
             title={item.title}
-            subtitle={item.subtitle}
+            // subtitle={item.subtitle}
+            subtitle={subtitle()}
+            subtitleNumberOfLines={2}
             left={() => getListTitleImage(item.image)}
             right={() => <List.Icon icon="chevron-right" />}
           />
-          <CardList dataset={item.content} isHorizontal />
         </View>
       </TouchableRipple>
     );