Support for React 16

[DanaIliescu]

I've just recently came across this package which I think is great in terms of progressive web app and not native, but it seems like it doesn't support React 16. With the most basic example I get TypeError: cannot read property 'offsetWidth' of null

After downgrading to React 15.4.2 everything worked. Any chances it will support latest version soon?

[lasseborly]

@DanaIliescu track the bug down and submit a PR with the upgrade maybe? I'm quite sure @alexandre-garrec would approve :smiley:

[yaoyonstudio]

@DanaIliescu I got the same problem, did you fixed it yet?

never mind. I change the default react/react-dom version in the library package.json file, reinstall the dependence, and everything works like expected.

[Raikhen]

Yeah, @alexandre-garrec, if you could add support for React 16 it would be amazing!

[s10mcow]

CHeck out this fork, works for me now https://github.com/damien-mcmahon/react-swipe-card

[leonardmaguin]

@stenmuchow this worked for me to fix the offsetWidth. The display worked but then I got the following while swipping and was unable to fix it yet. Uncaught TypeError: this.props[("onSwipe" + direction)] is not a function

[leonardmaguin]

Fixed it by adding () => So the readme instructions become:

import Cards, { Card } from 'react-swipe-card'

const data = ['Alexandre', 'Thomas', 'Lucien']

const Wrapper = () => {
  return (
      <Cards onEnd={() => action('end')} className='master-root'>
        {data.map(item => 
          <Card 
            onSwipeLeft={() => action('swipe left')} 
            onSwipeRight={() => action('swipe right')}>
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
}

[haveamission]

CHeck out this fork, works for me now https://github.com/damien-mcmahon/react-swipe-card

When installing this via npm, React doesn't seem to be finding it:

npm install https://github.com/damien-mcmahon/react-swipe-card -g

I keep getting module not found

[josephecombs]

Fixed it by adding () => So the readme instructions become:

import Cards, { Card } from 'react-swipe-card'

const data = ['Alexandre', 'Thomas', 'Lucien']

const Wrapper = () => {
  return (
    <Cards onEnd={() => action('end')} className='master-root'>
        {data.map(item => 
          <Card 
            onSwipeLeft={() => action('swipe left')} 
            onSwipeRight={() => action('swipe right')}>
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
}

@leonardmaguin how do you import the "action" method above? The way I used to do this, Importing action depends on from @kadira/storybook, relies on React 15.xx, which will cause npm to try to use two versions of React in the same project.

[nghiaoi3]

anyone tries it with React 16? I encountered the same error! Please help.

[DanaIliescu]

@nghiaoi3 I did not have success in finding a solve for this issue...