Hi @oliviertassinari! While I know that this is intended mostly towards mobile use-cases, I was wondering if you plan to support keyboard navigation and ARIA attributes given that it works for browsers?

Thanks!

After I upgrade to react-native to 0.25
I get this warning

npm WARN EPEERINVALID [email protected] requires a peer of react-dom@^15.0.0 || ^0.14.0 but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of react-motion@^0.4.0 but none was installed.

Thanks for this great library. Currently only styles for slides can be passed trough props.
In my case I need to change the style from root, which isn't an easy task since those styles are hard coded. I would be great if we could change all styles trough props.

This broke when upgrading from 0.5.4 to 0.6.0

It seems the culprit is here, where this.indexLatest can be undefined.

Hello, thanks for your work: I found it very useful and well done.
I am trying to reproduce in RN the following: http://i.imgur.com/Kmgat3C.png
Is there any way to put active slide on center and let other slides be shown on sides,up to container's limit?

In my use case I'd like the view to change immediately (no animation) if I change the index prop. Would it be possible ?
Thanks

https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html

Hello!

Anyone knows if it would be possible to validate if there is any native scroll before starting scrolling the swipeable views?

Ex:

PS: The example above is using react-swipeable-views without the "event.preventDefault" at handleTouchMove.

Thanks!!

I have a project with other packages and can not update react to 0.14.0.

Its posible install the package on [email protected] ?

Thanks

I have to check this.

Hello,

Adding the possibility to autoplay would be nice

Also, prev/next method.

That would make it a more complete solution

It appears that react-swipeable-views inserts a blank DOM node into the body for each of the swipeable views. However, it does not remove those nodes when the component in unmounted, resulting in a DOM node memory leak. Very quickly, the application can build up these nodes in the tree until eventually the browser crashes:

Plz help anyone?
thank you.

Hello, I am using the following code:
http://pastebin.com/KChpwLkm

Everything works flawlessly using index.native.animated, but if i switch to index.native.scroll the view is not scrolling when index is updated via code (upon button pressure).
I am using RN 0.22.2 on Android 4.1.1

...basically, because they're functions and propTypes for react-swipeable-views's children is ReactNode.

Apart of that, awesome project ;)

Hi, I encountered this error, when using babel-loader with webpack, and I found that the .babelrc did depend this plugin:

{
  "env": {
    "development": {
      "plugins": [
        "react-display-name",
        "react-transform"
      ],
      "extra": {
        "react-transform": {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }
      }
    },
    "production": {
    }
  }
}

but it seems like the "babel-plugin-react-display-name" is not specified in "dependencies".

Are they? We need to use ir for a large quantity of views.

Thanks!

Hi @oliviertassinari

I have used your awesome module for while, now I am trying to integrate with the react experimental navigation but the swipe event from the navigation blocking the react-swipeable-views, I am not sure if the preventDefault can solve this problem, any idea how can I solve this?

Here is normal behavior. I click the button, screen slides entirely to next view:

Here is problematic behavior. I tab away from the last input on the view, and it slides half-way to the next view

So one looks like a bug (the fact that the slide only gets halfway on the tab event), and the other is something I'm hoping to accomplish (preventing user from tabbing to next view altogether--limiting transition events only to the pre-defined buttons, clicks, etc.)

the structure in the code is pretty straightforward:

<SwipeableViews>
  <div1>
    <input1 />
    <input2 />
  </div1>
  <div2>
    <input3 />
  </div2>
</SwipeableViews>

Tabbing between input 2 and 3 forces a 1/2 transition from div1 to div2/. my goal is to prevent it from causing any transition at all.

hi,
I tried using this component as nested swipe. But while swiping the child it was triggering the parent swipe too.. Any idea how to fix this issue.
It would be great if you post a fix or doc how to do this ..
something like this

<div parent swipe>
    <div child swipe>
    </div>
</div>

It would be great to make this work on react-native too.

I used this library with material ui tabs. It is working fine in chrome and safari but it is not working on mozilla. When i try to swipe the pages on mozilla they start sliding.

material ui link -- >http://www.material-ui.com/#/components/tabs

heightLatest which determines whether to display a scrollbar for the SwipeableViews is not adjusting dynamically when the size of the content on the page changes. For example if you refresh the page and it inits with with a heightLatest of 200, when you open a 600px size dropdown, the dropdown will get cut off and a scrollbar will appear.

I propose to add an option to set a max/default heightLatest, or to fix the behavior to automatically adjust if something inside the SwipeableView needs more space.

Is it possible that we could extend the lib to support swiping up and down?

I'm looking into the source now but am not sure where to begin. My use case is to swipe views left to right, then swipe up to show the present slides details, then swipe down to go back to the left to right swipe flow.

Happy to fork and try it out, but keen to know your thoughts first

ERROR in ./~/react-swipeable-views/lib/index.js
Module build failed: ReferenceError: Unknown plugin "transform-object-assign" specified in "/Users/joe/Documents/WorkSpace/m-tanwan-react/node_modules/react-swipeable-views/.babelrc" at 0, attempted to resolve relative to "/Users/joe/Documents/WorkSpace/m-tanwan-react/node_modules/react-swipeable-views"

this plugin not working with babel 6....

resitance Boolean, default=false....
^^

Looks like the same error as here is coming from React-Swipeable-Views. I believe it stems from this code producing NaN sometimes:

const translate = -interpolatedStyle.translate;

return (
  <div
    style={Object.assign({
      WebkitTransform: `translate3d(${translate}%, 0, 0)`,
      transform: `translate3d(${translate}%, 0, 0)`,
      height: interpolatedStyle.height,
    }, styles.container, containerStyle)}
  >
    {childrenToRender}
  </div>
);

Here is the exact error:

Warning: `div` was passed a style object that has previously been mutated. Mutating `style` is deprecated. Consider cloning it beforehand. Check the `render` of `Motion`. Previous style: {WebkitTransform: "translate3d(NaN%, 0, 0)", transform: "translate3d(NaN%, 0, 0)", height: NaN, display: "-webkit-box; display: flex"}. Mutated style: {WebkitTransform: "translate3d(NaN%, 0, 0)", transform: "translate3d(NaN%, 0, 0)", height: NaN, display: "-webkit-box; display: flex"}.

As it's well explains by google: https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution?hl=en. We should use the requestAnimationFrame() API for reflecting visual changes when the user is draging.
One possible implementation is this one:
https://github.com/callemall/material-ui/blob/master/src/slider.jsx#L331

I think that we have a memory leak somewhere. However, I can't narrow it down.

First of all, thanks for the great packages.

I installed react-swipeable-views package via npm.
And I got error message from during webpack builds like belows.

ERROR in ./~/react-swipeable-views/lib/SwipeableViews.js
Module not found: Error: Can't resolve 'react-motion' in '/node_modules/react-swipeable-views/lib'
./~/react-swipeable-views/lib/SwipeableViews.js 19:19-42

If we have to not only installed this package but also react-motion package, we better fix README.md files.

AS-IS npm install react-swipeable-views
TO-BE npm install react-swipeable-views react-motion

If I missed sth, please tell me :)
Thanks!

The API docs for onChangeIndex show it is called with function(index, fromIndex) but it doesn't seem to work properly for me. I am a bit of a noob so maybe I'm not understanding it but I did dig through the code to try to figure it out. Here's what I see:

this.props.onChangeIndex() is called in a number of different files but sometimes it is called with one parameter this.props.onChangeIndex(indexNew); and other times with two this.props.onChangeIndex(indexNew, indexLatest); . Am I correct in asserting the API will not always pass the fromIndex parameter? If so, is this maybe a bug because shouldn't onChangeIndex only fire when the index changes from something to something else?

Also I don't think those two parameters have the correct meaning when passed anyway.
In the handleTouchEnd function of both the index.native.antimated and SwipeableViews.js you have the variables:

indexNew, indexCurrent, and indexLatest

indexNew gets assigned

    if (Math.abs(this.vx) > this.props.threshold) {
      if (this.vx > 0) {
        indexNew = Math.floor(this.state.indexCurrent);
      } else {
        indexNew = Math.ceil(this.state.indexCurrent);
      }
    } else {
      // Some hysteresis with indexStart
      if (Math.abs(this.indexStart - this.state.indexCurrent) > 0.6) {
        indexNew = Math.round(this.state.indexCurrent);
      } else {
        indexNew = this.indexStart;
      }
    }

then sometime later this.setState is used to give indexCurrent and indexLatest the value of indexNew

    this.setState({
      indexCurrent: indexNew,
      indexLatest: indexNew,
      isDragging: false,
    },

and just a couple lines later in the setState callback indexNew is checked to see if it matches indexLatest

, () => {
      if (this.props.onSwitching) {
        this.props.onSwitching(indexNew, 'end');
      }

      if (this.props.onChangeIndex && indexNew !== indexLatest) {
        this.props.onChangeIndex(indexNew, indexLatest);
      }
    });

but how would they ever not be the same?

There is a good chance I just don't understand something about React or ES6 correctly.

Tested with a single child div, received componentWillMount event twice.

https://github.com/chenglou/react-motion/blob/master/HISTORY.md

Would it be difficult to add infinite swipe support? Like wrap around?

I want to make a view with multiple rows. Each row may differ in height from the previous row, but all items in the same row would be equal height. If I scroll view A 50% down the page, I want to swype to view B, which should also be 50% down the page. The reason for the matching height is when I swype from one view to the other, similar content blocks are visible.

I imagine I could create multiple rows, each row it's own swypable view. Then when I swype one row, it moves all the other rows as well. Is it possible to sync multiple rows like this?

VM7787 bundle.js:1105 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Tabs.

my code is the following
`import React from 'react';
import SwipeableViews from 'react-swipeable-views';

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

<div style={Object.assign({}, styles.slide, styles.slide1)}>
slide n°1

<div style={Object.assign({}, styles.slide, styles.slide2)}>
slide n°2

<div style={Object.assign({}, styles.slide, styles.slide3)}>
slide n°3


);}});

var styles = {
slide: {
padding: 15,
minHeight: 100,
color: '#fff',
},
slide1: {
background: '#FEA900',
},
slide2: {
background: '#B3DC4A',
},
slide3: {
background: '#6AC0FF',
},
};

export default MyComponent;
`

If you have a material-ui dialog in a slide after the first, it will pop up in the first slide and you won't see it. Not sure whose issue this would be exactly. I'm sure this problem isn't limited to material-ui dialogs.

In the moment the callBacks are only called, on touch events. If the slide pos changed programmatical, with changing the index property from the render function of the parent components, then they would never be called. It would be fine to have these callBacks in the same way like in touch Events, to do some things after the new position is arrived especially onSwitching(index, 'end').

I've implemented a Swipeable view and nested a Checkbox from React Native Material Design inside of one of the slides.

It seems though that the swipe gesture takes precedence over the tap gesture for the checkbox... the symption being that unless I very careful tap the button without any left or right movement, it will start the slide motion instead of the checking the box.

Any ideas on how you might correct this or where to start debugging?

I am using react-swipeable-views in my project to enable touch swipe events. I can swipe between different div, which are inside <SwipeableViews/>. I have three different divs, out of which, in the 1st div, I have list of images. In the other two remaining divs, there's nothing.

export default class Photos extends React.Component {
    render() {
        const styles = {
          slide: {
            padding: '15px',
            minHeight: '500px',
            color: '#fff',
          },
          slide1: {
            background: '#FEA900',
            overflowY: 'hidden'
          },
          slide2: {
            background: '#B3DC4A',
          },
          slide3: {
            background: '#6AC0FF',
          }
        }

        return(
            <div id="profile_photos">

               <div id="profile_photos_nav">
                   <span class="photo_nav" id="photo_timeline">
                       <button class="active_btn">Timeline Photos</button>
                    </span>
                   <span class="photo_nav" id="photo_profile">
                       <button>Profile Photos</button>
                   </span>
                   <span class="clear_both"></span>
               </div>

               <SwipeableViews>
                    <div style={Object.assign({}, styles.slide, styles.slide1)}>
                        <img src="img/img3.jpg"/>
                        <img src="img/img5.jpg"/>
                        <img src="img/img6.jpg"/>
                        <img src="img/img7.jpg"/>
                    </div>
                    <div style={Object.assign({}, styles.slide, styles.slide2)}>
                        slide n°2
                    </div>
                    <div style={Object.assign({}, styles.slide, styles.slide3)}>
                      slide n°3
                    </div>
                </SwipeableViews>

            </div>
        );
    }
}

However, swiping between slide2 and slide3 is very smooth. But when swiping between slide1 and slide2, its a bit jerky and not smooth. And when I check in the chrome console, I am getting this error:

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

:3000/#/profile/photos?_k=4qkf5g:1

If I remove the images form the 1st div, its working very smoothly again. What can I do to smooth out the swiping (while having the images in the 1st div) between 1st div and 2nd div? Please help me.

Imagine I have three items in a list and two slides in each item. I then select my item2 and slide it to the left to show more controls like a delete button. If I then delete item2, I am left with two items in my list which is fine. The problem is that item3 that now is item2 after I deleted one item have its slideIndex set to the same as the item that was deleted from the list. How can I refresh the list of items so that every item have its slideindex set to 0?

I am using the "Tabs with Slide Effect" pattern here inside of a dialog. When the dialog closes, it throws the error Cannot read property 'children' of null. Looking at the code at L198, slide is expected to be undefined but in my case it is null.

// ...
  getHeightSlide(index) {
    const slide = this.slides[index];
    // the line in question
    if (slide !== undefined) {
      const child = slide.children[0];
      if (child !== undefined) {
        return child.clientHeight;
      }
    }
    return 0;
  },
// ...

I have used your component and defined a slide with the following content:

<dl> <dt>Reference</dt> <dd>Test</dd> <dt>Reference2</dt> <dd>Test2</dd> </dl>

The slide height is not correctly computed and as a result ascroll bar appears. This problem doesn't occur when "simple" div/h1/p are being used.

It would be great if this plugin could change the route (using React Router, for example), when the view is swiped.

This lib is awesome, thanks!

I'm using it with a some slides that have different heights, and all slides end up being the height of the tallest slide. Any ideas about how to get rid of the extra space on the smaller slides?

Hi Olivier thanks for making this!

Are you planning on introducing this? For example, dragging the last slide and it bounces back.

In order to ensure that the API is consistent between the browser and the native environment.
We gonna have to implement the same examples.

• Demo 1: #40
• Demo 2
• Demo 3
• Demo 4
• Demo 5: 4fc31ba
• Demo 6

React v15 has broken rendering of slides, as seen here:

I took a stab at fixing it in #48, but I'm not sure if it's the cleanest fix. In any case, I hope it's of some help.