Horizontal with items starting on the left

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.

[gugods]

<Carousel activeSlideAlignment=‘start’ … />

[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.