Screen Flickering During Carousel Transitions with New Architecture

[saisankar428]

When using react-native-reanimated-carousel, the StatusBar flickers during transitions between carousel items. This issue occurs when using StatusBar.setTranslucent(true). Removing setTranslucent(true) reduces the issue, but the StatusBar still flickers while the carousel animates. This issue is happening only with the new Architecture.

🔍 Observations:

The flickering is more noticeable on Android.
If we remove translucent, only the StatusBar flickers (not the full screen).
If translucent is there, the entire screen flashes white during transitions.

🛠 Steps to Reproduce:
Install react-native-reanimated-carousel.
Use StatusBar.setTranslucent(true) and set a background color in useEffect().
Implement the carousel with multiple items.
Observe the flickering of the StatusBar during transitions.

Note: This issue is happening only with the new Architecture with old Architecture it is working as expected.

return (
<Offline.Blocking>

<SafeAreaView style={styles.container} edges={['top', 'bottom']}>





<Button.Secondary
title={t('OnboardingBenefits.Authentication.SecondaryButton')}
buttonStyle={styles.registerButtonStyle}
onPress={auth.register}
testID={makeTestID('registerButton')}
titleStyle={styles.registerButtonTitleStyle}
containerStyle={styles.buttonContainer}
/>
<Button.Primary
title={t('OnboardingBenefits.Authentication.PrimaryButton')}
buttonStyle={styles.loginButtonStyle}
testID={makeTestID('loginButton')}
onPress={auth.login}
containerStyle={styles.buttonContainer}
/>

<Button.Tertiary
title={t('OnboardingBenefits.Authentication.TertiaryButton')}
testID={makeTestID('tryTheAppButton')}
onPress={auth.guestLogin}
titleStyle={styles.tryTheAppButtonTitleStyle}
/>


</Offline.Blocking>
);
};

const themedStyles = ThemedStyleSheet.create((theme, isDark, a11y) => ({
container: {
flex: 1,
backgroundColor: isDark ? theme.colors.colorPrimary800 : theme.colors.colorPrimary200,
},
buttonsContainer: {
marginTop: 'auto',
paddingHorizontal: theme.spacing.m,
gap: theme.spacing.s,
},
buttonContainer: {
flex: a11y.textSize.isUpScaledTextUser ? 0 : 1,
},
registerAndLoginButtonsContainer: {
flexDirection: a11y.textSize.isUpScaledTextUser ? 'column' : 'row',
gap: theme.spacing.s,
},
registerButtonStyle: {
backgroundColor: isDark ? theme.colors.colorPrimary700 : theme.colors.colorPrimary050,
},
loginButtonStyle: {
backgroundColor: isDark ? theme.colors.colorPrimary500 : theme.colors.colorPrimary700,
},
registerButtonTitleStyle: {
color: isDark ? theme.colors.colorPrimary300 : theme.colors.colorPrimary700,
},
tryTheAppButtonTitleStyle: {
color: isDark ? theme.colors.colorPrimary200 : theme.colors.colorPrimary700,
},
}));

[dosubot]

Hello @saisankar428! I'm here to help you with any bugs or questions you have. Let's work together to solve the issue you're facing.

To resolve the screen flickering issue during carousel transitions when using react-native-reanimated-carousel with StatusBar.setTranslucent(true) in the new architecture, you can use React Navigation's useFocusEffect to manage the visibility of the carousel. This approach helps prevent animation conflicts:

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(() => {
      setIsCarouselVisible(true);
      return () => {
        setIsCarouselVisible(false);
      };
    }, [])
  );

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

This solution ensures that the carousel is only rendered when the screen is in focus, reducing the likelihood of flickering caused by animation conflicts ^[1].

To continue talking to Dosu, mention @dosu.

---

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

[saisankar428]

Tried, but no luck still the same issue.

Screen.Recording.2025-02-21.at.08.53.14.mov

[dosubot]

Hi, @saisankar428. I'm Dosu, and I'm helping the react-native-reanimated-carousel team manage their backlog. I'm marking this issue as stale.

Issue Summary:

• Screen flickering occurs during carousel transitions on Android with StatusBar.setTranslucent(true).
• Suggested solution using React Navigation's useFocusEffect did not resolve the issue.
• The problem persists, requiring further investigation or alternative solutions.

Next Steps:

• Please confirm if this issue is still relevant with the latest version of the react-native-reanimated-carousel.
• If no updates are provided, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!