leecade / leecade/react-native-swiper

Index jump to last on when number of contents changes

Open
#617 3 comments 4 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 v? 1.5.3
  • react-native v0.?.? 0.49.3

Sample code to show the problem

export class TestPage extends PureComponent {
    state = {
        active: false,
    };
    
    render() {

        let contents = [
            <View style={styles.slide1} key={1}>
                <Text style={styles.text}>Hello Swiper</Text>
            </View>
        ];

        if (this.state.active) {
            contents.push(
                <View style={styles.slide2} key={2}>
                    <Text style={styles.text}>Beautiful</Text>
                </View>
            );

            contents.push(
                <View style={styles.slide3} key={3}>
                    <Text style={styles.text}>And simple</Text>
                </View>
            );
        }
        return (
            <View style={styles.container}>
                <Swiper style={styles.wrapper} loop={true}>
                    {contents}
                </Swiper>

                <Button title="xxxx" onPress={() => this.setState({active: !this.state.active})}/>
            </View>
            
        );
    }
}


const styles = StyleSheet.create({
    container: {
        paddingTop: 20,
        backgroundColor: WHITE,
        flex: 1
    },
    tabContainer: {
        flex: 0,
    },
    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',
    }
});

When the number of contents changes, it jumps to the last index. However, if loop is turned off, index stays when content changes.

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

Reproduce the issue with the provided TestPage sample on iOS using react-native-swiper 1.5.3 and React Native 0.49.3. Compare the Swiper behavior when the contents array changes with loop enabled versus disabled. Done means the current index remains stable when contents are added while loop is enabled.

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
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.