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

This commit is contained in:
Arnaud Vergnet 2020-07-17 17:28:39 +02:00
parent 8004820c2a
commit d1fc8a9625
5 changed files with 116 additions and 95 deletions

View file

@ -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",

View file

@ -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,24 +47,28 @@ class EventDashBoardItem extends React.Component<Props> {
} else
subtitle = i18n.t('screens.home.dashboard.todayEventsSubtitleNA');
return (
<Card
style={styles.card}
onPress={props.clickAction}>
<Card.Title
title={i18n.t('screens.home.dashboard.todayEventsTitle')}
titleStyle={{color: textColor}}
subtitle={subtitle}
subtitleStyle={{color: textColor}}
left={() =>
<Avatar.Icon
icon={'calendar-range'}
color={iconColor}
size={60}
style={styles.avatar}/>}
/>
<Card.Content>
{props.children}
</Card.Content>
<Card style={styles.card}>
<TouchableRipple
style={{flex: 1}}
onPress={props.clickAction}>
<View>
<Card.Title
title={i18n.t('screens.home.dashboard.todayEventsTitle')}
titleStyle={{color: textColor}}
subtitle={subtitle}
subtitleStyle={{color: textColor}}
left={() =>
<Avatar.Icon
icon={'calendar-range'}
color={iconColor}
size={60}
style={styles.avatar}/>}
/>
<Card.Content>
{props.children}
</Card.Content>
</View>
</TouchableRipple>
</Card>
);
}

View file

@ -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,45 +75,50 @@ class FeedItem extends React.Component<Props> {
margin: cardMargin,
height: cardHeight,
}}
onPress={this.onPress}
>
<Card.Title
title={this.props.title}
subtitle={this.props.subtitle}
left={this.getAvatar}
style={{height: titleHeight}}
/>
{hasImage ?
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
<ImageModal
resizeMode="contain"
imageBackgroundColor={"#000"}
style={{
width: imageSize,
height: imageSize,
}}
source={{
uri: item.full_picture,
}}
/></View> : null}
<Card.Content>
{item.message !== undefined ?
<Autolink
text={item.message}
hashtag="facebook"
component={Text}
style={{height: textHeight}}
/> : null
}
</Card.Content>
<Card.Actions style={{height: actionsHeight}}>
<Button
onPress={this.onPress}
icon={'plus'}
style={{marginLeft: 'auto'}}>
{i18n.t('screens.home.dashboard.seeMore')}
</Button>
</Card.Actions>
<TouchableRipple
style={{flex: 1}}
onPress={this.onPress}>
<View>
<Card.Title
title={this.props.title}
subtitle={this.props.subtitle}
left={this.getAvatar}
style={{height: titleHeight}}
/>
{hasImage ?
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
<ImageModal
resizeMode="contain"
imageBackgroundColor={"#000"}
style={{
width: imageSize,
height: imageSize,
}}
source={{
uri: item.full_picture,
}}
/></View> : null}
<Card.Content>
{item.message !== undefined ?
<Autolink
text={item.message}
hashtag="facebook"
component={Text}
style={{height: textHeight}}
/> : null
}
</Card.Content>
<Card.Actions style={{height: actionsHeight}}>
<Button
onPress={this.onPress}
icon={'plus'}
style={{marginLeft: 'auto'}}>
{i18n.t('screens.home.dashboard.seeMore')}
</Button>
</Card.Actions>
</View>
</TouchableRipple>
</Card>
);
}

View file

@ -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,31 +36,36 @@ class PreviewEventDashboardItem extends React.Component<Props> {
return (
<Card
style={styles.card}
onPress={props.clickAction}
elevation={3}
>
{hasImage ?
<Card.Title
title={event.title}
subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
left={getImage}
/> :
<Card.Title
title={event.title}
subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
/>}
{!isEmpty ?
<Card.Content style={styles.content}>
<CustomHTML html={event.description}/>
</Card.Content> : null}
<TouchableRipple
style={{flex: 1}}
onPress={props.clickAction}>
<View>
{hasImage ?
<Card.Title
title={event.title}
subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
left={getImage}
/> :
<Card.Title
title={event.title}
subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
/>}
{!isEmpty ?
<Card.Content style={styles.content}>
<CustomHTML html={event.description}/>
</Card.Content> : null}
<Card.Actions style={styles.actions}>
<Button
icon={'chevron-right'}
>
{i18n.t("screens.home.dashboard.seeMore")}
</Button>
</Card.Actions>
<Card.Actions style={styles.actions}>
<Button
icon={'chevron-right'}
>
{i18n.t("screens.home.dashboard.seeMore")}
</Button>
</Card.Actions>
</View>
</TouchableRipple>
</Card>
);
} else

View file

@ -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,17 +29,23 @@ export default class CardListItem extends React.Component<Props> {
marginLeft: 'auto',
marginRight: 'auto',
}}
onPress={item.onPress}
>
<Card.Cover
style={{height: 80}}
source={source}
/>
<Card.Content>
<Paragraph>{item.title}</Paragraph>
<Caption>{item.subtitle}</Caption>
</Card.Content>
<TouchableRipple
style={{flex: 1}}
onPress={item.onPress}>
<View>
<Card.Cover
style={{height: 80}}
source={source}
/>
<Card.Content>
<Paragraph>{item.title}</Paragraph>
<Caption>{item.subtitle}</Caption>
</Card.Content>
</View>
</TouchableRipple>
</Card>
);
}
}
}