leecade / leecade/react-native-swiper
Swiper with minimalSize 0 loads forever when swipe to next slide
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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