Can not slide next page dynamically from external view.

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})
}

Start by reproducing the issue with the shown SwiperView component, focusing on the external TouchableOpacity handlers and updateScreens. Read how react-native-swiper handles the index and scrollEnabled props, then verify that the external buttons move between the three displayed views in both directions.