React-native-snap-carousel: this._getCustomDataLength is not a function.

Created on 23 May 2019 · 5Comments · Source: meliorence/react-native-snap-carousel

caused by calling e.g. setTimeout(this._carousel.snapToNext, 2000); in componentDidMount

Is this a bug report, a feature request, or a question?

bug report

Have you followed the required steps before opening a bug report?

(Check the step you've followed - put an x character between the square brackets ([]).)

[x] I have read the guidelines regarding bug report.
[x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
[x] I have searched for existing issues and made sure that the problem hasn't already been reported.
[x] I am using the latest plugin version.
x[] I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn't a React Native bug?

nope

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

both platforms

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

don't know

Environment

"react": "16.6.3",
"react-native": "0.58.6",
"react-native-snap-carousel": "^3.7.5",

Expected Behavior

should go from first to second element after loading page.

Actual Behavior

throws cryptic error message

(Write what happened. Add screencasts/screenshots!)

Reproducible Demo

https://snack.expo.io/BJsh_LE6V

Steps to Reproduce

wait 2000ms
observe error message
remove lines 100-102
repeat and notice different outcome

The reason I am doing this in the first place is because of problem where items are not rendered until the first swipe/scroll. Wasn't able to reproduce it. We use mobx, so data gets an ObservableArray, which still works as an array. However it results in a warning about data being and object instead of an array. But as I can't open an issue without reproducing, I am attaching this here.

Source

schumannd

Most helpful comment

note sure if you're still looking for the solution but I just had this issue and solved it.

the snapTo function is getting assigned to the press before the ref is established, I'm using a functional component with the useRef hook along with encapsulating all my onPress with arrow functions just to avoid binding issues

conts Demo = props => {
const myCarousel = useRef();
return(
<View>
<Carousel ref={myCarousel}/>
<Button title="next" opPress={() => myCarousel.current.snapToNext()}/>
</View>
)
}

ali-io on 2 Apr 2020

👍2

All 5 comments

Workaround that I'm using is to wrap snapToNext in a function to defer its execution. Looking for a better solution myself.

rajjeet on 18 Sep 2019

👀1

@rajjeet can you post your workaround here?

schumannd on 18 Sep 2019

try this._carousel.snapToNext.bind(this._carousel)

My issue is a bit different from yours, but the root cause was that I was not binding the carousel reference to the function. The function snapToNext needs to use the this object (this._getCustomDataLength)

rajjeet on 18 Sep 2019

note sure if you're still looking for the solution but I just had this issue and solved it.

conts Demo = props => {
const myCarousel = useRef();
return(
<View>
<Carousel ref={myCarousel}/>
<Button title="next" opPress={() => myCarousel.current.snapToNext()}/>
</View>
)
}

ali-io on 2 Apr 2020

👍2

@ali-io Thanks! I was using useRef() with a functional component. What I was missing was encapsulating the onPress call in an arrow function. Once I did that, I stopped getting this error