React-native-snap-carousel: Got unexpected null or undefined

[sksahil030]

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?

Both

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

Environment:
React: 16.0.0-alpha.12
React native: 0.47.2
react-native-snap-carousel: 3.6.0

Target Platform:
Android (6.0), 7.0, 8.0
iOS (10.3) , 11.2

Steps to Reproduce

1. I have footer tabs used in my app.If The tab A has the screen which uses "snap-carousel".
   2.If i switch between the footer tabs allowing the carousel to load the data, it works fine.But if i switch too fast, the Carousel generates error causing the app to crash

Expected Behavior

Switching the tabs should not affect Carousel

Actual Behavior

Carousel generates error related to ScrollView

[mohdInno]

Getting same issue

[bd-arc]

Hey guys,

I'm willing to take a look at the issue, but I cannot do that without a complete example that reproduces the issue ;-)

[juanlacruz]

I'm facing the same error and it happens with tinder and slack layout. To be clear, I've a screen with two tabs, one of them has the carousel and the other one not. If I switch between those tabs, that error appears on the carousel tab.

[bd-arc]

Hi @juanlacruz,

Same answer as above: one of you guys needs to provide me with a Snack example that reproduces the issue, otherwise there is no way for me to help you.

[jrounsav]

Hey all,

I was seeing this myself and it appears to have been in response to the way that I was allowing my home screen elements to be customizable.

Long story short I just had to remove this from my carousel in order to diagnose the root of my issue: useScrollView={true}

After removing that prop the error disappeared and I realized that a wrapper component rendering a list of components(one being a section with the carousel) was conditionally returning null in it's render function rather than render the remaining carousel.

After removing the "return null" everything worked properly and I restored "useScrollView={true}" to my carousel without issue.

Hope this helps someone

[bd-arc]

Hey @jrounsav,

Thanks for sharing your findings ;-)

Still, regarding the issue, I'm going to implement the getNode() method in order to have something more bulletproof. Hopefully, this will solve the issue for everyone.

[delvedor]

Hi @bd-arc, same issue here.
My code is very simple:

<Carousel
  loop
  autoplay
  layout={'tinder'}
  layoutCardOffset={10}
  data={[1, 2, 3]}
  renderItem={this.renderHeaderImage.bind(this)}
  sliderWidth={windowWidth}
  itemWidth={windowWidth - 100}
/>

There are no conditionals operators, nor return null and the item is just an Image wrapped by a View.

I'm using react-native-snap-carousel version 3.6.0 and react native version 0.53.3.
I've noticed that the problem appears only if the js debugger is not active.

[bd-arc]

Hey guys,

I've refactored a few things in version 3.7.0. Can you try and let me know if you still experience the issue?

[rafaelpizzaia]

I was facing this issue on version 3.5. After upgrade to version 3.7.0, looks like the issue is solved.

[bd-arc]

@rafaelpizzaia Thanks for letting me know ;-)