React-native-snap-carousel: Horizontal with items starting on the left

[stueynet]

I have been going crazy trying to adjust the slider so that the items start on the left side of the container. No mater what I try the items start centred. Here is a screenshot:

http://d.pr/i/F5lWoV

Here are the styles:

import { Dimensions } from 'react-native';

const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');

function wp(percentage) {
    const value = (percentage * viewportWidth) / 100;
    return Math.round(value);
}

const slideHeight = viewportHeight * 0.4;
const slideWidth = wp(36);
const itemHorizontalMargin = wp(2);

export const sliderWidth = viewportWidth;
export const itemWidth = slideWidth + itemHorizontalMargin * 2;

export default {
    container: {
        flex: 3,
        paddingLeft: 0,
        paddingBottom: 20,
    },
    slide: {
        flex: 1,
        height: slideHeight,
        width: itemWidth,
        justifyContent: 'center',
        paddingHorizontal: itemHorizontalMargin,
    },
    title: {
        fontSize: 13,
        marginBottom: 10,
        marginLeft: 15,
    },
    slideText: {
        color: 'white',
        fontSize: 13,
        alignSelf: 'center',
    },
};

I have tried aligning the items with containerCustomStyle and contentContainerCustomStyle but also no luck there.

Would really appreciate any guidance on this.

[bd-arc]

Hi @stueynet,

I think you'll be very pleased to know that the flatlist branch contains just what you need (check prop activeSlideAlignment).

Note that the updated example also features a left-aligned slider, as you can see below.

[stueynet]

Thanks so much! When were you thinking of merging?

[bd-arc]

My idea is to implement a proper loop mode before merging the branch, but if it takes me too long to figure out how I might decide on merging pretty soon.

Anyway, you can start using it already by referencing branch's latest commit:

"react-native-snap-carousel": "https://github.com/archriss/react-native-snap-carousel#fbdb671"

Don't forget to check the updated documentation as well as the migration guide.

[stueynet]

Ah that's easy I'll try that. Thanks again!

On Aug 4, 2017, at 3:59 AM, Benoît Delmaire [e-mail] wrote:

My idea is to implement a proper loop mode before merging the branch, but if it takes me too long to figure out how I might decide on merging pretty soon.

Anyway, you can start using it already by referencing branch's latest commit:

"react-native-snap-carousel": "https://github.com/archriss/react-native-snap-carousel#fbdb671"
Don't forget to check the updated documentation as well as the migration guide.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[hjhimanshu01]

@stueynet , @bd-arc can you please help out here, having the same issue and links aren't working to the guides

[Naturalclar]

@hjhimanshu01 carousel component contains the activeSlideAlignment property.
Try to set that to left and you might get what you want :)

<Carousel activeSlideAlignment='left' ... />

[hjhimanshu01]

@Naturalclar , displays invalid prop type error, probably a bug?

[gugods]