Text is on top of each other if no background color is set on page

[RichardLindhout]

Example without background color results first render with things on top of each other. If you do some gesture on it it fixes itself. If you have white background the bug is not visible anymore.

[computerjazz]

What version are you using? There was a fix for this in 0.0.12. Also, what version of reanimated?

[wbercx]

So using 0.0.12 and Reanimated 2.2.3, I do briefly see overlapping pages on the initial render. Giving the pages a background color makes it so that it briefly shows page 1 before correcting to page 0, which is still a bit jarring.

Below is admittedly an absolute hackjob, but works because focusAnim currently shortcircuits to 99999 when there is no pageWidth. This gives page 0 priority and makes the others initially invisible.

    const animStyle = useAnimatedStyle(() => {
-      // Short circuit page interpolation to prevent buggy initial values due to possible race condition:
-      // https://github.com/software-mansion/react-native-reanimated/issues/2571
-     if (!pageWidth.value) return {};
      return pageInterpolatorRef.current({
        focusAnim,
        pageAnim,
-       pageWidth,
+       pageWidth: (index !== 0 && !pageWidth.value) ? focusAnim : pageWidth,
        index,
      });
    }, [pageWidth, pageAnim, index, translation]);

[computerjazz]

your "hackjob" works great @wbercx , thanks! Released in https://github.com/computerjazz/react-native-infinite-pager/releases/tag/v0.1.0

[nicolaosm]

Why was this "hackjob" removed in newer commits and releases? The issue is happening on my end now...

[nicolaosm]

Any idea about what happened to the fix @computerjazz ? It doesn't to be there anymore and im getting this issue on slow devices. Thanks

[computerjazz]

@nicolaosm just pushed a fix, try again with latest?

[nicolaosm]

Thanks @computerjazz , will test this out and let you know.