Cannot read property 'x' of undefined

[yewenxiang23]

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

[yewenxiang23]

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]

same problem,what can i do to fix the bug

[huzcNo1]

stop Remote JS Debugging

[wuxiii]

how to fix this problem ? who has good idea

[stlemon]

i need debug, so please fix this problem

[wuxiii]

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]

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

[wuxiii]

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

[rrrhys]

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

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

[stlemon]

@rrrhys Thanks a lot!

[afilp]

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

[rosiearms]

@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]

Try this before version updates.

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

</Swiper>