Page abnormal flickering

[Chenjiujiu]

Description

When I leave the page, the carousel causes my page to flicker

And I noticed that its structure is also disorganized.

    "@react-navigation/native": "^7.0.14",
    "@react-navigation/native-stack": "^7.2.0",
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-gesture-handler": "^2.21.2",
    "react-native-reanimated": "^3.16.6",
    "react-native-reanimated-carousel": "4.0.0-canary.22",
    "react-native-safe-area-context": "^5.0.0",
    "react-native-screens": "^4.4.0"

Steps to reproduce

Snack or a link to a repository

https://github.com/Chenjiujiu/carousel-demo

Reanimated version

4.0.0-canary.22

React Native version

0.76.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

ios

Acknowledgements

Yes

[dosubot]

Hey @Chenjiujiu! I'm here to help you with any bugs, questions, or contributions. Let's squash those bugs together! 😊

I found a similar open issue regarding flickering in the react-native-reanimated-carousel when swiping ^[1]. The suggested solutions include:

1. Optimize Image Loading: Preload images using Image.prefetch in React Native.
2. Use a Cached Image Component: Consider using react-native-fast-image for caching and reducing flickering.
3. Avoid Re-rendering: Use React.memo or useMemo to prevent unnecessary re-renders of the carousel and its children.

Additionally, ensure that the carousel component is not being re-rendered unnecessarily, which can cause flickering. You might also want to check if the issue persists when not using the mode property, as there is a known issue with the 4.0.0-canary.22 version causing crashes related to the mode property ^[2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[Chenjiujiu]

@dosu
This is not the solution I need; my issue is different from this one

[dosubot]

For the flickering issue you're experiencing when leaving the page, consider the following potential causes and solutions:

1. Custom Animation Changes: The version 4.0.0-canary.22 of react-native-reanimated-carousel introduced a change in the customAnimation function to include an index parameter. Ensure that your custom animations are correctly handling this parameter to avoid unexpected behavior ^[1].

2. Configuration Settings: Review the default configurations and props of the carousel. Settings like loop, autoFillData, scrollAnimationDuration, pagingEnabled, snapEnabled, and overscrollEnabled can contribute to flickering if not configured properly ^[2][3].

3. Recent Flickering Fixes: There have been updates addressing flickering issues, such as reworking the code to avoid flicker when starting a pan. Ensure your implementation aligns with these updates to mitigate flickering ^[4].

4. State Management: Check how state updates are managed in your app. Inefficient state updates can lead to flickering, especially if the carousel is re-rendered unnecessarily.

5. Inspect Layout: Use the React Native inspector tool to verify the layout properties and ensure there are no misconfigurations that could lead to flickering.

These steps should help you identify and resolve the flickering issue. If the problem persists, consider isolating the carousel in a minimal setup to pinpoint the cause.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[Chenjiujiu]

Does anyone else have the same issue? This has been blocking me for quite a while

[pratik9989]

@Chenjiujiu I'm experiencing the same issue. Have you found a solution yet?

[pratik9989]

@dohooo I am experiencing the same issue, and I believe the problem is that the Carousel animation is conflicting with the ScrollView/Flatlist on the other screen.

[Chenjiujiu]

I'm experiencing the same issue. Have you found a solution yet?

Not yet, I’m still working on it. Let me know if you come across anything that works!

[pratik9989]

@Chenjiujiu I found a temporary fix for the issue where the Carousel animation conflicts with the ScrollView/FlatList on other screens. My solution involves removing the Carousel component when the screen blurs and re-adding it when the screen gains focus. Here's the code that resolves the problem for me.

import { useFocusEffect } from "@react-navigation/native";
import { useCallback, useState } from "react";
import { View } from "react-native";
import Carousel from "react-native-reanimated-carousel";

export default function App() {
  const [isCarouselVisible, setIsCarouselVisible] = useState(false);

  useFocusEffect(
    useCallback(() => {
      // Show the carousel when the screen is focused
      setIsCarouselVisible(true);

      // Hide the carousel shortly after the screen is blurred
      return () => {
        setIsCarouselVisible(false);
      };
    }, [])
  );

  return (
    <View>
      {isCarouselVisible && <Carousel {...carouselProps} />}
    </View>
  );
}

[hai-dct]

Same issue for me