Incorrect Placement of frames when frame array changes size post mount
lluisrojass opened this issue · 8 comments
Changing the frame array's size post componentDidMount's execution the frames get placed incorrectly. If you increase the number of frames, the newly introduced frames get placed behind the frame currently at the center of the carousel, while lowering the number of frames might result in a blank carousel.
I've made a custom repo demo-ing this bug here.
Created a PR to fix this bug #117.
@lluisrojass Thanks for raising this issue, I'll review the PR soon :)
@amio no problem, our project depends on this fix so please let me know about your findings.
Hi @lluisrojass , I left comment in #117 just now, sorry for the delay!
@amio will address in several hours. thank you :)
@amio I have updated the PR to function with both getDerivedStateFromProps (removing deprecated hook componentWillReceiveProps) and componentDidUpdate. I split to approach into the two hooks because we need access to the instance to refer to the frame refs in order to correctly position them, not possible in getDerived. This approach also limits the number of renders to only one. Doing this all in DidUpdate is just as trivial, but we would need one render to get new refs, then enter DidUpdate which would need to setState and cause an additional unnecessary second render.
@amio new commit addressing feedback is posted, also happy holidays!
@lluisrojass Thanks!