How can I align slides to the center?

[waron97]

I've moved to this package from https://github.com/meliorence/react-native-snap-carousel for a specific reason, which is to re-create their default layout, with the active slide being centered and the two on each side a bit visible. Parallax is NOT what I'm looking for - I need the slides on the side to not scale down when they are not active. The old package allowed to set this scaling, but I cannot replicate this here. The "left-align" demo is very similar to my goal, but I also need the slide on the left to be visible, not just the one on the right. Can I achieve this somehow?

[mjvestal]

I too would love to know how to achieve this layout. My product requirements dictate a center aligned item with partial cards on each side.

[bryanprimus]

i'm looking for this too

[alextbogdanov]

I was trying to figure it out too!

[alextbogdanov]

After playing around with it for a bit I was able to come up with a solution. It works pretty great with the only downside being that it adds a bit of margin at the start of the first card and on the end of the last card. It's a small price to pay though.
What I did:

• Styled the carousel with "justifyContent: 'center'"
• defaultIndex={1} because I have only 3 cards and that's the middle one
• overscrollEnabled={true} it's what adds the margin but it doesn't work properly without it

Here is my code:

and here is what it looks like:

[alextbogdanov]

<Carousel data={plans} width={(Dimensions.get('window').width / 1.6 )} style={{ width: '100%', justifyContent: 'center' }} defaultIndex={1} snapEnabled={true} loop={false} overscrollEnabled={true} renderItem={({ item, index }) => ( <PlanCard plan={item} index={index} /> )} />