Changed cards to basic view

This commit is contained in:
Arnaud Vergnet 2020-04-22 10:42:02 +02:00
parent 8eaa46b900
commit 443f179f1d
3 changed files with 27 additions and 17 deletions

View file

@ -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}
/>

View file

@ -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}}
<View>
<Image
style={{
width: 100,
height: 100,
marginLeft: 'auto',
marginRight: 'auto',
}}
source={source}
/>
<Card.Content>
<Paragraph>{item.title}</Paragraph>
<Caption>{item.subtitle}</Caption>
</Card.Content>
</Card>
<Text style={{
marginTop: 5,
marginLeft: 'auto',
marginRight: 'auto',
}}>{item.title}</Text>
</View>
</TouchableRipple>
);
}
}

View file

@ -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/>}
/>
}
}