leecade / react-native-swiper

The best Swiper component for React Native.
MIT License
10.4k stars 2.34k forks source link

Swiper with minimalSize 0 loads forever when swipe to next slide #840

Open acollazomayer opened 6 years ago

acollazomayer commented 6 years ago

Which OS ?

iOS

Version

Which versions are you using:

Expected behaviour

I create a Swiper with loadMinimal and loadMinimalSize={0}. I want this because i only want to load the current slide, which gets filled with data. When I enter to the page with the swiper I want to swipe and be able to load each slide correctly

Actual behaviour

When I enter to the swiper page the first slide loads correctly however when I slide to the left the second slide shows the ActivityIndicator forever and when i slide to the left again I go to the first slide, and then the swiper starts working correctly as i expected. Loading each slide with the custom data fetched from the server.

How to reproduce it>

<Swiper
          style={styles.wrapper}
          showsButtons={false}
          showsPagination={false}
          ref={(swiper) => { this.swiper = swiper; }}
          index={0}
          loadMinimal
          loadMinimalSize={0}
          onIndexChanged={this.onIndexChange}
        >
          { channels.map(channel => <EpgList channel={channel} />) }
        </Swiper>
import React, { PureComponent } from 'react';
import { View, FlatList } from 'react-native';
import PropTypes from 'prop-types';

import Program from '../Program';
import styles from './styles';

class EpgList extends PureComponent {
  componentDidMount() {
    const { channel, getEpg } = this.props;
    getEpg(channel['content-id']);
  }

  renderRow(item) {
    return <Program program={item} />;
  }

  render() {
    const { epg } = this.props;

    return (
      <View style={styles.container}>
        <FlatList
          ref={(list) => {
            this.channels = list;
          }}
          initialNumToRender={5}
          data={epg}
          renderItem={({ item }) => (
            this.renderRow(item)
          )}
        />
      </View>
    );
  }
}

export default EpgList;

EpgList.propTypes = {
  navigator: PropTypes.object.isRequired,
  channel: PropTypes.object.isRequired,
  getEpg: PropTypes.func.isRequired,
  epg: PropTypes.array.isRequired,
};
acollazomayer commented 6 years ago

Solved it! just do loop={false}