this._getCustomDataLength is not a function.

[schumannd]

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

1. wait 2000ms
2. observe error message
3. remove lines 100-102
4. 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.

[rajjeet]

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

[schumannd]

@rajjeet can you post your workaround here?

[rajjeet]

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)

[ali-io]

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>
)
}

[williamkwao]

@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

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2