Android Blinking Issue when swiping

[sohuichoi]

Describe the bug

At the moment when swiping to right, the data in the render item changes from the current to prior data.
This issue only occurs in the Android.
How can I resolve?

To Reproduce
Steps to reproduce the behavior:
The attached gif file shows the blinking issue.
I set the video speed from 1 to 0.25.
If I revert the card by swiping toward left, it's fine.
but the issue occurs when swiping toward right.

Expected behavior

I hope the animation shows smoothly, not blinking.
Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• react: v18.2.0
• react-native: v0.73.4
• react-native-reanimated: v3.15.1
• react-native-reanimated-carousel: v4.0.0-alpha.12
• react-native-gesture-handler: v2.16.2

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

the following is adjusted code.

import { colorSystem } from '@/styles/theme';
import React, { memo, useState } from 'react';
import { Text } from 'react-native';
import Animated from 'react-native-reanimated';
import Carousel from 'react-native-reanimated-carousel';
import styled from 'styled-components/native';

const CustomCarousel = ({ screenWidth, data, viewCount }) => {
	return (
		<>
			<Carousel
				style={{
					width: '100%',
					height: '100%',
					alignItems: 'flex-end',
					justifyContent: 'center',
					alignSelf: 'center',
					borderWidth: 1,
					borderColor: 'red',
				}}
				width={screenWidth - 40}
				height={320}
				pagingEnabled={true}
				snapEnabled={false}
				windowSize={2}
				mode='vertical-stack'
				loop={true}
				autoPlay={false}
				autoPlayReverse={false}
				data={data}
				modeConfig={{
					snapDirection: 'right',
					stackInterval: -24,
					opacityInterval: 0.01,
					moveSize: screenWidth,
				}}
				defaultIndex={data.length - 1}
				renderItem={({ item, index }) => <MemoizedItem item={item} index={index} />}
			/>
		</>
	);
};

export default CustomCarousel;
const colors = ['#33FF57', '#a0a8c0', '#3357FF', '#33FF57', '#33FF57'];

const MemoizedItem = memo(
	({ item, index }) => (
		<Test style={{ backgroundColor: colors[index % colors.length] }}>
			<Text
				style={{
					fontSize: 50,
				}}
			>
				{item}
			</Text>
		</Test>
	),
	(prevProps, nextProps) => prevProps.index === nextProps.index
);

const Test = styled(Animated.View)`
	background-color: ${colorSystem.pink[200]};
	width: 100%;
	max-width: 384px;
	height: 320px;
	padding: 24px 20px 0px;
	border-radius: 16px;
	border-width: 1px;
	align-self: center;
`;

[dosubot]

Hey @sohuichoi 👋, I'm here to help you with any bugs, questions, or contributions you have. Let's work together to solve this issue!

I found some similar issues that might help you resolve the Android blinking issue when swiping right in your react-native-reanimated-carousel:

1. Image Flickers When Swiping Carousel (Open)

   • Suggested solutions include optimizing image loading, using a cached image component, and avoiding unnecessary re-rendering. Additionally, using the react-native-reanimated-carousel library with custom animations can help reduce flickering ^[1].

2. Weird animation issue with Expo SDK 50 (Open)

   • This issue is related to animation problems and has ongoing work in pull requests fix: flicker when starting pan: panOffset value race condition #576 and feat/fix: better slow pan: if user intent is to stay on current page, _don't_ change page #596, which aim to solve animation-related problems. Monitoring these pull requests and applying their changes might help improve the behavior ^[2].

3. Carousel disappear on swipe/drag on Expo RN Web (Open)

   • This issue was resolved by ensuring the correct version of dependencies and reinstalling pods after trying different versions ^[3].

Additionally, there are some relevant bug fixes in the repository that address similar blinking issues:

• Commit 96c9b75: "fix item blink when scroll active"
• Commit 063f564: "item blink"

Ensure you are using the latest version of the library where these fixes are included. You can update to the latest version using:

npm install react-native-reanimated-carousel@latest

If the issue persists, consider reviewing the changes made in the mentioned commits to understand the specific fixes applied ^[4].

By following these suggestions and ensuring you have the latest updates, you should be able to resolve the blinking issue on Android.

To continue talking to Dosu, mention @dosu.

[nmassey]

hi @sohuichoi -
I've got a patch waiting for review that I hope will resolve this issue. Does this seem to be the same bug?

• fix: flicker when starting pan: panOffset value race condition #576

[sohuichoi]

Hello @nmassey
Yes That's absolutely the same issue with me!
Thanks to the recommended PR, I could resolve the issue by downgrading the version from 4.0.0-alpha.12 to 3.5.1.