CODEWITHSUNDEEP
reactjsreact-nativereact-redux
ComeRun
ComeRun

Reputation: 921

React Native set the current slide to state

I am using Swiper (which is using ScrollView) in my react native app. First I need to go through a list of JSON object to render each of slides using map. my problem is I am not sure how to set the current slide info to the state. Just to mention I am using redux.

Probably this should be achieved when the scroll ends using onMomentumScrollEnd

Here is the code snippet 

var mySlides = [{id: 1, text: "text 1", sub: "sub 1", image: require("./img/1.jpg")}, {id: 2, text: "text 2", sub: "sub 2", image: require("./img/2.jpg")}, {id: 3, text: "text 3", sub: "sub 3", image: require("./img/3.jpg")}]

export default class extends Component {
  render () {
    return (
      <View>
        <Swiper style={styles.wrapper}
          onMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}
          >
          {mySlides.map((slide, index) => {
            return (
              <View key="index" style={styles.slide}>
                <Image style={styles.image} source={slide.image}>
                  <View style={styles.backdropView}>
                    <Text style={styles.text}>{slide.text}</Text>
                  </View>
                </Image>
              </View>
            );
          })}
        </Swiper>
      </View>
    )
  }
}

Upvotes: 0

Views: 1234

Answers (1)

alecrobins
alecrobins

Reputation: 341

After looks through the Swiper docs, I think you're right in using the onMomentumScollEnd to track which slide is currently selected. What you can do is that once this function gets called, you can store the state.index (state here being the state of the Swiper) to the state of your component. Then use the stored index to reference the slide info.

For example:

var mySlides = [{id: 1, text: "text 1", sub: "sub 1", image: require("./img/1.jpg")}, {id: 2, text: "text 2", sub: "sub 2", image: require("./img/2.jpg")}, {id: 3, text: "text 3", sub: "sub 3", image: require("./img/3.jpg")}]

export default class extends Component {
  constructor() {
    super();
    this.state = {
      index: 0
    };
  }

  handleOnMomentumScrollEnd(e, state) {
    this.setState({
      index: state.index
    });
  }

  render () {
    // current slide info would be accessed by:
    // const currentSlide = mySlides[this.state.index];
    return (
      <View>
        <Swiper style={styles.wrapper}
          onMomentumScrollEnd={this.handleOnMomentumScrollEnd.bind(this)}
        >
          {mySlides.map((slide, index) => {
            return (
              <View key={index} style={styles.slide}>
                <Image style={styles.image} source={slide.image}>
                  <View style={styles.backdropView}>
                    <Text style={styles.text}>{slide.text}</Text>
                  </View>
                </Image>
              </View>
            );
          })}
        </Swiper>
      </View>
    )
  }
}

Also, as a side note, you want to make the key of a component unique so changed key="index" to key={index}

Upvotes: 1

Related Questions