First of all thanks for this! It was exactly what I was looking for. I am writing a small web using material-ui and I am hitting all the time the wall with their tabs: http://material-ui.com/#/components/tabs

In order to make this to work with routing, I think it is needed to things: initialSelectedIndex (which the above library just added, so we can route the user when goes to the link directly or refresh the page) and some methodology to keep the tab consistent when the user navigates back and forward (which the library above doesn't handle).

For the first case, it can be handled passing a prop for the initial state (which is not an anti-pattern in this case https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html)

constructor(props) {
  super(props);
  this.state = { 
    selectedIndex: this.props.initialSelectedIndex,
    ...
  };
}

For the second case, I am not sure... Here is a pull-request with a proposed solution: https://github.com/jdinard/material-ui/commit/4aad7475877cd3ec425f8b14b009915fda7e8fe8 (but this one looks quite smelly).

Hello damusnet:
I tried to use react-swipe-views to build my mobile web page and it worked well in most of time.

But I encountered a problem that if all the swipe views have different height which determined by the contents of themselves and the difference height value between the one view to another view was significant, so there was a large empty space shown on the view which have few content.

I knew that you used flex property of CSS3 to design the layout ,I thought that it was hard to solve the problem with pure CSS methods if I would still use the flex property as the basis of layout implementation.In consideration of that, I tried to reset the parent of swipe views height value as the current selected swipe view height in the componentDidUpdate callback function but I noticed that the performance seems not good as it caused the div layout repainted.

How do you think about the problem?

Hi @damusnet! The plugin looks great, thanks for open sourcing it!

Do you plan to add keyboard navigation and make it ARIA-ready for accessibility?

Since there are some breaking changes in new react-router . Im getting some warnings while using this component. Thanks in advance

Hello!

first, we have to say you've made a great work!

So here is the problem. When we use the TAB key to "validate" something in a form included in a Swipeview, it bugs, making a swipe to the next tab and SwipeViewsTab disappear .

So is there a possibility to add an option to disable this shortcut in your component?

When using Webpack and bebel-loader and let babel-loader handle the polyfilling react-swipe-views fails to work because Number.isInteger does not get polyfilled. The reason is that when using Webpack you normally exclude the node_modules folder as it causes a great slow down on the build if webpack has to parse all the files in that folder.

I'm not sure if there exists a solution for this that doesn't involve polluting my app code with polyfilling or adding a special loader for react-swipe-views alone.

For now i did the later by adding this to my webpack loaders:

{ test: /\.(js|jsx)$/, include: /react\-swipe\-views/, loader: 'babel?cacheDirectory&optional[]=runtime' }

React 15 should be an allowed peer dependency version

The example works great in Chrome but is not functional in Safari (both desktop and mobile). Might have to do with Babel?
The error says: TypeError: undefined is not a function (evaluating 'Number.isInteger(selectedIndex)')

My first view is a collection of form elements, the second view is a confirmation page. However if you press the tab key, you can get the second view to come into the viewable area of the component.

Hi,

I have tried to integrate SwipeViews(basic example given in README), but I got this below error.

Hey,

I realized that when the state changes such that the number of children is dynamic (based on state). The component uses this.props.children.length to measure pageWidthPerCent value. So, it uses the initial number of children and the page width math goes wrong.

Have you considered putting children length in state and update it at right times to calculate the page width.

If you are interested, I can pitch in with a PR.

Thanks

Is there a simple way of changing the .SwipeViewsTab color?

It's ignoring all my style={} commands,

I'm guessing that there should be a way of changing the style arguments

Mobile Safari only emits click events on elements it guesses are clickable. One of the ways it detects this is through cursor: pointer so add it to the css for the tabs.

Would like to add to react.rocks...thanks

It would be awesome to use react-swipe-views as a pure component. This means it would not use state to change views, but props.

We would need a way to set the current view and to add a handler to the onChange event.

This makes it easier to test, easier to manage with a router and easier to use in flux apps.

1. Can we lazy render the tabs somehow ? maybe by adding an addtional async parameter that tells the view to only render the content once the view has been first viewed this will save performance.
2. Maybe use native snap scroll implementations when available
   for instance :http://dev.w3.org/csswg/css-snappoints/ Allows snapping of points natively in the scrollview, and saves performance on extremely low powered devices. *(Currently only supported by Microsoft devices)

I am trying to use react swipe view in my project. but It is showing these error
bundle.js:11327Warning: Failed Context Types: Invalid context router of type object supplied to SwipeViews, expected function. Check the render method of Tabs.

Can you help me to resolve these ?

My list of tabs extend the screen. This is how they look now:

Ideally they should be horizontally scrollable.

I tried loading this using webpack. It shows like

I tried to include CSS manually by using link tag from node_modules. Still, it was the same.

Any pointers on how do I make this work with webpack ?

Under iOS 9.3 tapping a title does not swipe to the matching view. On Android that works.

Sorry for boring you, I'm in deadline for finish a project.

My code is the following.

var React = require('react');


var SwipeViews = require('react-swipe-views');
var Tabs = React.createClass({

  componentWillMount : function(){
    this.setState({
      index: 0
    });
  },


  _onIndexChange(selectedIndex) {
    this.setState({
      index: selectedIndex
    });
  },

  render() {
    return (
      <SwipeViews selectedIndex={this.state.index} onIndexChange={this._onIndexChange.bind(this)}>
        <div title="Intro">
          <h1>A React component for binded Tabs and Swipeable Views</h1>
          <p>See <a href="http://developer.android.com/design/patterns/swipe-views.html">
          Swipe Views</a> on the Android Design Patterns website to understand the desired effect.</p>
          <p>This demo is best viewed on a touch enabled device (real or emulated).</p>
          <p style={{textAlign: 'center'}}><a href="https://github.com/damusnet/react-swipe-views"><button>Download</button></a></p>
        </div>
        <div title="Code">
          <h1>Gist</h1>
        </div>
        <div title="Thanks">
          <ul id="thanks">
            <li><a href="https://twitter.com/davidbruant">David Bruant</a> for making me believe in JavaScript</li>
            <li><a href="http://facebook.github.io/react/">React</a> for being awesome</li>
            <li><a href="http://babeljs.io/">Babel</a> for removing so much pain from transpiling/compiling/bundling</li>
            <li><a href="https://github.com/gaearon">Dan Abramov</a> for all the useful ressources, in this case <a href="https://github.com/gaearon/react-hot-boilerplate">React Hot Boilerplate</a></li>
            <li><a href="https://github.com/TheSeamau5">Hassan Hayat</a>'s <a href="https://github.com/TheSeamau5/swipe-pages">Swipe Pages WebComponent</a> for inspiration</li>
            <li><a href="https://github.com/ferrannp">Ferran Negre</a> for helping me debug</li>
          </ul>
          <p style={{textAlign: 'center'}}><a href="#" onClick={(e) => {
            e.preventDefault();
            this.setState({
              index: 0
            });
          }}><button>Back to Intro</button></a></p>
        </div>
      </SwipeViews>
    );
  }
});

module.exports = `Tabs;`

then I am using this in the following

<div><h1> Property Name {this.props.params.property_uuid}</h1> <Tabs></Tabs></div>

this is showing up like the following