React-native-snap-carousel: Items appear offset by half the width of the container width, how do I align it at the start of the container?

Created on 27 Aug 2018  路  1Comment  路  Source: meliorence/react-native-snap-carousel

Is this a bug report, a feature request, or a question?

question

What I would like to have is just two entries inside the carousel that take the full width of the screen when active. I am not sure whether I am setting the width values correctly but the items (I only have two fixed ones) appear centered off by half the width of the container and I cannot scroll horizontally. As you can see here the pink is the contentContainer and the blue/red is the first entry that should be at the all the way to the left of the container. I've tried setting the padding of the contentContainer and the alignItems property to flex-start but that does not work.

https://i.imgur.com/BgzDwT5.jpg

This is my Carousel component

`

                    containerCustomStyle={{backgroundColor : 'red', flex : 1}}

                    contentContainerCustomStyle={{backgroundColor : 'pink', flex : 1}}

                    data={cases}

                    renderItem={({item}) => {
                        if(item === cases[0])
                        {
                            return (<Component1 />);
                        }
                        else
                        {
                            return (<Component2 />);
                        }
                    }}
                    sliderWidth={((width * 2) || 600)}
                    itemWidth={width || 280}
                    />`

The width variable which I am referencing is the screen's width obtained by the dimensions module.

let {height, width} = Dimensions.get('window');

Then the component1 and component2 have identical containers with the backgroundColor property and flex :1.

snap1

Most helpful comment

removed flex:1 from the containers and that fixed the not scrolling part.. Set activeSlideAlignment to 'start' for alignment

>All comments

removed flex:1 from the containers and that fixed the not scrolling part.. Set activeSlideAlignment to 'start' for alignment

Was this page helpful?
0 / 5 - 0 ratings

Related issues

KarlosQ picture KarlosQ  路  4Comments

sujitpk-perennial picture sujitpk-perennial  路  3Comments

SnowDang picture SnowDang  路  4Comments

naffiq picture naffiq  路  5Comments

akyker20 picture akyker20  路  3Comments