react-native-swipable-cards - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "react-native-swipable-cards",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Swipable cards with different behaviors",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/index.js

@@ -134,3 +134,3 @@ import React, { Component } from 'react'
 
-  renderFirstCard(card) {
+  renderFirstCard(card, cardIndex) {
     const { pan, enter } = this.state
@@ -152,3 +152,3 @@
       <Animated.View
-        key={+new Date() + Math.random()}
+        key={cardIndex}
         style={[this.props.cardStyle, animatedCardstyles ]}
@@ -162,6 +162,6 @@ {...this._panResponder.panHandlers}
 
-  renderStackCard(card, style) {
+  renderStackCard(card, style, cardIndex) {
     return (
       <Animated.View
-        key={+new Date() + Math.random()}
+        key={cardIndex}
         style={[this.props.cardStyle, style]}
@@ -175,8 +175,12 @@ >
   renderStack() {
-    let { currentCardIdx } = this.state
-    let cards = this.props.cards.slice(currentCardIdx, currentCardIdx + this.props.stackDepth).reverse()
+    const { currentCardIdx } = this.state
+    const { cards, stackDepth } = this.props
 
-    return cards.map((card, i) => {
-      if (i + 1 === cards.length) {
-        return this.renderFirstCard(card)
+    return Array(stackDepth).fill().map((_, i) => {
+      // Render last card first
+      const cardIndex = currentCardIdx + (stackDepth - 1) - i
+      const card = cards[cardIndex]
+
+      if (cardIndex === currentCardIdx) {
+        return card && this.renderFirstCard(card, cardIndex)
       }
@@ -197,3 +201,3 @@
 
-      return this.renderStackCard(card, style)
+      return card && this.renderStackCard(card, style, cardIndex)
     })
@@ -215,5 +219,3 @@ }
       <View style={this.props.containerStyle}>
-        { this.state.card
-          ? (this.props.stack ? this.renderStack() : this.renderFirstCard(this.state.card))
-            : this.renderNoMoreCards() }
+        { this.state.card ? this.renderStack() : this.renderNoMoreCards() }
 
@@ -261,3 +263,2 @@ { this.props.renderNope
     alignItems: 'center',
-    backgroundColor: '#F5FCFF'
   },
@@ -264,0 +265,0 @@ yup: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13574

increased by0.04%

No dependency changes