Android Blinking Issue when swiping #662
Description
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;
`;