Any slides after the sixth item aren't visible

[eurobob]

Title says it all. The carousel still works and holds space, but the content doesn't appear

[bd-arc]

I'm gonna need way more info than that to be of any help. Your exact set up would be a good start.

I will also need to know:

• your React Native version
• your plugin version
• the OS you've tested it on
• ideally, a reproductible example.

I also recommend taking a look at #145, and particularly at this comment.

[Aliveing]

Emm... I have the same problem before, it seems the VirtualizedList problem..
Then I look #145, this property initialNumToRender={length} is worked for me.
Here is my environment:

• [email protected]
• [email protected]
• Device:
  • iOS11.0.3(15A432) (iPad Air 2)
  • iPhone 6 Simulator 11.0
  • Redmi Note 3(Android 5.0.2)

Code:

import React,{Component} from 'react';
import {View, Text} from 'react-native';
import Carousel from 'react-native-snap-carousel';

class CarouselExample extends Component{
	constructor(props) {
		super(props);
	}

	render(){
                const length = 10;
		const data = Array.from({length: length}).map((d, i) => i+1);
		return(
                           <Carousel
                                initialNumToRender={length}
				removeClippedSubviews={false}
				ref={(c) => { this._carousel = c; }}
				data={data}
				renderItem={({item, index}) => (<Text>{item}</Text>)}
				sliderWidth={768}
				itemWidth={768}
				slideStyle={{flex: 1, width: 768, height: 1024}}
			/>
		);
	}
}

export default CarouselExample;

You can try to toggle this property(initialNumToRender), I think it should have a default value in plugin.

[eurobob]

Amazing @Aliveing !!!!!! Literally just as i sat down to set up an example you saved me the time!

[bd-arc]

@Aliveing As stated in the doc, initialNumToRender already has a default value that you might need to override to suit your needs.

Note that I won't set it to data.length because it would be an overkill for most users. Furthermore, I think that it would be hazardous to try and compensate for FlatList/VirtualizedList's implementation issues.

[WienerGames]

Hello,

Can you please reopen this issue so it can be investigated? The proposed solution is not OK - it completely destroys the concept of Virtualized List. I have lists with more than 100 complex items. If I am to render them all initially the component becomes useless. I have tried all different settings and properties to no success. I am always getting the next 6 items rendered and that's it. The previous are not loaded and after the sixth - nothing. If I change the initial number to lower than 6 I get only these shown. I am going to experiment a bit with the FlatList component now to check if it's not the root of the problem and will write again.

My setup is:

"react-native": "0.48.4"
"react-native-snap-carousel": "^3.3.4"
Mac OS High Sierra
iOS 11 - device doesn't matter

[bd-arc]

Hi @WienerGames,

I'm ok to reopen the issue, but I would appreciate if one of you guys could provide a reproductible example since I haven't been able to reproduce the matter on my own.

By the look of it, it seems to be an issue of the FlatList component itself, but let's not rule out the possibility of a plugin flaw.

Just a quick test: does it help if you set apparitionDelay to 0?

[WienerGames]

Hey @bd-arc,

Thanks for the quick reply! I will send you our project in a personal message so you can check it out.

As for the apparitionDelay - we tried setting it to 0 but it didn't help. I have added logs to both item class constructor and mount methods but both are only triggered 6 times in the beginning and not any more when scrolling.

[bd-arc]

I think the conclusions of @PublicParadise in this React Native issue are really interesting.

I'll try to implement his suggestion of getting rid of getItemLayout and using scrollToOffset() instead of scrollToIndex(). We'll see if that helps with the current matter.

[bd-arc]

The issue should be fixed by this commit. To try it out, just copy/paste the following in your package.json file:

"react-native-snap-carousel": "https://github.com/archriss/react-native-snap-carousel#ce3bf06"

@WienerGames @eurobob Can you confirm that it works for you?

@WienerGames I've implemented the fix that we've discussed in private, while trying to guard against a few potential issues. Let me know if this looks legit to you ;-)

[bd-arc]

@WienerGames Do you mind telling me if the fix also works while adding removeClippedSubviews={true} to the <Carousel />?

[bd-arc]

Closing as no further feedback was provided.
The supposed fix has been published in version 3.4.0.

[eurobob]

Hardly think that 5 days is an appropriate grace period. I've been on holiday so haven't seen the responses. I will report back when i've had a chance to test out the supposed fix

[bd-arc]

@eurobob While I would normally agree with you, you need to take into account that:

• I've been talking and running tests privately with @WienerGames regarding the current issue.
• I've devoted countless hours helping people with their problems, and it was too often met with an unfortunate lack of feedback and/or appreciation. I got used to it, but I agree that this cost me a bit of patience.

Let's focus on the good news, shall we? The issue should be fixed, but do not hesitate to let me know how it goes for you ;-)

[saikiranoptisol]

@bd-arc I'm using this component from the last 1 to 2 months and everything works fine as expected. but from the last 2 days i'm facing this issue only in android. in IOS it works fine. My code is written as
<Carousel
ref={c => this._slider1Ref = c}
data={this.state.matchesData}
renderItem={this.renderItem.bind(this)}
sliderWidth={width}
itemWidth={width}
windowSize={1}
removeClippedSubviews={false}
firstItem={this.state.matchesIndex}
onSnapToItem={index => this.setState({ matchesIndex: index })}
/>

My react native version = 0.57.1 and plugin version : "^3.7.5"

[saikiranoptisol]

@WienerGames can you please tell how it worked for you. here if i use initialNumToRender props, As you mentioned for large data there us a virtualized list issue. how you have fixed this.

[bd-arc]

@saikiranoptisol If you haven't updated either the plugin version or the RN version, I don't know how to help you.

Can you provide a Snack example in which the issue can be reproduced?

[saikiranoptisol]

@bd-arc As i said earlier from past 2 months i was using same reactnative version 0.57.1 and plugin version ^3.7.5. i havent faced this issue previously but now i'm facing this issue. if i check with the previous builds also now this issue is happening which is not happening previously.

[jr-k]

Same here getItemLayout seems to have no effect anymore.