leecade / leecade/react-native-swiper

Swiper with minimalSize 0 loads forever when swipe to next slide

Open
#840 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

Which OS ?

iOS

Version

Which versions are you using:

  • react-native-swiper v1.5.13
  • react-native v0.55.4
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,
};

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the provided Swiper example with loadMinimal and loadMinimalSize={0} on the listed React Native and react-native-swiper versions, then trace the loadMinimal slide-loading behavior. Done means swiping from the first slide loads the second slide without an ActivityIndicator that runs forever, while subsequent slides still load correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.