Reputation: 41

react-native-swiper method scrollBy

The method does not work if you click on the index 0. If I click on index 0, 1 and 2 will stop working. If I click 2 times on 1 or 2, then the slider will go to the desired slide. But the zero index does not work at all. Tell me please, what could be the problem?

   <Swiper
        onMomentumScrollEnd={(e, state, context) => this.setState({index: 
        state.index})}
        ref={(swiper) => {this.swiper = swiper;}}
        showsButtons={false}
        width={500}
        height={500}
        showsPagination={false}
        index={0}
        loop={true} >
        <View>
            <Text>One</Text>
        </View>
        <View>
            <Text>Two</Text>
        </View>
        <View>
            <Text>Three</Text>
        </View>
    </Swiper>
    <Text onPress={()=>{this.swiper.scrollBy(0, true)}}>One</Text>
    <Text onPress={()=>{this.swiper.scrollBy(1, true)}}>Two</Text>
    <Text onPress={()=>{this.swiper.scrollBy(2, true)}}>Three</Text>

Upvotes: 1

Answers (5)

Ali Mohammad

Reputation: 860

If your screens in separated components

you can use useRef and forwardRef

parent Swiper

import React, {useState , useRef , forwardRef} from 'react';
import Swiper from 'react-native-swiper';
import ScreenOne from "./screens/ScreenOne";
import ScreenTow from "./screens/ScreenTow";

const Parent = (props) => {
const swiper = useRef(null);
return (
   <Swiper ref={swiper}>
      <ScreenOne ref={swiper} />
      <ScreenTow ref={swiper}/>
   </Swiper>
)}
export default Parent;

ScreenOne compoent

import React, {forwardRef} from 'react';
const ScreenOneComponent = (props , ref) => {
return (
   <View>
      <Button title ='move to screen 1' onPress={() => ref.current.scrollBy(1)}/>
  </View>
);}

const ScreenOne = forwardRef(ScreenOneComponent);

export default ScreenOne;

Upvotes: 0

Fabian Lee

Reputation: 31

For anyone reading this in 2019 and writing with function components / hooks.

import React, { useRef } from 'react'
import Swiper from 'react-native-swiper'

const YourCoolComponent = () => {
  const swiper = useRef(null)
  return (
    <Swiper ref={swiper}>
      <View>
        <Text>Page 1</Text>
        <Button onPress={() => swiper.current.scrollBy(1)}>Forward</Button>
      </View>
      <View>
        <Text>Page 2</Text>
        <Button onPress={() => swiper.current.scrollBy(-1)}>Backward</Button>
      </View>
    </Swiper>
  )
}

Upvotes: 3

Антон Герасимов

Reputation: 41

I did this method:

onClickScroll(index){
    let currentIndex = this.state.index;

    if(currentIndex !== index) {
        let resultSlide = undefined;
        let countSlides = this.state.itineraryDaysListItem.length;

        if(index > currentIndex && index !== countSlides)
        {
            resultSlide = index - currentIndex;
            this.swiper.scrollBy(resultSlide, true);
        }
        else if(index>currentIndex && index === countSlides)
        {
            resultSlide = currentIndex+1;
            this.swiper.scrollBy(resultSlide, true);
        }
        else if(index < currentIndex && index !== 0){
            resultSlide = (currentIndex - index) * (-1);
            this.swiper.scrollBy(resultSlide, true);
        }
        else if(index < currentIndex && index === 0){
            resultSlide = currentIndex * (-1);
            this.swiper.scrollBy(resultSlide, true);
        }
    }
}

Upvotes: 3

Marcos Oliveira

Reputation: 71

This worked for me.

export default class Navigator extends Component {
constructor(props) {
    super(props);
    this.onPressActiveButton = this.onPressActiveButton.bind(this);
    this.state = {
        idxActive: 0
    }
}
getIdxActive = () => {
    return this.state.idxActive
}
onPressActiveButton = (index) => {
    this.refs._swiper.scrollBy(index - this.state.idxActive, true);
}
onIndexChanged(index){
    this.setState({
        idxActive: index
    });
}
render() {
    return (
        <View style={styles.container}>
            <Toolbar
                buttons={tabButtons}
                color={getColor('#0A5F22')}
                getIndex={this.getIdxActive}
                onPressActiveButton={this.onPressActiveButton} />
            <Swiper
                ref="_swiper"
                loop={true}
                showsPagination={false}
                onIndexChanged={this.onIndexChanged.bind(this)}>
                <SmartAlarm />
                <ClockView />
                <TimerView />
                <StopWatchView />
            </Swiper>
        </View>
    )
}

}

Upvotes: 0

RK-

Reputation: 12221

The below implementation works for me

    'use strict'
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Swiper from 'react-native-swiper';

var styles = StyleSheet.create({
  wrapper: {
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5',
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  }
})
export default class swiper  extends Component{
  constructor (props) {
    super(props)
    this.swiperRef = swiper => this.swiper = swiper
    this.scrollHandler = page => {
      console.log ('Page ',page,this.swiper)
      this.swiper && this.swiper.scrollBy(page, true)
    }
  }
  render (){
    return (
      <Swiper
        ref={ this.swiperRef }
        showsButtons={false}
        width={500}
        height={500}
        showsPagination={false}
        index={0}
        loop={true} >
        <View style={ styles.slide1 }>
            <Text style={ styles.text } onPress={()=>{console.log('Page 0'); this.swiper.scrollBy(1, true)}}>One</Text>
        </View>
        <View style={ styles.slide2 }>
             <Text style={ styles.text } onPress={()=>{console.log('Page 1'); this.swiper.scrollBy(1, true)}}>Two</Text>
        </View>
        <View style={ styles.slide3 } >
            <Text style={ styles.text } onPress={()=>{console.log('Page 2');this.swiper.scrollBy(2, true)}}>Three</Text>
        </View>
    </Swiper>
    )
  }
}


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

Upvotes: 2

react-native-swiper method scrollBy

Answers (5)

Related Questions