Inset Pager with overflow

[deehuey]

Hey! 2 questions tonight :)

Product requires that our "pages" be slightly visible to indicate that one can swipe to the next page. I've experimented with containerStyle and a few other things to get the next page to be peeking, but can't seem to achieve this, it seems to always cut off where i've padded / added margin, even with 'overflow': 'visible'

Desired result:

Where those 'cards' are each child. You can see that the next page is bleeding into the current. I can achieve this with a horizontal scroll view, but the pages don't "LOCK" like I want them to.

Is this possible with your library do you think?

Thanks :)

-Dan

[deehuey]

Actual result:

[n4kz]

Thanks for question, that's a really challenging task!

After some experiments I can tell that this is possible out of the box (even in example project):

1. <Pages style={{ transform: [{ scale: 0.67 }], overflow: 'visible' }}> for Pages component
2. <View style={{ transform: [{ scale: 0.9 }] }}> for page container
3. <View style={{ overflow: 'hidden' }}> for view containing Pages

Drawback: ScrollView sides are inactive (no taps or swipes), however this is a good starting point. I'll look further for more complicated and universal solution.