Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
afirulaf opened this issue Dec 28, 2017 · 37 comments

Comments

@afirulaf
Copy link

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
Copy link

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
Copy link
Contributor

bd-arc commented Dec 29, 2017

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
Copy link

I had the same problem

@Guodadada
Copy link

adding removeClippedSubviews={false} resoved my problem, thx

@bd-arc
Copy link
Contributor

bd-arc commented Dec 30, 2017

Hi guys,

Here are a bunch of related React Native issues:

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
Copy link
Contributor

bd-arc commented Jan 3, 2018

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
Copy link
Contributor

bd-arc commented Jan 10, 2018

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

@fvsch
Copy link

fvsch commented Jan 12, 2018

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
Copy link
Contributor

bd-arc commented Jan 15, 2018

@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
Copy link
Contributor

bd-arc commented Jan 22, 2018

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

@fvsch
Copy link

fvsch commented Jan 22, 2018

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

@fvsch
Copy link

fvsch commented Feb 6, 2018

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 bd-arc removed the feedback? label Feb 6, 2018
@bd-arc
Copy link
Contributor

bd-arc commented Feb 6, 2018

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

@spotsadmin
Copy link

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

@bd-arc
Copy link
Contributor

bd-arc commented Aug 6, 2018

@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
Copy link

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
Copy link

@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
Copy link
Contributor

bd-arc commented Oct 25, 2018

@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
Copy link

@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
Copy link

gbarrar commented Jan 9, 2019

Using removeClippedSubviews={false} also worked for me.

@trickeyd
Copy link

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
Copy link

CyxouD commented Oct 7, 2019

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
Copy link

MauroTaliente commented Nov 17, 2019

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

ezgif com-video-to-gif

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

Regards

@bd-arc
Copy link
Contributor

bd-arc commented Nov 19, 2019

@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
Copy link

@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
Copy link

adding removeClippedSubviews={false} resoved my problem, thx

I love you

@matinzd
Copy link

matinzd commented Feb 12, 2020

adding removeClippedSubviews={false} resoved my problem, thx

Thanks!!!
Problem was only on iOS

@hinodi
Copy link

hinodi commented Mar 5, 2020

adding removeClippedSubviews={false} resoved my problem, thx

yeah, it works

@arlovip
Copy link

arlovip commented Mar 16, 2020

adding removeClippedSubviews={false} resoved my problem, thx

It works for me. Thank you so much

@Quelu
Copy link

Quelu commented Apr 11, 2020

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
Copy link

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
Copy link

@Guodadada You saved my life! 🚀🚀🚀

@PitzTech
Copy link

adding removeClippedSubviews={false} resoved my problem, thx

Worked on RN 0.61.5

@migN01001100
Copy link

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
Copy link

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
Copy link

ibraheem88 commented Nov 30, 2023

@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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests