React-native-swiper: Can not slide next page dynamically from external view.

[Harsh2402]

Which OS ?

Android - 7.1.0

Version

• react-native-swiper: ^1.5.13
• react-native: 0.56

I have set two images at the center|bottom and tried to swipe to next screen on that click.

export default class SwiperView extends Component {

constructor(props) {
    super(props);
    this.state = {
        indexOfPage: 0
    };
    updateScreens = updateScreens.bind(this)
}

render() {

    return (
        <View style={{flex:1}}>

            <Swiper style={styles.wrapper}
                    showsButtons={false}
                    showsPagination={false}
                    loop={false}
                    index={this.state.indexOfPage}
                    scrollEnabled={false}>

                <View style={styles.slide1}>
                    <Text style={styles.text}> {this.state.indexOfPage} </Text>
                </View>

                <View style={styles.slide2}>
                    <Text style={styles.text}>Beautiful</Text>
                </View>

                <View style={styles.slide3}>
                    <Text style={styles.text}>And simple</Text>
                </View>

            </Swiper>

            <View
                style={{height:'20%', flexDirection:'row',
                    position:'absolute', bottom:0,
                    justifyContent:'center', alignSelf:'center'}}>

                <TouchableOpacity
                    style={{width:48, height:48, marginRight:16}}
                    activeOpacity = { .9 }
                    onPress={() => **updateScreens**(false)}>

                    <Image
                        source={require('../images/arrow_left.png')}/>

                </TouchableOpacity>

                <TouchableOpacity
                    style={{width:48, height:48}}
                    activeOpacity = { .9 }
                    onPress={() => **updateScreens**(true)}>

                    <Image
                        source={require('../images/arrow_right.png')}/>

                </TouchableOpacity>

            </View>

        </View>
    );
}

}

function updateScreens(isNext) {
var index = this.state.indexOfPage;
if (isNext) {
if (index <= 1) {
index += 1
} else {
return
}
} else {
if (index > 0) {
index -= 1
} else {
return
}
}
this.setState({ indexOfPage: index})
}

[alexfqc]

I have the same problem, did you get to solve it?

[thongnx6]

I have the same problem then I use the same method when trigger onPress from Next/PrevButton to handle

functionName() {
    this.ref && this.ref.scrollBy(1); // 1:NEXT -1:PREV
}
//...
<Swiper
    containerStyle={Platform.OS === 'ios' ? styles.viewImg : {}}
    style={Platform.OS === 'android' ? styles.viewImg : {}}
    dot={<View style={styles.dot} />}
    activeDot={<View style={styles.activeDot} />}
    paginationStyle={styles.pagination}
    pagingEnabled={true}
    loop={false}
    ref={ref => this.ref = ref}
    onIndexChanged={indexOfSwiper => this.setState({indexOfSwiper})}
>
//....