Browse Source

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

Arnaud Vergnet 3 years ago
parent
commit
d1fc8a9625

+ 1
- 1
package.json View File

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

+ 24
- 20
src/components/Home/EventDashboardItem.js View File

@@ -1,8 +1,8 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Avatar, Card, Text, withTheme} from 'react-native-paper';
5
-import {StyleSheet} from "react-native";
4
+import {Avatar, Card, Text, TouchableRipple, withTheme} from 'react-native-paper';
5
+import {StyleSheet, View} from "react-native";
6 6
 import i18n from "i18n-js";
7 7
 import type {CustomTheme} from "../../managers/ThemeManager";
8 8
 
@@ -47,24 +47,28 @@ class EventDashBoardItem extends React.Component<Props> {
47 47
         } else
48 48
             subtitle = i18n.t('screens.home.dashboard.todayEventsSubtitleNA');
49 49
         return (
50
-            <Card
51
-                style={styles.card}
52
-                onPress={props.clickAction}>
53
-                <Card.Title
54
-                    title={i18n.t('screens.home.dashboard.todayEventsTitle')}
55
-                    titleStyle={{color: textColor}}
56
-                    subtitle={subtitle}
57
-                    subtitleStyle={{color: textColor}}
58
-                    left={() =>
59
-                        <Avatar.Icon
60
-                            icon={'calendar-range'}
61
-                            color={iconColor}
62
-                            size={60}
63
-                            style={styles.avatar}/>}
64
-                />
65
-                <Card.Content>
66
-                    {props.children}
67
-                </Card.Content>
50
+            <Card style={styles.card}>
51
+                <TouchableRipple
52
+                    style={{flex: 1}}
53
+                    onPress={props.clickAction}>
54
+                    <View>
55
+                        <Card.Title
56
+                            title={i18n.t('screens.home.dashboard.todayEventsTitle')}
57
+                            titleStyle={{color: textColor}}
58
+                            subtitle={subtitle}
59
+                            subtitleStyle={{color: textColor}}
60
+                            left={() =>
61
+                                <Avatar.Icon
62
+                                    icon={'calendar-range'}
63
+                                    color={iconColor}
64
+                                    size={60}
65
+                                    style={styles.avatar}/>}
66
+                        />
67
+                        <Card.Content>
68
+                            {props.children}
69
+                        </Card.Content>
70
+                    </View>
71
+                </TouchableRipple>
68 72
             </Card>
69 73
         );
70 74
     }

+ 44
- 39
src/components/Home/FeedItem.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Button, Card, Text} from 'react-native-paper';
4
+import {Button, Card, Text, TouchableRipple} from 'react-native-paper';
5 5
 import {Image, View} from "react-native";
6 6
 import Autolink from "react-native-autolink";
7 7
 import i18n from "i18n-js";
@@ -75,45 +75,50 @@ class FeedItem extends React.Component<Props> {
75 75
                     margin: cardMargin,
76 76
                     height: cardHeight,
77 77
                 }}
78
-                onPress={this.onPress}
79 78
             >
80
-                <Card.Title
81
-                    title={this.props.title}
82
-                    subtitle={this.props.subtitle}
83
-                    left={this.getAvatar}
84
-                    style={{height: titleHeight}}
85
-                />
86
-                {hasImage ?
87
-                    <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
88
-                        <ImageModal
89
-                            resizeMode="contain"
90
-                            imageBackgroundColor={"#000"}
91
-                            style={{
92
-                                width: imageSize,
93
-                                height: imageSize,
94
-                            }}
95
-                            source={{
96
-                                uri: item.full_picture,
97
-                            }}
98
-                        /></View> : null}
99
-                <Card.Content>
100
-                    {item.message !== undefined ?
101
-                        <Autolink
102
-                            text={item.message}
103
-                            hashtag="facebook"
104
-                            component={Text}
105
-                            style={{height: textHeight}}
106
-                        /> : null
107
-                    }
108
-                </Card.Content>
109
-                <Card.Actions style={{height: actionsHeight}}>
110
-                    <Button
111
-                        onPress={this.onPress}
112
-                        icon={'plus'}
113
-                        style={{marginLeft: 'auto'}}>
114
-                        {i18n.t('screens.home.dashboard.seeMore')}
115
-                    </Button>
116
-                </Card.Actions>
79
+                <TouchableRipple
80
+                    style={{flex: 1}}
81
+                    onPress={this.onPress}>
82
+                    <View>
83
+                        <Card.Title
84
+                            title={this.props.title}
85
+                            subtitle={this.props.subtitle}
86
+                            left={this.getAvatar}
87
+                            style={{height: titleHeight}}
88
+                        />
89
+                        {hasImage ?
90
+                            <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
91
+                                <ImageModal
92
+                                    resizeMode="contain"
93
+                                    imageBackgroundColor={"#000"}
94
+                                    style={{
95
+                                        width: imageSize,
96
+                                        height: imageSize,
97
+                                    }}
98
+                                    source={{
99
+                                        uri: item.full_picture,
100
+                                    }}
101
+                                /></View> : null}
102
+                        <Card.Content>
103
+                            {item.message !== undefined ?
104
+                                <Autolink
105
+                                    text={item.message}
106
+                                    hashtag="facebook"
107
+                                    component={Text}
108
+                                    style={{height: textHeight}}
109
+                                /> : null
110
+                            }
111
+                        </Card.Content>
112
+                        <Card.Actions style={{height: actionsHeight}}>
113
+                            <Button
114
+                                onPress={this.onPress}
115
+                                icon={'plus'}
116
+                                style={{marginLeft: 'auto'}}>
117
+                                {i18n.t('screens.home.dashboard.seeMore')}
118
+                            </Button>
119
+                        </Card.Actions>
120
+                    </View>
121
+                </TouchableRipple>
117 122
             </Card>
118 123
         );
119 124
     }

+ 29
- 24
src/components/Home/PreviewEventDashboardItem.js View File

@@ -1,9 +1,9 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {StyleSheet} from "react-native";
4
+import {StyleSheet, View} from "react-native";
5 5
 import i18n from "i18n-js";
6
-import {Avatar, Button, Card} from 'react-native-paper';
6
+import {Avatar, Button, Card, TouchableRipple} from 'react-native-paper';
7 7
 import {getFormattedEventTime, isDescriptionEmpty} from "../../utils/Planning";
8 8
 import CustomHTML from "../Overrides/CustomHTML";
9 9
 import type {CustomTheme} from "../../managers/ThemeManager";
@@ -36,31 +36,36 @@ class PreviewEventDashboardItem extends React.Component<Props> {
36 36
             return (
37 37
                 <Card
38 38
                     style={styles.card}
39
-                    onPress={props.clickAction}
40 39
                     elevation={3}
41 40
                 >
42
-                    {hasImage ?
43
-                        <Card.Title
44
-                            title={event.title}
45
-                            subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
46
-                            left={getImage}
47
-                        /> :
48
-                        <Card.Title
49
-                            title={event.title}
50
-                            subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
51
-                        />}
52
-                    {!isEmpty ?
53
-                        <Card.Content style={styles.content}>
54
-                            <CustomHTML html={event.description}/>
55
-                        </Card.Content> : null}
41
+                    <TouchableRipple
42
+                        style={{flex: 1}}
43
+                        onPress={props.clickAction}>
44
+                        <View>
45
+                            {hasImage ?
46
+                                <Card.Title
47
+                                    title={event.title}
48
+                                    subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
49
+                                    left={getImage}
50
+                                /> :
51
+                                <Card.Title
52
+                                    title={event.title}
53
+                                    subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
54
+                                />}
55
+                            {!isEmpty ?
56
+                                <Card.Content style={styles.content}>
57
+                                    <CustomHTML html={event.description}/>
58
+                                </Card.Content> : null}
56 59
 
57
-                    <Card.Actions style={styles.actions}>
58
-                        <Button
59
-                            icon={'chevron-right'}
60
-                        >
61
-                            {i18n.t("screens.home.dashboard.seeMore")}
62
-                        </Button>
63
-                    </Card.Actions>
60
+                            <Card.Actions style={styles.actions}>
61
+                                <Button
62
+                                    icon={'chevron-right'}
63
+                                >
64
+                                    {i18n.t("screens.home.dashboard.seeMore")}
65
+                                </Button>
66
+                            </Card.Actions>
67
+                        </View>
68
+                    </TouchableRipple>
64 69
                 </Card>
65 70
             );
66 71
         } else

+ 18
- 11
src/components/Lists/CardList/CardListItem.js View File

@@ -1,7 +1,8 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Caption, Card, Paragraph} from 'react-native-paper';
4
+import {Caption, Card, Paragraph, TouchableRipple} from 'react-native-paper';
5
+import {View} from "react-native";
5 6
 import type {cardItem} from "./CardList";
6 7
 
7 8
 type Props = {
@@ -28,17 +29,23 @@ export default class CardListItem extends React.Component<Props> {
28 29
                     marginLeft: 'auto',
29 30
                     marginRight: 'auto',
30 31
                 }}
31
-                onPress={item.onPress}
32 32
             >
33
-                <Card.Cover
34
-                    style={{height: 80}}
35
-                    source={source}
36
-                />
37
-                <Card.Content>
38
-                    <Paragraph>{item.title}</Paragraph>
39
-                    <Caption>{item.subtitle}</Caption>
40
-                </Card.Content>
33
+                <TouchableRipple
34
+                    style={{flex: 1}}
35
+                    onPress={item.onPress}>
36
+                    <View>
37
+                        <Card.Cover
38
+                            style={{height: 80}}
39
+                            source={source}
40
+                        />
41
+                        <Card.Content>
42
+                            <Paragraph>{item.title}</Paragraph>
43
+                            <Caption>{item.subtitle}</Caption>
44
+                        </Card.Content>
45
+                    </View>
46
+                </TouchableRipple>
47
+
41 48
             </Card>
42 49
         );
43 50
     }
44
-}
51
+}

Loading…
Cancel
Save