Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'x' of undefined #582

Closed
yewenxiang23 opened this issue Sep 22, 2017 · 21 comments · Fixed by #897
Closed

Cannot read property 'x' of undefined #582

yewenxiang23 opened this issue Sep 22, 2017 · 21 comments · Fixed by #897

Comments

@yewenxiang23
Copy link

yewenxiang23 commented Sep 22, 2017

Which OS ?

Android

Version

Which versions are you using:

  • react-native-swiper ^1.5.12
  • react-native 0.48.3

Expected behaviour

Android device debugging will not be throw error

Actual behaviour

Android device debugging is throw error Cannot read property 'x' of undefined,
When I Debug JS Remotely to chrome was Report errors,
It's normal after stop remote js debugging

2017-09-22 2 44 14

@yewenxiang23
Copy link
Author

yewenxiang23 commented Sep 25, 2017

import React from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ListView,
  ScrollView,
  Image,
  Linking,
  Dimensions,
  AppRegistry
} from 'react-native'
import Swiper from 'react-native-swiper'
const getWidth = (ImgPsdWidth) => {
  let zoom = ImgPsdWidth / 750 //实际宽度除以设备宽度
  return width * zoom
}
const getHeight = (ImgPsdWidth, ImgPsdHeight) => {
  let ImgWidth = getWidth(ImgPsdWidth)
  let ImgHeight = ImgPsdHeight / ImgPsdWidth * ImgWidth
  return ImgHeight
}
const width = Dimensions.get('window').width;

let data = [
  { img: 'https://file.toydb.cn/JRMGSFXkuu.jpg' },
  { img: 'https://file.toydb.cn/JRMGSFXkuu.jpg' },
  { img: 'https://file.toydb.cn/JRMGSFXkuu.jpg' },
  { img: 'https://file.toydb.cn/JRMGSFXkuu.jpg' },
  { img: 'https://file.toydb.cn/JRMGSFXkuu.jpg' },
  { img: 'https://file.toydb.cn/JRMGSFXkuu.jpg' },
  { img: 'https://file.toydb.cn/JRMGSFXkuu.jpg' },
]


class SwiperCom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visibleSwiper: false
    }
  }
  componentDidMount() {
    this.timer = setTimeout(() => {
      this.setState({
        visibleSwiper: true
      });
    }, 100);
  }
  componentWillUnmount() {
    this.timer && clearTimeout(this.timer)
  }
  _renderItem = () => {
    return data.map((item, index) => {
      console.log(item.img)
      return <TouchableOpacity
        activeOpacity={0.6}
        onPress={() => {
          {/* if (item.content.article) {
            navigate('SpecialDetail', { id: item._id, title: item.title, type: 'banner', imgUrl: item.img })
          }
          if (item.content.http) {
            navigate('SpecialDetail', { http: item.content.http, title: item.title, type: 'bannerWebView', imgUrl: item.img })
          }
          if (item.content.video) {
            navigate('ProductDetail', { id: item.content.video, title: item.title })
          } */}
        }}
        style={styles.slide}
        key={index}
      >
        <View style={[styles.slideImage, { backgroundColor: '#ccc' }]}>
          <Image style={styles.slideImage}
            source={{ uri: item.img }}
            resizeMode={'cover'}
          />
        </View>
      </TouchableOpacity>
    })
  }
  render() {
    let swiper = null;
    if (this.state.visibleSwiper) {
      // dot={<View style={{backgroundColor: 'rgba(0,0,0,.5)', width: 8, height: 8, borderRadius: 4, marginLeft: 5, marginRight: 5}} />}
      //  activeDot={<View style={{backgroundColor: '#f7fcff', width: 8, height: 8, borderRadius: 4, marginLeft: 5, marginRight: 5}} />}
      // paginationStyle={{bottom: 10}}
      // height={getHeight(750,380)}
      // horizontal={true}
      // loop={true}
      // bounces={true}
      // autoplay={true}
      // autoplayTimeout={3}
      // removeClippedSubviews={false}
      swiper = <Swiper
        dot={<View style={{ backgroundColor: 'rgba(0,0,0,.5)', width: 8, height: 8, borderRadius: 4, marginLeft: 5, marginRight: 5 }} />}
        activeDot={<View style={{ backgroundColor: '#f7fcff', width: 8, height: 8, borderRadius: 4, marginLeft: 5, marginRight: 5 }} />}
        paginationStyle={{ bottom: 10 }}
        height={getHeight(750, 380)}
        horizontal={true}
        loop={true}
        bounces={true}
        removeClippedSubviews={false}
        autoplayTimeout={3}
      >
        {this._renderItem()}
      </Swiper>
    } else {
      swiper = <View style={{ height: getHeight(750, 380) }}></View>;
    }
    console.log(swiper)
    return (
      <View style={{ marginTop: 6, flex: 1 }}>
        {swiper}
        <Text>测试轮播</Text>
      </View>
    )
  }

}
const styles = StyleSheet.create({
  slide: {
    flex: 1,
  },
  slideImage: {
    width: width,
    height: getHeight(width, 380),
  },
})

AppRegistry.registerComponent('swiper', () => SwiperCom);

I re implemented the Bug code, and I found the bug caused by the addition of the attribute autoplay={true}

@youziLi
Copy link

youziLi commented Sep 28, 2017

same problem,what can i do to fix the bug

@huzcNo1
Copy link

huzcNo1 commented Oct 9, 2017

stop Remote JS Debugging

@wuxiii
Copy link

wuxiii commented Nov 13, 2017

how to fix this problem ? who has good idea

@stlemon
Copy link

stlemon commented Nov 14, 2017

i need debug, so please fix this problem

@wuxiii
Copy link

wuxiii commented Nov 14, 2017

i have found the reason in my project, if you use the properties autoplay:true,try to remove it,maybe can solve the problem

@ZKeLin
Copy link

ZKeLin commented Dec 1, 2017

@wuxiii Why remove autoplay ,it will work, if I have to need autoplay: true, how to solve it?

@wuxiii
Copy link

wuxiii commented Dec 4, 2017

@ZKeLin 这个我也不知道,你可以调试的时候不用这个属性,打离线包的时候就把这个属性加上

@rrrhys
Copy link

rrrhys commented Dec 5, 2017

@stlemon react-native-swiper\src\index.js:401 add:

  if(offset === undefined || this.internals.offset === undefined){
    return;
  }

@stlemon
Copy link

stlemon commented Dec 13, 2017

@rrrhys Thanks a lot!

@afilp
Copy link

afilp commented Feb 12, 2018

@rrrhys @arribbar Hi, will this be included in a release? We need it to be there when doing "npm i". Thanks!

@rosiearms
Copy link

rosiearms commented Mar 14, 2018

@rrrhys @arribbar - Hi! Any news on this being included in a new release? To use it properly we really need it for installation. Also, it didn't work on line 401 for me, I added it to 396 and it worked.

Thanks :)

@yewenxiang23
Copy link
Author

Try this before version updates.

<Swiper
         autoplay={!__DEV__?true:false}
>

</Swiper>

fungilation added a commit to fungilation/react-native-swiper that referenced this issue May 23, 2018
@fungilation
Copy link
Contributor

@arribbar merge fix please? I keep hitting this on android on app launch (not on ios)

@tiaaaa123
Copy link

I'm getting this issue when running snapshot test with Jest. With @fungilation fix, il works! Thanks!

@rafser01
Copy link

Add this lines into ./node_modules/react-native-swiper/src/index.js -> Line 401
if(! Object.keys(this.initState).includes(dir)) { return }

@fungilation
Copy link
Contributor

fungilation commented Nov 10, 2018

I already fixed in my fork. This repo isn't maintained anymore sadly, the owner just updates README with recruitment ads.

@afilp
Copy link

afilp commented Nov 11, 2018

@fungilation Would you like or someone else to create a new repo (with a different name) so that we can all maintain that one?

@fungilation
Copy link
Contributor

Posted new issue here. I don't want to be the only one maintaining either, let's see if we can drum up enough community interest: #893

@arribbar
Copy link
Collaborator

Sorry @fungilation. I haven't got a lot of time in the past year.
I'll try to do my best to be more present in the future.
I'll check it this week

@arribbar arribbar reopened this Nov 13, 2018
arribbar pushed a commit that referenced this issue Nov 26, 2018
fixes #582 (Android not setting this onLayout first?)
@sg552
Copy link

sg552 commented Dec 25, 2018

thanks a lot, this bug is gone after upgrading to 1.5.14 (previously is 1.5.13)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.