Updated react native paper to latest major version and fixed error on card press

package.json

@@ -43,7 +43,7 @@
     "react-native-linear-gradient": "^2.5.6",
     "react-native-localize": "^1.4.0",
     "react-native-modalize": "^2.0.4",
-    "react-native-paper": "^3.10.1",
+    "react-native-paper": "^4.0.1",
     "react-native-permissions": "^2.1.5",
     "react-native-push-notification": "^4.0.0",
     "react-native-reanimated": "^1.9.0",

src/components/Home/EventDashboardItem.js

@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import {Avatar, Card, Text, withTheme} from 'react-native-paper';
-import {StyleSheet} from "react-native";
+import {Avatar, Card, Text, TouchableRipple, withTheme} from 'react-native-paper';
+import {StyleSheet, View} from "react-native";
 import i18n from "i18n-js";
 import type {CustomTheme} from "../../managers/ThemeManager";
 
@@ -47,9 +47,11 @@ class EventDashBoardItem extends React.Component<Props> {
         } else
             subtitle = i18n.t('screens.home.dashboard.todayEventsSubtitleNA');
         return (
-            <Card
-                style={styles.card}
+            <Card style={styles.card}>
+                <TouchableRipple
+                    style={{flex: 1}}
                     onPress={props.clickAction}>
+                    <View>
                         <Card.Title
                             title={i18n.t('screens.home.dashboard.todayEventsTitle')}
                             titleStyle={{color: textColor}}
@@ -65,6 +67,8 @@ class EventDashBoardItem extends React.Component<Props> {
                         <Card.Content>
                             {props.children}
                         </Card.Content>
+                    </View>
+                </TouchableRipple>
             </Card>
         );
     }

src/components/Home/FeedItem.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Button, Card, Text} from 'react-native-paper';
+import {Button, Card, Text, TouchableRipple} from 'react-native-paper';
 import {Image, View} from "react-native";
 import Autolink from "react-native-autolink";
 import i18n from "i18n-js";
@@ -75,8 +75,11 @@ class FeedItem extends React.Component<Props> {
                     margin: cardMargin,
                     height: cardHeight,
                 }}
-                onPress={this.onPress}
             >
+                <TouchableRipple
+                    style={{flex: 1}}
+                    onPress={this.onPress}>
+                    <View>
                         <Card.Title
                             title={this.props.title}
                             subtitle={this.props.subtitle}
@@ -114,6 +117,8 @@ class FeedItem extends React.Component<Props> {
                                 {i18n.t('screens.home.dashboard.seeMore')}
                             </Button>
                         </Card.Actions>
+                    </View>
+                </TouchableRipple>
             </Card>
         );
     }

src/components/Home/PreviewEventDashboardItem.js

@@ -1,9 +1,9 @@
 // @flow
 
 import * as React from 'react';
-import {StyleSheet} from "react-native";
+import {StyleSheet, View} from "react-native";
 import i18n from "i18n-js";
-import {Avatar, Button, Card} from 'react-native-paper';
+import {Avatar, Button, Card, TouchableRipple} from 'react-native-paper';
 import {getFormattedEventTime, isDescriptionEmpty} from "../../utils/Planning";
 import CustomHTML from "../Overrides/CustomHTML";
 import type {CustomTheme} from "../../managers/ThemeManager";
@@ -36,9 +36,12 @@ class PreviewEventDashboardItem extends React.Component<Props> {
             return (
                 <Card
                     style={styles.card}
-                    onPress={props.clickAction}
                     elevation={3}
                 >
+                    <TouchableRipple
+                        style={{flex: 1}}
+                        onPress={props.clickAction}>
+                        <View>
                             {hasImage ?
                                 <Card.Title
                                     title={event.title}
@@ -61,6 +64,8 @@ class PreviewEventDashboardItem extends React.Component<Props> {
                                     {i18n.t("screens.home.dashboard.seeMore")}
                                 </Button>
                             </Card.Actions>
+                        </View>
+                    </TouchableRipple>
                 </Card>
             );
         } else

src/components/Lists/CardList/CardListItem.js

@@ -1,7 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import {Caption, Card, Paragraph} from 'react-native-paper';
+import {Caption, Card, Paragraph, TouchableRipple} from 'react-native-paper';
+import {View} from "react-native";
 import type {cardItem} from "./CardList";
 
 type Props = {
@@ -28,8 +29,11 @@ export default class CardListItem extends React.Component<Props> {
                     marginLeft: 'auto',
                     marginRight: 'auto',
                 }}
-                onPress={item.onPress}
             >
+                <TouchableRipple
+                    style={{flex: 1}}
+                    onPress={item.onPress}>
+                    <View>
                         <Card.Cover
                             style={{height: 80}}
                             source={source}
@@ -38,6 +42,9 @@ export default class CardListItem extends React.Component<Props> {
                             <Paragraph>{item.title}</Paragraph>
                             <Caption>{item.subtitle}</Caption>
                         </Card.Content>
+                    </View>
+                </TouchableRipple>
+
             </Card>
         );
     }