Card flickering

[dittmarconsulting]

Hey man,

Thank you so much for this library. I tried my own version with reanimated but then I found yours.

I have forked your repo as I need more functionality.

So, I can fix any issues myself but it would be super helpful if you can point me in the right direction in the code why some of the images re-render before they are gone and suggestions on how to fix it.

Note:

I have converted these state values into ref's to avoid re-render but it only improved the flickering a little bit.

I'm convinced these lines causes it but was was not able to fix the issue.

Have a look at this screen recording

[tarasvakulka]

Please, provide reproducible example, if it possible.

[dittmarconsulting]

Apart from the line changes I mentioned above, it's 100% your code. In fact, I saw the flickering with your code.

Btw, I changed the delay values of both withDelay and that seemed to work. I increased it to 500

[tarasvakulka]

Apart from the line changes I mentioned above, it's 100% your code. In fact, I saw the flickering with your code.

Btw, I changed the delay values of both withDelay and that seemed to work. I increased it to 500

I need example of your CardsSwipe component <CardsSwipe cards={cardsData} cardContainerStyle={styles.cardContainer} renderCard={} /> if you use the same like in example of this repo just tell about it.

[dittmarconsulting]

I used your code "as is" when I saw the flickering first on a physical device

iPhone X

"react": "^17.0.2",
"react-native": "^0.66.3",
"react-native-gesture-handler": "^2.0.0",
"react-native-reanimated": "2.2.4",

[tarasvakulka]

Could you please provide example of this part of you code ? `<CardsSwipe cards={cardsData} cardContainerStyle={styles.cardContainer} renderCard={(card) => (

    )}
  />
  `

[dittmarconsulting]

export type CardType = {
  id: number
  name: string
  age: number
  src: number
}

const cards: CardType[] = [
  {
    id: 1,
    name: 'Caroline',
    age: 24,
    src: require('../../assets/testImages/1.jpeg')
  },
  {
    id: 2,
    name: 'Jack',
    age: 30,
    src: require('../../assets/testImages/2.jpeg')
  }
]

<CardSwiper
  ref={cardSwiperRef}
  cards={testData}
  cardContainerStyle={{ width: '92%', height: '70%' }}
  lowerCardZoom={0.8}
  animDuration={400}
  loop={true}
  renderCard={(card) => (
    <Box flex={1}>
       <Image width={300} height={400} borderRadius={20} source={card.src} />
     </Box>
  )}
/>

[tarasvakulka]

Thanks a lot. I double check this issue and bump new version with fix soon.

[dittmarconsulting]

Sorry man,

I found another issue. If I use the swipeLeft and the swipeRight functions with the same setup I see the re-render of the previous image again as shown in the video here

As you can see I use the buttons first and then the swipe gesture at the end.

Here is my implementation

const cardSwiperRef = useRef<CardSwiperRefProps>()

const handleDislikePress = (): void => {
  if (cardSwiperRef.current) {
    cardSwiperRef.current.swipeLeft()
  }
}

const handleLikePress = (): void => {
  if (cardSwiperRef.current) {
    cardSwiperRef.current.swipeRight()
  }
}

<CardSwiper
  ref={cardSwiperRef}
  cards={testData}
  cardContainerStyle={{ width: '92%', height: 400 }}
  lowerCardZoom={0.8}
  animDuration={400}
  loop={true}
  renderCard={(card) => (
    <Box flex={1}>
      <Image width={300} height={400} borderRadius={20} source={card.src} />
    </Box>
  )}
/>

[tarasvakulka]

@dittmarconsulting Hi. Could you please install lib from branch bug/flickering-fix and check if issuses still reproducing ? "dependencies": { ... "react-native-cards-swipe": "git+https://github.com/tarasvakulka/react-native-cards-swipe.git#bug/flickering-fix" }

[dittmarconsulting]

@tarasvakulka That made it worse, to be honest.

The best result so far with your previous code is to set the animDuration={300} and set the delay time in the withDelay() functions inside resetPosition() function to 200

https://github.com/tarasvakulka/react-native-cards-swipe/blob/bug/flickering-fix/src/components/CardsSwipe/index.tsx#L106 https://github.com/tarasvakulka/react-native-cards-swipe/blob/bug/flickering-fix/src/components/CardsSwipe/index.tsx#L111

[tarasvakulka]

@tarasvakulka That made it worse, to be honest.

The best result so far with your previous code is to set the animDuration={300} and set the delay time in the withDelay() functions inside resetPosition() function to 200

https://github.com/tarasvakulka/react-native-cards-swipe/blob/bug/flickering-fix/src/components/CardsSwipe/index.tsx#L106 https://github.com/tarasvakulka/react-native-cards-swipe/blob/bug/flickering-fix/src/components/CardsSwipe/index.tsx#L111

Thanks for response. I will invetigate little bit more soulution to fix this problem, and come back in a few days. If talk about solution with increase delay time in the withDelay() it's not the best approuch because user will have delay before can swipe next card, but for temproray fix it's nice.

[dittmarconsulting]

Thank you so much @tarasvakulka

You are correct. There is a delay before the user can swipe again.

[tarasvakulka]

@dittmarconsulting Today I tested app from /example folder of main branch (v1.0.6) on a physical device IPhone X and couldn't reproduce card flickering, it made me think maybe in you code exist extra rerender that cause the problem, please make sure that data passed in CardSwiper component don't change extra times and that on your Card component don't have extra rerender. I close this issue for now, feel free to reopen.

https://user-images.githubusercontent.com/20745370/149637525-4b5140bd-d68c-40f8-ba34-b231db7d6c59.mp4

[boritopalito]

I am wondering if anyone has a solution for this. I am having the exact same problem and first thought it was on my side until I found this closed issue. @dittmarconsulting @tarasvakulka