React-native-swiper: autoPlay does not work

Created on 8 Aug 2017  路  4Comments  路  Source: leecade/react-native-swiper

import React,{PureComponent} from 'react';
import {View, Text,StyleSheet,Image,TouchableOpacity} from 'react-native';
import Swiper from 'react-native-swiper'
import px2dp , {Screen} from '../../Utils/px2dp'
class xxxxx extends PureComponent {

static defaultProps = {
    imageArray :[]
}

render (){
    let imageArray = this.props.imageArray;
    // banner
    return (
    <View style={styles.wrapper} >
        <Swiper  autoplay={true}
                 height={px2dp(375) * 0.4}
                 autoplayTimeout = {2.5}
                 paginationStyle = {styles.paginationStyle}
                 dot = {<View style={{backgroundColor:'gray', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
        >
           //excutor four time
            {imageArray.map((index,i) =>(
                <TouchableOpacity style={{flex :1}} key = {i} onPress={ () =>this.props.onPressBanner(index)}>
                    <Image source={{uri : index.bannerUrl}} style={{width : px2dp(375),height : px2dp(375) * 0.4}} />
                </TouchableOpacity>
            ))}
        </Swiper>
    </View>
    )
}

}

const styles = StyleSheet.create({
wrapper : {
borderWidth : px2dp(0.5),
borderColor : '#e0e0e0',

},
paginationStyle : {
    width : 100,height: 10,
    alignSelf : 'center',
    position : 'absolute',
    top : px2dp(375) * 0.4 - 18,
    left : px2dp(375) * 0.5 - 50
}

});
export default xxxxxx

{
"name": "xxxx",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"es6-symbol": "^3.1.1",
"react": "16.0.0-alpha.12",
"react-native": "0.46.4",
"react-native-fetch-blob": "^0.10.8",
"react-native-img-cache": "^1.4.0",
"react-native-root-toast": "^1.1.2",
"react-native-scrollable-tab-view": "^0.6.7",
"react-native-swiper": "^1.5.7",
"react-native-tab-navigator": "^0.3.3",
"react-native-vector-icons": "^4.3.0",
"react-navigation": "^1.0.0-beta.11"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
I use swiper to display 4 image in iOS,i am setting autoplay = {ture} and autoplayTimeout = {2.5} ,but it does do once,it can't autoplay,i have no idea about it ,help me

Need answer from author

Most helpful comment

If you still Have a Problem try
key={this.state.dynamicContent.length}

On the Swiper eg:
<Swiper style={styles.swiperStyle} autoplay={true} key={this.state.data.length}> {newsItemsSwipe} </Swiper>

All 4 comments

@DevaLee i had the same issues too with react-native version 0.46.0, maybe your scenario is same with mine #467 , i fixed my issues after i updated react-native version to 0.47.0

take a look on here https://github.com/facebook/react-native/issues/9436

Is the bug persist on RN 0.47 and RN Swiper 1.5.9?

@arribbar im using 0.47.0 right now, everything work fine after i upgraded

If you still Have a Problem try
key={this.state.dynamicContent.length}

On the Swiper eg:
<Swiper style={styles.swiperStyle} autoplay={true} key={this.state.data.length}> {newsItemsSwipe} </Swiper>

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AndrewSouthpaw picture AndrewSouthpaw  路  3Comments

tokict picture tokict  路  3Comments

agzuniverse picture agzuniverse  路  3Comments

kylehagler picture kylehagler  路  3Comments

nomoreboredom picture nomoreboredom  路  3Comments