how to make the carousel auto-scroll programmatically
See original GitHub issueI’m trying to programmatically cause the carousel to auto-scroll. I have the carousel operating vertically so someone can fill out a form and as they fill out the form, it auto-scrolls. I basically do this by setting a state variable called isAutoPlay. Below is the sample code. If isAutoPlay is true it keeps auto-scrolling the carousel indefinitely until I set it to false. I currently have a javascript timer to turn it off after a second but the timing isn’t perfect so sometimes it may scroll past a few questions before it stops. I am wondering if there is a better way to trigger the autoscroll so perhaps it just scrolls to the next slide instead of indefinitely.
<Carousel width={deviceWidth} height={200} style={{height:'100%'}} data={this.allQuestions} vertical={true} loop={true} autoPlay={this.state.isAutoPlay} renderItem={({ item }) => ( <View>{item}</View> )} />
Issue Analytics
- State:
- Created a year ago
- Comments:9 (3 by maintainers)
Top GitHub Comments
Thank you very much ! You rock!! That fix worked 😃 We will try it out and let you know after testing how it’s working.
But from what I can see when I just put <Carousel key={this.state.allQuestionsTotal} data={this.allQuestions} ref={this.ref} />
I do createRef() in the constructor and after my async method runs to populate the data for my carousel the this.ref.current?.next() works now.
I think I figured out my issue. It appears that the ref=createRef() does work with the class (tried with a simplified test class) but the root cause of my issue is that I’m loading my carousel with dynamic data from asyncstorage. The data load correctly and the carousel works great but I cannot use the ref at all.
It appears that when I do this.ref=createRef from anywhere (constructor, render(), etc) it keeps showing undefined when I do ref.current?.getCurrentIndex(). I wonder if there is a way to have ref=createRef() give the updated ref somehow after the promise for asyncstorage is done. Otherwise, it appears I have to load all the data before I enter the screen with the carousel to avoid having the promise method (getting data from asyncstorage) mess up my ref.