Cards not rendered when firstItem > 0

[dnish]

Hey,
I'm having a player component which displays the current covers of the loaded playlist. If the user opens the player and the firstItem (which is the current played song) is bigger than 0, the covers are not rendered properly:

When I now start sliding to the right (next item), the rendering gets corrected:

Issue started happening after upgrading from 2.4 to 3.1.

 <Carousel
                ref={'covers'}
                data={this.getUserFiles()}
                renderItem={this.renderCover}
                sliderWidth={viewportWidth}
                itemWidth={240}
                inactiveSlideScale={0.9}
                inactiveSlideOpacity={0.6}
                showsHorizontalScrollIndicator={false}
                snapOnAndroid={true}
                onSnapToItem={this.onSnap}
                firstItem={PlayerStore.playlist.currentIndex}
            />

When I open the player, the covers are available for a second. After that, they are hidden. Any idea what could be wrong?

BTW: This seems only to happen on iOS.

[bd-arc]

Hi @dnish,

First of all: congratulations, your app looks awesome! I've always thought that this plugin should be used to make a great music player ;-)

The issue you're having has to do with the FlatList component on which the carousel is now based since version 3 (instead of ScrollView in previous versions). I recommend you to:

• take a look at this RN issue
• try adding removeClippedSubviews={false} (note that this might impair performance)
• try playing with inherited props, particularly initialNumToRender, maxToRenderPerBatch, windowSize, and updateCellsBatchingPeriod (take a look at the VirtualizedList's doc for more info)
• try rendering the carousel only when all your data has been fetched
• try setting apparitionDelay to 0.

Let me know if any of this helped.

[cinder92]

@dnish your app looks awesome! could you share your link to itunes after published is finish? really nice!

[dnish]

Hey,
thank you guys ☺️. The app is available on iTunes (https://itunes.apple.com/ch/app/muzica-cloud/id1248339418?l=en&mt=8) and Google Play Store (https://play.google.com/store/apps/details?id=com.muzica.android). Muzica allows you to upload songs from your devices (like Android smartphone, laptop or Mac) to the cloud and make them available on every single device you own. I'm currently developing the apps for Mac and Windows, so for the moment songs can only be uploaded from an Android device or websites, which have integrated the Muzica button (f.e. http://www.yabeat.com).

@bd-arc Good to know, I'll try these settings later this day. I just saw that some people who have this issue are using react-navigation like me, so I guess this package could cause the problem.

[dnish]

It seems like an issue with react-navigation and their animation. If I set apparitionDelay to a high value (f.e. 5000), the covers are rendered correctly. I guess because the view is then fully loaded. So I need to find a way to render the covers after the navigation animation has finished.

[bd-arc]

@dnish I've just released version 3.2.0 3.2.1. I don't know if it can help with your issue, but it's worth trying.

By the way, thanks for the info regarding your app. I'll make sure to check it out!

[bd-arc]

Hi @dnish,

Any news regarding this issue? Did you have time to try the miscellaneous suggestions I gave you?

[dnish]

Hey @bd-arc,
changing the different props didn't help, I guess it's more a React/React-Navigation issue. I'll try the newest version when we release a new version of our app. I'm currently dealing with facebook/react-native#15968 since we are using FlatList components.

BTW: I found another bug. When a song changes and the app is in background, the cover size of the selected item is wrong when it goes back to foreground.

[bd-arc]

Thanks for the feedback @dnish!

Regarding the other issue, I don't see any way for the carousel to automatically update while the app is in background. It seems to me that this should be handled on your side (e.g. snapping to the current active song index when coming back). Any thoughts about that?

[dnish]

@bd-arc It snaps to the current element after going back to foreground, but the problem is, that the size isn't correct. This only happens on Android.

I've switched to the next song which is "Wonder Woman" - but the cover in the middle has the wrong (old) size, while the element before has the "selected" size. Maybe some of the animations won't work in background and so we got wrong sizes when moving back to foreground? The active item is correct.

[bd-arc]

@dnish Have you tried version 3.2.1? Because I've solved a similar issue recently...

[dnish]

@bd-arc I'll will try it, thank you very much :)

[bd-arc]

Closing for now, but feel free to continue the discussion if needed ;-)

[martinfrouin]

I have the same issue, items who are > at firstItem are not rendering every time.
Is there a fix or something please ?

EDIT: it seems that putting removeClippedSubviews={false} fix it