Carousel blank when changing tab for the first time. Will appear after first scroll.

[afirulaf]

Is this a bug report or a feature request?

Bug report

Have you read the guidelines regarding bug report?

Yes

Have you read the documentation in its entirety?

Yes

Have you made sure that your issue hasn't already been reported/solved?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

iOS

Is the bug reproductible in a production environment (not a debug one)?

Yes

Have you been able to reproduce the bug in the provided example?

Yes

Environment

Expo: 24
React: 16.0.0
React Native: 0.51
react-native-snap-carousel: 3.4.0
react-navigation: 1.0.0-beta.21

Steps to Reproduce

1. Open project.
2. Change to tab containing the carousel.
3. Carousel is blank.
4. Try to scroll. Carousel will appear back like normal.

Expected Behavior

Carousel appear normally.

Actual Behavior

So I have multiple carousel on multiple tab. I use react-navigation tabnavigator. On my first screen I have two carousel, and on my second screen I have another carousel. When I run my app, the carousel on the first screen works as expected. But when I change tab to my second screen, the carousel is there, but its blank. I can see it occupying the space for its height but nothing appear there. But when I scroll the page, or I scroll horizontally the area where I expect my carousel to be, it appear. I tested it on newly created snack, the same thing occur. Check my example snack below. This only happen in iOS, on Android its working fine.

Reproducible Demo

Open this snack on iOS, or use expo snack emulator. After load, change tab.
https://snack.expo.io/@afirulaf/carousel-snap-bug

[owen12ab]

I have the same problem but i am not using expo.

Environment
React Native: 0.51
react-native-snap-carousel: 3.4.0

[bd-arc]

Hi @afirulaf,

This is probably the same issue as #225, but you were kind enough to follow the contributing guidelines, which means I have a starting point to work with ;-)

Unfortunately, I think it has to do with how the FlatList component works. I'm currently implementing an option that will let users choose wether to use FlatList or ScrollView (way less bugs, but not usable with huge numbers of items).

I'll let you know when it's done so we can find out if it solves the issue.

[Guodadada]

I had the same problem

[Guodadada]

adding removeClippedSubviews={false} resoved my problem, thx

[bd-arc]

Hi guys,

Here are a bunch of related React Native issues:

• [FlatList] Rows aren't rendered until scroll facebook/react-native#1831
• ListView (or perhaps ScrollView) disappears after running in background for several minutes facebook/react-native#8607
• [FlatList] Sometimes FlatList rows are rendered, but not displayed until scroll. RN 0.43 facebook/react-native#13316
• [FlatList] render issues using scrollToIndex on componentDidMount facebook/react-native#13202

This clearly shows an issue with the FlatList component, an issue that Facebook doesn't seem too keen on aknowledging and fixing.

The removeClippedSubviews hack will do the trick, but it will basically make the FlatList component useless as it will disable all optimizations...

I'm pretty positive that using a ScrollView will do the trick but, again, it will mean forgetting about using the plugin with a huge number of items...

We won't be able to have the best of both worlds until Facebook does something about it. Since all related issues have been closed while no real solution has been provided, I'm a bit worried :-(

I'll see what I can do about implementing a custom hacky method to be called whenever needed (something along those lines, if it still works).

[bd-arc]

You may want to try out branch v3.5.0. I've added a new method triggerRenderingHack().

Here is the associated description:

triggerRenderingHack (offset) | Call this whenever needed to work around a random FlatList bug that keeps content hidden until the carousel is scrolled. Note that the offset parameter is not required and will default to either 1 or -1 depending on current scroll position.

My hope is that calling this on every tab change will solve your issue...

[bd-arc]

@afirulaf @owen12ab @Guodadada Hey guys! Have you been able to try out the proposed fix?

[fvsch]

I had this issue and tried the fix. Only testing in the iOS emulator for now, so it’s a limited test, but it seems to force the FlatList to render the item on the left by causing a rapid scroll of the content.

It works, but also looks like a glitch — sometimes barely noticeable, sometimes a bit invasive. Is that close to what you were expectig @bd-arc ? I understand that it’s a hackish workaround, so if that’s the intended behavior then all is well. ^^

[bd-arc]

@fvsch Well, the carousel should only move 1 px to the left or to the right if you don't specify the offset parameter. I was hoping that this would go unnoticed, particularly if done while changing tab...

Would you mind sharing a screencast or a Snack so I can get an idea of how bad it looks?

[bd-arc]

Closing as no further feedback was provided.
Do not hesitate to ask for a reopening if needed.

[fvsch]

Hi. I’m working on different parts of the application these days but I’ll update if I have more information.

[fvsch]

Happy to report the glitchy behavior I was seeing was not a problem with this lib.
And now that I’ve fixed our code, I do see the workaround behavior happening as described.

[bd-arc]

Glad to hear that @fvsch! And thank you for reporting back ;-)

[spotsadmin]

This issue still exists.. on iPhone 8 Plus the carousal shows up blank.

[bd-arc]

@spotsadmin As you've probably understood, this is a FlatList issue and, therefore, I have no direct control over it. The aforementioned RN issues have been closed despite the fact that no solution have been provided by the Facebook team...

As a temporary workaround, you can set useScrollView to true. Be aware that you'll lose all performance optimizations by doing so.

I'm currently fed up with the FlatList component and its incredibly annoying core issues. I'm currently working on replacing it altogether (see #250).

[evertlund]

Expo: 29.0.0
React: 16.4.1
React Native: 0.55.4
react-native-snap-carousel: 3.7.2
react-navigation: 1.5.11

Have tried:

1. Setting useScrollView to true
2. Using triggerRenderingHack();

Issue still persists unfortunately.

[kondratk]

@evertlund same behavior in here.

React 16.5.0,
React Native 0.57.1
react-native-snap-carousel: 3.7.5
react-navigation: 2.17.0

@bd-arc this issue should not be closed I think.

[bd-arc]

@kondratk Unfortunately, this is a RN issue so there is nothing we can do about it. This is why I think that keeping this thread opened would be misleading.

Anyway, have you tried adding removeClippedSubviews={false} ?

[jamninetyfive]

@kondratk Unfortunately, this is a RN issue so there is nothing we can do about it. This is why I think that keeping this thread opened would be misleading.

Anyway, have you tried adding removeClippedSubviews={false} ?

i‘m work. add this prop~ thx

[gbarrar]

Using removeClippedSubviews={false} also worked for me.

[trickeyd]

Using triggerRenderingHack(); did the job for me. Thanks!

I say that - the hack is imperceptible to me, but we'll see if it gets through QA. 🤞

So do these FlatList problems persist in RN 0.60 too?

[CyxouD]

For configuration

"react-native": "0.61.1",
"react-native-snap-carousel": "3.7.5",
"react-navigation": "^4.0.10"
Tested on iOS 13

triggerRenderingHack() doesn't work for me, only removeClippedSubviews={false}. However, it's dangerous to use https://facebook.github.io/react-native/docs/flatlist.html#removeclippedsubviews

[MauroTaliente]

Hi, I also ran into this problem.
I realized that if we wait for the component to mount, we can rendered it without problems.

I leave my approach:
https://codesandbox.io/embed/react-native-g9lyi?fontsize=14&hidenavigation=1&theme=dark

pd: I also have to make a request with the infinite pagination!

Regards

[bd-arc]

@MauroTaliente Thank you for sharing your approach!

We should definitely start using hooks within the component itself. Would you be up for the task of migrating it?

Also, do not hesitate to create a PR for the infinite pagination; it looks pretty good! Bonus point if you can make it look like the one seen in #369 ;-)

[RaquelCasadoDias]

@fvsch Well, the carousel should only move 1 px to the left or to the right if you don't specify the offset parameter. I was hoping that this would go unnoticed, particularly if done while changing tab...

@bd-arc Is there any workaround this? The same described is happening to my app when changing tabs. Sometimes is a barely noticeable fast scroll to the left and back to the center, sometimes is more apparent .

[lupelius]

adding removeClippedSubviews={false} resoved my problem, thx

I love you

[matinzd]

adding removeClippedSubviews={false} resoved my problem, thx

Thanks!!!
Problem was only on iOS

[hinodi]

adding removeClippedSubviews={false} resoved my problem, thx

yeah, it works

[lchenfox]

adding removeClippedSubviews={false} resoved my problem, thx

It works for me. Thank you so much

[Quelu]

adding removeClippedSubviews={false} resoved my problem, thx

Worked for me after one hour of research! Thank you!

Should be added in the common issues :)

[lumberman]

Tags for people like me who try to find this issue in the huge number of other issues:

• Carousel not showing on the first load
• Carousel empty on initial render
• Now working
• Working only after scroll
• Not rendering
• Not displaying
• Empty on initial render

[nguyenhoanglam]

@Guodadada You saved my life! 🚀🚀🚀

[PitzTech]

adding removeClippedSubviews={false} resoved my problem, thx

Worked on RN 0.61.5

[migN01001100]

I had this problem particularly when I was changing the amount of items into the carousel. For example n to >n, my workaround was to use this method ref.snapToItem(x).

[BuhorDenysDEV]

I have a bug like 'end of loop' in Android if I start scrolling faster the card-by-card. But 'loop={true}'. And in iOs - all good. I read all of the documentation, and a lot of issues but didn't find a good solution that solve my problem..
#238 (comment) - that didn't help me too.

Have some found a good way?

here is my Carousel:
`const SCREEN_WIDTH = Math.round(dimensions.width);

<Carousel
data={data}
renderItem={({ item }): React.ReactElement => (
<TitleCard
key={item.id}
src={item.picture}
title={item.title}
description={item.description}
onPress={(): void => navigate('ProgramIntro', { id: item.id })}
linkText={t('buttons.learnMore') || ''}
/>
)}
onSnapToItem={(e: number): void => setActiveProgram(e)}
sliderWidth={SCREEN_WIDTH}
itemWidth={SCREEN_WIDTH - 70}
containerCustomStyle={styles.carouselContainer}
decelerationRate={0.9}
removeClippedSubviews
enableMomentum
loop
/>`

[ibraheem88]

@migN01001100

I also had this issue. My snap carousel was rendering items fine on the first render. But whenever I changed the list to have items less than the current snapped index (focused item on list). I had a blank section. It's a bit strange because my component was re rendering and snap carousel should have reset the snapped index when list changed. I had to use ref.snapToItem(0) whenever props changed inside useEffect.

[BuhorDenysDEV]

To tell U the truth - after a lot of combinations to solve that behavior, I wrote my code which carousel functions perfectly. And I didn't use that lib.