Bug while rendering Swiper NOT in full screen width and dynamic data

[npalbrecht]

Which OS ?

MacOS Catalina 10.15.3

Version

Which versions are you using:

• react-native-swiper v1.6.0-nightly.5
• react-native v0.61.4

Expected behaviour

While the Swiper is not in full width, all elements should be correctly placed on the screen after the Swipe.

Actual behaviour

First element is displayed correctly. After a Swipe, all element are going under my left arrow and I can see a small part of the next element while I want to keep it centered between arrows.
After a swipe and if I click on the yellow zone, text is coming back to be automatically centered .... Very strange ....

First element :

Second element after a first swipe :

How to reproduce it

<View style={styles.main_content}>
    <Text
        style={styles.question}>Question {this.state.step} / {this.state.definitions.length}</Text>
    <Swiper showsButtons loop={false} showsPagination={false}
            onIndexChanged={(index) => this._definitionChanged(index)}
            style={styles.definition_container}
    >
        {
            this.state.definitions.map((item => {
                return (
                    <View key={item.id}
                          style={{
                              flex: 1,
                              alignItems: 'center',
                              justifyContent: 'center',
                              marginLeft: 30,
                              marginRight: 30,
                              backgroundColor: 'yellow'
                          }}>
                        <Text style={styles.name}>{item.name}</Text>
                        <Text style={styles.rule}>Règle
                            n° {item.rule_id}</Text>
                    </View>

                );
            }))
        }
    </Swiper>
    <Button onPress={() => this._navigateToAnswers()}
            style={styles.answer_button}>VOIR LES RÉPONSES</Button>
</View>

And in the style :

    main_content: {
        backgroundColor: '#b3d4fb',
        flex: 5,
        borderRadius: 20,
        paddingBottom: 50,
        marginLeft: 20,
        marginRight: 20,
    },

    definition_container: {
        //backgroundColor: '#b3d4fb',
        backgroundColor: 'red',
    },

    question: {
        alignSelf: 'flex-end',
        marginTop: 50,
        fontSize: 16,
        paddingRight: 20,
        paddingBottom: 20,
        color: '#edf5fe',
        fontWeight: 'bold'
    },

    name: {
        fontSize: 24,
        textAlign: 'center',
        alignSelf: 'center',
        color: '#6aabf7',
        fontWeight: 'bold'
    },

    rule: {
        fontSize: 16,
        paddingTop: 50,
        textAlign: 'center',
        fontStyle: 'italic',
        color: "#6aabf7"
    },

    answer_button: {
        marginTop: 50,
        height: 50,
        paddingRight: 20,
        paddingLeft: 20,
        paddingTop: 13,
        borderRadius: 20,
        width: 240,
        overflow: "hidden",
        backgroundColor: "#fff",
        alignSelf: 'center'
    },

    title: {
        fontSize: 28,
        color: '#FFF',
        paddingTop: 20,
        paddingLeft: 20
    }

At least, how can I fix this ? Like adding a paddingLeft after the end of the swipe ? Thanks

[npalbrecht]

After first investigations in source code, bug is happening on the scrollEnd function (after the swipe, element suddenly goes under the arrow as the second picture above) , especially on this lines :

    this.updateIndex(e.nativeEvent.contentOffset, this.state.dir, () => {
      this.autoplay()
      this.loopJump()
    })

Still continuing to find a way to fix this ...

UPDATE
Now, the bug is coming from the updateIndex function called in scrollEnd function ...
As I have loopJump = false, the problem is coming from line 516:

this.setState(newState, cb)

I tried to remove the loopJump and the problem is the same, so now I have to understand why changing the state is making the view jumping on the left ....

[samparmenter]

Having the same issue here with v1.6.0 and RN 0.61.5

[npalbrecht]

For the moment, what temp' solved my issue is to comment source code from line 229 to 237:

    if (this.props.children !== prevProps.children) {
      if (this.props.loadMinimal && Platform.OS === 'ios') {
        this.setState({ ...this.props, index: this.state.index })
      } else {
        this.setState(
          this.initState({ ...this.props, index: this.state.index }, true)
        )
      }
    }

As I have everything whose working for me and because I miss time, I didn't have a look further on how this lines make this bug appear ...

[samparmenter]

OK, I have found the bug I am pretty sure. In initState, the offset is getting set to width * index or height * index and height is simply the value from Dimensions.get('window') instead of the calculated value which is stored in initState.width or initState.height

[viethung0823]

do we have the final solution for this issues yet?