React-native-snap-carousel: how to simply make each 'slide' full screen ?

Created on 26 Apr 2017 · 4Comments · Source: meliorence/react-native-snap-carousel

I couldn't easily see how to just set each view on this component 'full screen', so the user can simply swipe left / right. We don't want them to see a preview of the next slide etc. The snippet below is just to try different 'width' setting attempts. flex=1, or screen's width etc. Is this actually possible or does this component require a preview of the next slide etc ?

         <Carousel 
            style={{flex: 1}} 
            sliderWidth={width}     //note: width = Dimensions.get('window') etc..
            itemWidth={width}
            containerCustomStyle={{flex: 1, width: width}}
            contentContainerCustomStyle={{flex: 1, width}}
          >
            <View
               style={{
                  flex: 1, 
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: '#B27AF8'
               }}
            >
                  <Text style={{color: '#FFFFFF'}}>I'm the TermsAndPrivacy component</Text>
            </View>
            <View
               style={{
                  flex: 1, 
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: 'green'
               }}
            >
                  <Text style={{color: '#FFFFFF'}}>I'm the TermsAndPrivacy component</Text>
            </View>
         </Carousel>

Source

ajonno

❤2 👍2

Most helpful comment

Hi, I was trying to do just the same, eventually I managed to get what I wanted with

```js
const width = Dimensions.get('window').width;

return (
sliderWidth={width}
itemWidth={width}
inactiveSlideScale={1}
slideStyle={{ width }}
>

);

piuccio on 3 May 2017

👍4

All 4 comments

@ajonno Hi there!
I must admit that the plugin wasn't created with this use case in mind. Still, you should be able to achieve what you're after. Could you try the following and let me know if this works ?

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

return (
    <Carousel 
      sliderWidth={viewportWidth}
      itemWidth={viewportWidth}
    >
        <View style={{ height: viewportHeight }} />
        <View style={{ height: viewportHeight }} />
        <View style={{ height: viewportHeight }} />
    </Carousel>
);