diff --git a/src/components/Lists/CardList/CardList.js b/src/components/Lists/CardList/CardList.js index 957434b..da09a12 100644 --- a/src/components/Lists/CardList/CardList.js +++ b/src/components/Lists/CardList/CardList.js @@ -1,13 +1,15 @@ // @flow import * as React from 'react'; -import {Animated} from "react-native"; +import {Animated, Dimensions} from "react-native"; import ImageListItem from "./ImageListItem"; import CardListItem from "./CardListItem"; +import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet"; type Props = { dataset: Array, isHorizontal: boolean, + contentContainerStyle?: ViewStyle, } export type cardItem = { @@ -26,9 +28,18 @@ export default class CardList extends React.Component { isHorizontal: false, } + windowWidth: number; + horizontalItemSize: number; + + constructor(props: Props) { + super(props); + this.windowWidth = Dimensions.get('window').width; + this.horizontalItemSize = this.windowWidth/4; // So that we can fit 3 items and a part of the 4th => user knows he can scroll + } + renderItem = ({item}: { item: cardItem }) => { if (this.props.isHorizontal) - return ; + return ; else return ; }; @@ -39,7 +50,7 @@ export default class CardList extends React.Component { let containerStyle = {}; if (this.props.isHorizontal) { containerStyle = { - height: 150, + height: this.horizontalItemSize + 50, justifyContent: 'space-around', }; } @@ -51,7 +62,9 @@ export default class CardList extends React.Component { keyExtractor={this.keyExtractor} numColumns={this.props.isHorizontal ? undefined : 2} horizontal={this.props.isHorizontal} - contentContainerStyle={containerStyle} + contentContainerStyle={this.props.isHorizontal ? containerStyle : this.props.contentContainerStyle} + pagingEnabled={this.props.isHorizontal} + snapToInterval={this.props.isHorizontal ? (this.horizontalItemSize+5)*3 : null} /> ); } diff --git a/src/components/Lists/CardList/ImageListItem.js b/src/components/Lists/CardList/ImageListItem.js index bedde23..dd17110 100644 --- a/src/components/Lists/CardList/ImageListItem.js +++ b/src/components/Lists/CardList/ImageListItem.js @@ -7,6 +7,7 @@ import type {cardItem} from "./CardList"; type Props = { item: cardItem, + width: number, } export default class ImageListItem extends React.Component { @@ -16,16 +17,15 @@ export default class ImageListItem extends React.Component { } render() { - const props = this.props; - const item = props.item; + const item = this.props.item; const source = typeof item.image === "number" ? item.image : {uri: item.image}; return ( { { marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' - }}>{item.title} + }}> + {item.title} + ); } -} \ No newline at end of file +}