Skip to content
Permalink
Browse files

solve issue with drag and drop on Android: Card component isn't going…

… over previous

or next cards when being dragged. This results in the currently dragged card
being hidden when it goes outside its own row.

solution: re-structure the data for presentation purposes and use .map instead of
FlatList
  • Loading branch information...
anchetaWern committed Jul 3, 2018
1 parent 0c67021 commit eb387a123b030b2d7d5089be675018f048017f56
Showing with 73 additions and 41 deletions.
  1. +1 −1 src/components/BigCard.js
  2. +72 −40 src/components/CardList.js
@@ -34,7 +34,7 @@ export default class BigCard extends Component<Props> {

const titleMoveY = this.titleTranslateYValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 310]
outputRange: [0, 450]
});

const titleScale = this.titleScaleValue.interpolate({
@@ -1,57 +1,89 @@
import React from "react";
import React, { Component } from "react";
import { ScrollView, View, FlatList, Animated, Platform } from "react-native";
import Card from "./Card";

import { HEADER_MAX_HEIGHT } from "../settings/layout";

const CardList = ({
data,
cardAction,
viewAction,
bookmarkAction,
shareAction,
onScroll,
scrollEnabled,
toggleDropArea,
isDropArea,
targetDropArea,
removePokemon
}) => {
return (
<ScrollView scrollEnabled={scrollEnabled}>
<View style={[styles.scroll_container]}>
<FlatList
scrollEnabled={false}
data={data}
renderItem={({ item }) => (
<Card
item={item}
cardAction={cardAction}
viewAction={viewAction}
bookmarkAction={bookmarkAction}
shareAction={shareAction}
toggleDropArea={toggleDropArea}
isDropArea={isDropArea}
targetDropArea={targetDropArea}
removePokemon={removePokemon}
/>
)}
keyExtractor={item => item.id}
numColumns={2}
type Props = {};
export default class CardList extends Component<Props> {
render() {
const { data, scrollEnabled } = this.props;

return (
<ScrollView scrollEnabled={scrollEnabled}>
<View style={[styles.scroll_container]}>{this.renderPairs(data)}</View>
</ScrollView>
);
}

renderPairs = data => {
let pairs = getPairsArray(data);

return pairs.map((pair, index) => {
return (
<View style={styles.pair} key={index}>
{this.renderCards(pair)}
</View>
);
});
};

renderCards = pair => {
const {
cardAction,
viewAction,
bookmarkAction,
shareAction,
toggleDropArea,
isDropArea,
targetDropArea,
removePokemon
} = this.props;

return pair.map(item => {
return (
<Card
key={item.name}
item={item}
cardAction={cardAction}
viewAction={viewAction}
bookmarkAction={bookmarkAction}
shareAction={shareAction}
toggleDropArea={toggleDropArea}
isDropArea={isDropArea}
targetDropArea={targetDropArea}
removePokemon={removePokemon}
/>
</View>
</ScrollView>
);
);
});
};
}

const getPairsArray = items => {
var pairs_r = [];
var pairs = [];
var count = 0;
items.forEach(item => {
count += 1;
pairs.push(item);
if (count == 2) {
pairs_r.push(pairs);
count = 0;
pairs = [];
}
});
return pairs_r;
};

const styles = {
scroll: {
flex: 1
},
pair: {
flexDirection: "row"
},
scroll_container: {
alignItems: "center",
paddingTop: Platform.OS !== "ios" ? HEADER_MAX_HEIGHT : 0
}
};

export default CardList;

0 comments on commit eb387a1

Please sign in to comment.
You can’t perform that action at this time.