Your code in autoplay function:

if (!this.props.autoplay || this.state.isScrolling || this.state.autoplayEnd) {
  return;
}

should be:

if (!Array.isArray(this.props.children) || !this.props.autoplay || this.state.isScrolling || this.state.autoplayEnd) {
  return;
}

or the child view will fly away.

#27
this issue . i don't kown how to fix it.
My react-native version 0.8.0 .
Used you Swiper , throws exception.

Hey, I think that given the loop attribute is true by default, the docs should say

Set to false to disable continuous loop mode.

instead of

Set to true to enable continuous loop mode.

:)

Hello.

When swiping between a few WebViews, the non focused webview scrolls up to top and flicks back to the last scroll positions shortly after the slide gets in position.
This happens about 50% of the time. And only if I swipe between more than two WebView slides.
(Have only tried this in iOS Simulator)

I use swiper and inside embedded a ListView, when I first upwards sliding ListView, no problem, but before the end of the sliding effect no I loosen the fingers, sliding again, ListView can't slide, can only wait for it to stop, to continue to slide, not straight, I do not have this problem using a ListView alone, how to solve?

When using single app state and keeping currentSlideItem in a store, every time we update them, the componentWillReceiveProps re-renders the whole slider resetting the index. It makes sliding impossible. I believe there should be one extra check to ensure the children are different and reset only if that happens. Maybe shallowEqual on the array + support for Immutable list can do the trick?

Like this indicator's animation

On android swiping does not snap to the edges of each slide. It simple stops where the swipe ends.

Does anyone know how to solve this problem ?

I get the following error when running npm install react-native-swiper --save:

$ npm install react-native-swiper --save
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/nvm/versions/node/v0.12.2/bin/npm" "install" "react-native-swiper" "--save" "--production"
npm ERR! node v0.12.2
npm ERR! npm  v2.8.3
npm ERR! path /Users/jwaples/Repositories/Lemmeno/LemmenoNative/node_modules/react-native-swiper/bin/babel
npm ERR! code ENOENT
npm ERR! errno -2

npm ERR! enoent ENOENT, chmod '/Users/jwaples/Repositories/Lemmeno/LemmenoNative/node_modules/react-native-swiper/bin/babel'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/jwaples/Repositories/Lemmeno/LemmenoNative/npm-debug.log

This occurs both with Node 0.12.2 and Node 0.10.36, with or without the --production flag to NPM.

Please correct me if I'm wrong, but it appears that a recent commit has made the swiper non-functional. The npm module is dated '5 months ago', but there are a number of commits past that on the master github branch. My slides just stack vertically instead of being swipeable. Is it possible or reasonable to move recent commits to a branch and sync the master branch with what's on npm?

Hello,

I get the following warning in the packager:

Unable to resolve module Dimensions from .... dist.js

Any idea how to fix that? Everything is working correctly, just the message in the packager.

Regards

ScrollResponders are documented in the readme, but onMomentumScrollEnd along with the other responders throw invalid property errors when added to a Swiper.

Great module! Any pointers on how to get it working when changing the device orientation to landscape?

Great component! It would be good to have X/Y (X current page / Y total pages) customizable label string instead of dots for big lists.

When I require swiper in my index.ios.js,the project occupy run failed.but when i download the examples and run it. it success I'm confuse about this,whether I should require other modules? It's very thankful if you can response me and help me clear what happen.
ar Swiper = require('react-native-swiper')
// es6
// import Swiper from 'react-native-swiper'

var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;

var styles = StyleSheet.create({
wrapper: {
},
slide1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB',
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5',
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9',
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
}
})

var swiper = React.createClass({
render: function() {
return (


Hello Swiper


Beautiful


And simple


)
}
})

AppRegistry.registerComponent('ProjectName, () => swiper)

The swiper is working great for us when we create slides that contain static stuff:

i.e.
< swiper >
< view >stuff< /view >
< view >stuff< /view >
< view >stuff< /view >
< /swiper >

However, when we loop in dynamic content for the list of interior views like so:

< swiper >
{ slideLoop }
< /swiper >

all of the views render vertically stacked within the first 'slide', instead of each displaying as a slide as you'd expect. Has anyone experienced issues like this?

Thanks

Hi,

I'm currently facing the issue that I try to update the height of the swiper dynamically when the status bar height changes e.g. due to tethering etc. However, I dont really know how to give the new height to the swiper element as it seems to set the props in the getInitialState

Any idea?

Regards
Philipp

Is it possible to use this component to display parts of the previous and next slides in the carousel, without changing the source? I.e. have the current page in the center and show a couple of pixels of the previous slide to the left and couple of pixels of the next slide to the right?

I noticed that the code that generates the dots is looping without a key prop on the component which leads to this warning, no biggie just thought I would share.

"Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of index. It was passed a child from SignDetail. See http://fb.me/react-warning-keys for more information."

Hello.

I've bound onMomentumScrollEnd and there I'm console logging the ref to my Swiper.
The state.index is always set to 0.

Is that a bug or is there another way to find out which node is viewed?

I'd like the Swiper to take up the full size of its parent View element. Approaches:

1. If I don't specify width and height attributes, the Swiper element extends outside the parent container to full-screen (gets size from device properties?).
2. Styling the container doesn't appear to have any effect.
3. If I hard-code width and height attributes it will sit inside the container, but I don't want to hard-code these numbers.

If the container is indeed flex:1, I'd expect it to expand to the parent container size rather than the full screen dimensions. Is there a way to achieve this?

Is there a way to add pages, like adding rows to a list view?

When I try to do this naively by rendering a new child view in the Swiper the new views all show up on the last page instead of creating new pages.

It appears react-timer-mixin isn't being included as a dependency and required above.

Hi,

I would like to use your component in an Android app, is it possible?

Thank you for your hard work.

J

I am planning to use this module for a project and would like to know if this works on Android. All the components used in this repo does not have 'IOS' suffix to it, so I believe it should be fine. :)

I have a slider that swipes through about 100 1/2-page images. It looks great, and works great on the simuator. However, when I run it live it runs for a few seconds, and then crashes with the below error in XCode:

Terminated due to memory error
And in the Output on XCode: Received memory warning.

On my end, I'm building out the jsx dynamically (I loop over my list of items and make jsx for each using items.map).

I'm not sure why it's causing it to crash. Has anyone else seen this?

My content disappears when I swipe vertical.

Hello,

first of all: thanks a lot for this nice swiper! I'm currently using it for about 20 pages, each of the pages being quite big. Is there any way to optimize the rendering (e.g. render only some pages next to the currently active page), as the initial loading is taking about 3 seconds in my case at the moment.

Regards
Philipp

Hi
I cannot set the initial index. It always shows the first page. What is wrong?

Thank you
Bernd

In this example I expect the page at index 3 to be the visible at startup, but it is not :(

    render() {
        return (
            <Swiper showsButtons={false} index={3}>
                {this.props.route.approvalIds.map(function (approvalId, pageIndex) {
                    return (
                        <View style={{flex: 1}} key={pageIndex}>
                            <Approval approvalId={approvalId} pageIndex={pageIndex} pageCount={this.props.route.approvalIds.length} />
                        </View>
                    );
                }.bind(this))}
            </Swiper>
        );
    }

I just tried your example and I get this error in the console.

"Warning: Failed propType: Invariant Violation: index: prop type renderPagination is invalid; it must be a function, usually from React.PropTypes. "

I'm following your "Basic usage" in the readme.md so I'm not passing anything to renderPagination. I wonder if it's in your lib code?

I'm loading remote data and then setup my views, but when I generate them dynamically it stacks them on a single screen. It looks like its grabbing the children in getInitialState() and they aren't available yet. When render() runs the children are there, but the total is set to 1.

Otherwise warning is displayed.

Warning: Each child in an array or iterator should have a unique "key" prop

Hello,

I'd like to allow the parent component of the slider to update the current index of the pager and have it animate to that page. Right now it doesn't seem to do that.

I've tried to tweak the code a bit in order to do this using the componentWillReceiveProps lifecycle method, but I can't seem to get it to work.

Anyway, if you could add this, that would be great.

Thanks.

It've been trying to test out modifying the index property using states, however, it doesnt seem to work. It would be great to be able to go to the left / right pages programmatically in addition to the current swipe left/ right funcionality

There should be away to execute code based on if you are currently on a certain slider. This could be a prop called onView or something that receives a callback function.

Use case:
There are multiple slides in the swiper. On the last slide, you can auto-focus on a text field at the same time onMomentumScrollEnd is called

Using this.setState inside onMomentumScrollEnd scroll back to the first slide.

Any idea on why this happens?

Cheers

I was poking around to see whether this Swiper supports "snapping" to the slides (i.e. not stopping in the middle of two slides). Didn't look like it does - am I missing something?

I'm using a Swiper to wrap a couple of WebViews.
But each time I swipe, the WebView reloads (and scrolls to the top).

Hi,

I looked into your code to use it with tabs, the scrollTo(index) method was great but is bugged. You should get rid of the this.state.index which has nothing to do here. This took me so much time to find the problem so I share it !

Great plugin, thank you. Just a heads up - It no longer works in React Native 0.8.0-rc. The error is

dist/index.js

Requiring unknown module "react-timer-mixin".

Title says it all really. If I have a swiper that has 4 slides and on the first slide I have button that call scrollTo(index) they all work but it I then swipe back to the start and try to swipe one extra slide before the start then scrollTo(index) stops working. Manually swiping to the second slide and back again corrects the issue.

Is there a way to navigate to the next page when the user is still scrolling left or right but there's nothing more to scroll inside a webview ?

Thanks

This error appears on swipe:

Also tried using https://github.com/manandmoon/react-native-swiper but same error appears.

That causes an error-'Duplicate data property in object literal not allowed in strict mode'.

Hello,

How can i add custom previous and next buttons? with images
<Image source={require('image!choiceNext')}/>

Greetings