Is there a way to add dots navigation:

If autoplay is set to true, the carousel jumps from the last slide to the first one whereas it would be better to provide an infinite loop.

Hello i just want to install this plugin but i receive this error...

how can i fix this?

This is the BEST ever carousel for React Native I've ever seen or used till date. Looks amazing and a lot promising.

How about exposing a way to customize each card in the carousal. We can have say many layouts predefined and the developer can use the layout that suits his/her requirement.

I can send a PR soon once I get more hands on.

I was trying to use this library on my project, and for some reason whenever I scroll, the list auto jumps to the first Item.
Have any idea what am I doing wrong?

Hi,

First off, thanks for this package. It's amazing 🖖.

I was wondering something, is there a special reason why
{ paddingHorizontal: containerSideMargin } is added to contentContainerStyle as an own object in an array, instead of doing something like this

 const contentContainerStyle = {
            ....Stylesheet.flatten(contentContainerCustomStyle || {})
            { paddingHorizontal: containerSideMargin }
        }
// if flatten is to costly, one could change the contentContainerCustomStyle prop from a style to an object

The reason I am asking is because I would like to overwrite the paddingHorizontal property

Is this something you guys would accept an PR for?

src: https://github.com/archriss/react-native-snap-carousel/blob/master/index.js#L505

I've created a barebones react-native [email protected] project and copied the carousel:

<View style={styles.container}>
        <Carousel ref={'carousel'} sliderWidth={200} itemWidth={100}>
          <Text>aaa</Text>
        </Carousel>
      </View>

And getting this error:

hi~do you have any plan to support loop mode?

when trying to change to the new version all I get is an error on some length as follows:

Cannot read property 'length' of undefined
handleException @ ExceptionsManager.js:63
handleError @ InitializeCore.js:114
reportFatalError @ error-guard.js:44
guard @ MessageQueue.js:48
callFunctionReturnFlushedQueue @ MessageQueue.js:107
(anonymous) @ debuggerWorker.js:71
ExceptionsManager.js:71 Unhandled JS Exception: Cannot read property 'length' of undefined

Hi,
does this component render all items at once or only visible items are rendered?
does it support removeClippedSubviews prop of ScrollView?

I have run an example using code from your source. It work fine on iOS but totally stuck on Android.
I cannot swipe or move any item like the list is stuck.
Tried on both emulator and real device but it still not working.
Using react v0.44.0

Hello,

First of all: nice component, thank you for sharing.

My expected behaviour would be to have items being ListView components.

I copy/pasted you example which works perfectly.
However, If I put a simple ListView instead of the Images for example: nothing renders at all... Not even an error... So I am a bit confused.
This would be what I am trying to achieve:

_renderItem(data, index){
    return (
        <View style={{height: slideHeight}}>
            <View style={{flex:1, backgroundColor:'gray', borderTopLeftRadius:entryBorderRadius, borderTopRightRadius:entryBorderRadius}}>
                <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text style={{margin:20, fontSize:30, fontWeight:'bold'}}>{rowData}</Text>}/>  // Nothing renders with this component
            </View>
            <View style={{ justifyContent:'center', paddingVertical:20, paddingHorizontal:16, backgroundColor:'white', borderBottomLeftRadius:entryBorderRadius, borderBottomRightRadius:entryBorderRadius }}>
                <Text style={{ color:'#1a1917', fontSize:13, fontWeight:'bold', letterSpacing: 0.5 }} numberOfLines={2}> { data.toUpperCase() } </Text>
            </View>
        </View>
    );
  }

  render(){
    return (
                    <ScrollView style={{flex:100, paddingTop:10}}>
                      <Carousel
                        items={this.state.numberOfLists}
                        firstItem={0}
                        inactiveSlideScale={1}
                        inactiveSlideOpacity={1}
                        enableMomentum={false}
                        swipeThreshold={sliderWidth/6}
                        renderItem={this._renderItem}
                        sliderWidth={sliderWidth}
                        itemWidth={itemWidth}
                        slideStyle={{flexDirection:'column', width:itemWidth, paddingHorizontal:itemHorizontalMargin}}
                        containerCustomStyle={{marginBottom: 0}}
                        contentContainerCustomStyle={{}}
                        showsHorizontalScrollIndicator={false}
                        snapOnAndroid={true}
                        removeClippedSubviews={false}
                      />
                    </ScrollView>
    )

NOTES:
this.state.numberOfLists = ["1","2","3"]
this.state.dataSource = ds.cloneWithRows(['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'])

Would you have any ideas/suggestions on why is this happening??

Merci

When you scroll to fast on Android, the snap item is very bad, an is not like in you show case app.

<Carousel
			ref={(carousel) => { this._carousel = carousel; }}
			sliderWidth={sliderWidth}
			itemWidth={itemWidth}
			firstItem={currentIndex}
			inactiveSlideScale={0.9}
			inactiveSlideOpacity={1}
			enableMomentum={false}
			showsHorizontalScrollIndicator={false}
			snapOnAndroid={true}
			enableSnap={true}
			containerCustomStyle={containerCustomStyle}
			contentContainerCustomStyle={contentContainerCustomStyle}
			onSnapToItem={(index) => {
				this.setState({
					currentIndex : index
				});
			}}
			>
                         {this._renderItems()}
                       </Carousel>

any fix about this?

Hi,

Can you please share what animationFunc & animationOptions do you use in the Archriss' showcase app? The feeling of the swipe in the example app and in the Archriss' showcase app drastically differ...

I want to apply css to acive item and for that I am not getting particular active item

I want to apply custom css "onSnapToItem" for this I am using this.setState({paddingTop: 20}) , I can see this css code when I print "this", but it wont get render, is there anything that I need to do, so that above changes will get reflect on selected item.

The slider shift when item is clicked.

Here's my code:

const SLIDER_WIDTH = Dimensions.get('window').width;
const SLIDE_ITEM_MARGIN = 35;
const SLIDE_ITEM_WIDTH = SLIDER_WIDTH - (SLIDE_ITEM_MARGIN * 2);

      <Carousel
        sliderWidth={SLIDER_WIDTH}
        itemWidth={SLIDE_ITEM_WIDTH}
        style={{ paddingHorizontal: 0 }}
      >
        {this.renderMedicationCards(this.props.medications)}
      </Carousel>

This does not happen when I set my SLIDE_ITEM_MARGIN to 0, which is setting SLIDE_ITEM_WIDTH = SLIDER_WIDTH = Dimensions.get('window').width

Using the option snapOnAndroid currently results in very bad experience where carousel snaps on the item where the drag was released. By using onMomentumScrollEnd instead of onScrollEndDrag here https://github.com/archriss/react-native-snap-carousel/blob/master/index.js#L404 the experience is made much smoother.

Example with onScrollEndDrag: https://gfycat.com/SmallCaringAfricanharrierhawk
Example with onMomentumScrollEnd: https://gfycat.com/PhysicalFearlessBarracuda

Thanks for very nice plugin. I am newbie at React Native. I could not handle on press to child item. Is it something that I could figure out or possible issue to be fixed?

   _renderItem (content, index) {
        return (
          <View key={"tours"+index}>
            <TouchableOpacity onPress={this.handlePressSend}>
              <Image source={{uri: 'https://res.cloudinary.com/dhtfjpv7o/image/upload/c_fill,e_art:primavera,g_auto,h_300,w_400/v1479733803/jpfj4ilkpmst3kz697z8.jpg'}} style={styles.tourImage} />
            </TouchableOpacity>
          </View>
        );
    }

On press method;

handlePressSend = () => {
    console.log('pressed')
  }

It will be useful if there is a function prop for observing the scroll events like onScrollToPage / onScrollToItem. e.g.

<Carousel
    ref={'carousel'}
    onScrollToPage={(page) => {
        console.log(page);
    }}
    items={this.state.entries}
    renderItem={this._renderItem}
    sliderWidth={sliderWidth}
    itemWidth={itemWidth}
    slideStyle={styles.slide} />

The idea is to add control over the position of the active slide in the viewport. See:

• React doc
• Video example

Implementation ideas:

• Arch Studio, by Kévin Gautier
• Swipe cards interaction, by Valentin Salmon

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>

I've got these errors:

npm WARN [email protected] requires a peer of react@^15.5.0 but none was installed.
npm WARN [email protected] requires a peer of react@^15.4.2 but none was installed.

I need to get which item is showing or brought to front now . Is it possible through current index? There is no sample provided. Can you help on it ?

Hello,

I am having a problem here, current carousel height is stretched. If i inspect there is a view that having flex:1. I have tried to set containerCustomStyle, contentContainerCustomStyle, slideStyle flex to 0 but the carousel still stretching the height.

<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
  <View>
    <Carousel
      sliderWidth={width}
      itemWidth={width-70}
      showsHorizontalScrollIndicator={false}

      containerCustomStyle={{flex:0}}
      contentContainerCustomStyle={{flex:0,alignItems:'flex-start'}}
      slideStyle={{flex:0}}
      onSnapToItem={this.activeSlide}>

      {items}
    </Carousel>
  </View>
</View>

Would be great to get more clarification around the itemWidth and sliderWidth - especially relating to the examples where calculations are made with inclusions of slideWidth, slideHeight and itemHorizontalMargin

Current momentum implementation doesn't always feel right, particularly on Android. The best way to enhance it and to unify interactions between Android and iOS seems to implement a PanResponder.

Here are some implementations that could serve as a starting point:

• react-native-deck-swiper: swipe implementation
• react-native-carousel-pager: PanResponder implementation
• react-native-swipeable-parallax-carousel: PanResponder implementation
• react-native-scrollable-tab-view: momentum and scroll implementation
• react-native-pan-controller: momentum and snap implementation
• react-native-tinder-swipe-cards: PanResponder implementation
• react-native-viewpager: infinite scrolling implementation
• react-native-page-swiper

Custom interaction ideas:

• Airbnb gif, biubiubiu freestyle, by JEE_lion
• Card Interactive Demo by Chris Yang for New Beee

Env:
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-native-snap-carousel": "^2.1.2"

Problem:
onScroll does not get invoked whilst scrolling

 <Carousel
    ref={(carousel) => { this._carousel = carousel }}
    sliderWidth={width}
    inactiveSlideScale={1}
    inactiveSlideOpacity={1}
    enableMomentum={false}
    itemWidth={width}
    onSnapToItem={::this._imageIndex}
    onScroll={() => { console.log('onScroll!') }}>
       {imageArray}
  </Carousel>

The example from google play doesn't work on LG G2

activeItem in _onScroll is undefined when I remove one item:
In this part after to remove a scrolled item, this.state.interpolators[activeItem] is undefined.

Animated[animationFunc](
              this.state.interpolators[activeItem],
              { ...animationOptions, toValue: 0 }
          ).start();

Hey,
I'm having an issue with setting firstItem. Most of the time, the wrong item is selected. We are using a function which returns the children, so we got something like this:

<Carousel
                    ref={'covers'}
                    sliderWidth={viewportWidth}
                    itemWidth={240}
                    inactiveSlideScale={0.9}
                    inactiveSlideOpacity={0.6}
                    showsHorizontalScrollIndicator={false}
                    snapOnAndroid={true}
                    removeClippedSubviews={false}
                    onSnapToItem={this.onSnap}
                    firstItem={8}
                >
                    {this.getCovers()}
</Carousel>

In our case, the 8th item wasn't selected when the component mounts. If we do something like this:

componentDidMount() {
    setTimeout(() => { this.refs.covers.snapToItem(8,false); },500);
}

...the correct item is selected. Are there any issues when generating the childrens via function?

I have TouchableOpacity child Items within the Carousel component - where the onPress on the TouchableOpacity items work fine.

However, when tapping/clicking on the last item, it will cause the carousel to snap back to the second last item.

Has anyone else experienced the same issue?

// Example
render() {
  const slides = this.props.items.map((entry, index) => {
    return (
      <TouchableOpacity
        onPress={() => { this.props.onPress() }}
        key={`entry-${index}`}
        >
          <View>
            <Image
              style={styles.imageContainer}
              source={entry.illustration}
              />
          </View>
        </TouchableOpacity>
      );
  });

  return(
    <Carousel
      {...this.props}
      ref={(carousel) => { this._carousel = carousel; }}
      showsHorizontalScrollIndicator={false}
      snapOnAndroid={true}
      removeClippedSubviews={false}
      sliderWidth={sliderWidth}
      itemWidth={itemWidth}
      slideStyle = {0}
      onSnapToItem = {(index) => { this.props.onSnapToItem() }}
      >
       { slides }
    </Carousel>
  )
}

Not sure why but only seems to be happening on IOS. Works fine when swiping left but when change direction, the first swipe, will pull down the view revealing the main container. Could this be incompatibility with being nested inside a tab bar view?

Using the example project, I have enabled landscape mode, and when I rotate the device, the selected item is not centered anymore.
How can I fix this behavior?

Hi,

When I use dynamic data I have an error undefined is not an object (evaluating 'this._positions[index].start') but when I use static data everything seem to work.

What I'm doing wrong ?

Thanks.

Dumb question but... How can I programaticaly jump to a given Item respecting animation ?
I see the documentation exposes a snapToItem() method but... do you have some example of using it please?

hi,the first preview demo App,where i can see.

By logging out my slides (medicationCards) I am sure that new slide is added to the children of Carousel every time I click ADD.

render() {
    const medicationCards = this.renderMedicationCards(this.props.medications);
    console.log('medicationCards = ', medicationCards);
    return (
      <Carousel
        sliderWidth={SLIDER_WIDTH}
        itemWidth={SLIDE_ITEM_WIDTH}
        slides={medicationCards}
      >
        {medicationCards}
      </Carousel>
    );
  }

However, it is not rendered for the first time.
Based on my loggings, the actual rendered slides fall 1 cycle before slides children updates, e.g. when console.log('medicationCards = ', medicationCards); prints 3 items, 2 are rendered; when it prints 4 items, 3 are rendered.

I've noticed that when there is a change to the items prop, if the length of the upcoming items prop is larger than the current items prop, there will be issues with the interpolators.

Assuming if this.state.myItems currently has 2 items like so:

//default state:
this.state = {myItems: [<View/>, <View/>]};
<Carousel items={this.state.myItems} ... />

No issue when it was initialised at start.
However, when there is change to myItems state at a later time to have more elements, for eg:
this.setState = {myItems: [<View/>, <View/>, <View/>]};

The length of interpolators remained as 2. This will cause an undefined error because the third element in the new myItems cannot access an interpolator for its animation.

For my case, I'm using it with redux and so my state was something like this.props.myItems which came from one of my reducers. But I'm assuming that the same thing will occur with the regular this.state. Also, I'm running it on Android at the moment.

Would love to see the example with the maps view (3rd gif) as well.

Currently, React Native doesn't provide a callback for the scrollTo() method, which is a bummer.

The ScrollView component has a prop onScrollAnimationEnd, but unfortunately this works on iOS only (even though it is referenced in the Java file). Moreover, a bug currently prevents the callback from being fired with horizontal scrollers.

Another lead would be to link the duration of the scroll animation to a timer before firing the callback. Unfortunately, scrollTo() doesn't accept a custom duration.

An idea might be to activate momentum events on Android and see if onMomentumScrollEnd can provide a good enough feedback without impairing performance too much. But this event might not be fired when snapping programatically... Moreover, it is automatically enabled if a momentum callback has been set.

ScrollResponder is another lead worth pursuing...

How to hide the underline of carousel?

Hi! Thanks for this awesome library!
Can I build something like this with it?

Hi, the component looks interesting.

Any example to better show how widths should be calculated ?

Solution:
Add scrollEnabled to props

i mean, should it be stylesheet?

Hello,

I'm trying to implement it in vertical, and I want it to know if you have any evolutions on this subject ?

Thanks for this great library !

I am having a situation where I want to use the carousel to act like an option picker, the user will swipe to choose a certain option. so I am having a slide width of 80 and the width of the slider is the same as the device width. It's working pretty well on android however it's acting very weird on iOS. it may not be clear here but it's even choppier on an actual device.

Android

iOS

I get this error when I run my tests with jest and it tries to import react-native-snap-carousel :
TypeError: Cannot read property 'style' of undefined at Object.<anonymous> (node_modules/react-native-snap-carousel/index.js:472:842)