Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible to make the dynamic list working #340

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Possible to make the dynamic list working #340

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e90d67
Removed `cards` state and use props instead
hyochan Dec 19, 2020
fce9fa6
Remove warning message adding `useNativeDriver` props
hyochan Dec 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 24 additions & 19 deletions Swiper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { Animated, Dimensions, PanResponder, Text, View } from 'react-native'
import React, { Component } from 'react'
import { PanResponder, Text, View, Dimensions, Animated } from 'react-native'

import PropTypes from 'prop-types'
import isEqual from 'lodash/isEqual'
import ViewOverflow from 'react-native-view-overflow'

import styles from './styles'

const { height, width } = Dimensions.get('window')
Expand Down Expand Up @@ -42,7 +41,6 @@ class Swiper extends Component {
this.state = {
...calculateCardIndexes(props.cardIndex, props.cards),
pan: new Animated.ValueXY(),
cards: props.cards,
previousCardX: new Animated.Value(props.previousCardDefaultPositionX),
previousCardY: new Animated.Value(props.previousCardDefaultPositionY),
swipedAllCards: false,
Expand Down Expand Up @@ -195,10 +193,14 @@ class Swiper extends Component {
})
}

return Animated.event([null, this.createAnimatedEvent()])(
return Animated.event(
[null, this.createAnimatedEvent()], {
useNativeDriver: false
}
)(
event,
gestureState
)
gestureState,
);
}

onPanResponderGrant = (event, gestureState) => {
Expand Down Expand Up @@ -344,7 +346,8 @@ class Swiper extends Component {
Animated.spring(this.state.pan, {
toValue: 0,
friction: this.props.topCardResetAnimationFriction,
tension: this.props.topCardResetAnimationTension
tension: this.props.topCardResetAnimationTension,
useNativeDriver: true
}).start(cb)

this.state.pan.setOffset({
Expand Down Expand Up @@ -416,7 +419,8 @@ class Swiper extends Component {
x: x * SWIPE_MULTIPLY_FACTOR,
y: y * SWIPE_MULTIPLY_FACTOR
},
duration: this.props.swipeAnimationDuration
duration: this.props.swipeAnimationDuration,
useNativeDriver: true
}).start(() => {
this.setSwipeBackCardXY(x, y, () => {
mustDecrementCardIndex = mustDecrementCardIndex
Expand Down Expand Up @@ -463,8 +467,8 @@ class Swiper extends Component {
}

animateStack = () => {
const { cards, secondCardIndex, swipedAllCards } = this.state
let { stackSize, infinite, showSecondCard } = this.props
const { secondCardIndex, swipedAllCards } = this.state
let { cards, stackSize, infinite, showSecondCard } = this.props
let index = secondCardIndex

while (stackSize-- > 1 && showSecondCard && !swipedAllCards) {
Expand Down Expand Up @@ -504,7 +508,7 @@ class Swiper extends Component {

this.onSwipedCallbacks(onSwiped)

allSwipedCheck = () => newCardIndex === this.state.cards.length
const allSwipedCheck = () => newCardIndex === this.props.cards.length

if (allSwipedCheck()) {
if (!infinite) {
Expand All @@ -523,7 +527,7 @@ class Swiper extends Component {

decrementCardIndex = cb => {
const { firstCardIndex } = this.state
const lastCardIndex = this.state.cards.length - 1
const lastCardIndex = this.props.cards.length - 1
const previousCardIndex = firstCardIndex - 1

const newCardIndex =
Expand All @@ -534,25 +538,25 @@ class Swiper extends Component {
}

jumpToCardIndex = newCardIndex => {
if (this.state.cards[newCardIndex]) {
if (this.props.cards[newCardIndex]) {
this.setCardIndex(newCardIndex, false)
}
}

onSwipedCallbacks = (swipeDirectionCallback) => {
const previousCardIndex = this.state.firstCardIndex
this.props.onSwiped(previousCardIndex, this.state.cards[previousCardIndex])
this.props.onSwiped(previousCardIndex, this.props.cards[previousCardIndex])

if (swipeDirectionCallback) {
swipeDirectionCallback(previousCardIndex, this.state.cards[previousCardIndex])
swipeDirectionCallback(previousCardIndex, this.props.cards[previousCardIndex])
}
}

setCardIndex = (newCardIndex, swipedAllCards) => {
if (this._mounted) {
this.setState(
{
...calculateCardIndexes(newCardIndex, this.state.cards),
...calculateCardIndexes(newCardIndex, this.props.cards),
swipedAllCards: swipedAllCards,
panResponderLocked: false
},
Expand Down Expand Up @@ -694,6 +698,7 @@ class Swiper extends Component {
render = () => {
const { pointerEvents, backgroundColor, marginTop, marginBottom, containerStyle, swipeBackCard, useViewOverflow } = this.props
const ViewComponent = useViewOverflow ? ViewOverflow : View

return (
<ViewComponent
pointerEvents={pointerEvents}
Expand Down Expand Up @@ -761,9 +766,9 @@ class Swiper extends Component {
}

renderStack = () => {
const { cards, firstCardIndex, swipedAllCards } = this.state
const { firstCardIndex, swipedAllCards } = this.state
const renderedCards = []
let { stackSize, infinite, showSecondCard } = this.props
let { cards, stackSize, infinite, showSecondCard } = this.props
let index = firstCardIndex
let firstCard = true
let cardPosition = 0
Expand Down