When user will click on back arrow image button progress bar indicator is not decrease in react native

Question

I want to achieve this functionality When user will click on back arrow image button progress bar indicator will be decrease and it will show the previous questions in carousel.

I am using 'react-native-snap-carousel' for display data of question and answer and 'react-native-progress-bar-animated' for display progress bar indicator in react-native.

Please help me how I can achieve this functionality.I am new in react-native.Thank you in advanced.

Here is some code for easy to understand

 onSnapToItem = (index) => {
            console.log("get indexvalue", index);

            if (index > 0) {

                let progress = this.state.progress + 100 / this.state.questionList.length
                console.log("my progress qsn length", progress, this.state.questionList.length)
                this.setState({ indexvalue: index, progress: progress }, () => {
                    console.log("check progresss index", this.state.progress, index);
                })
            }

        }

        increase = (value) => {
            this.setState({
                [value]: this.state[value] + value,
            });
             this.carousel._snapToItem(this.state.indexvalue + 1)

        }
        decrease = (value) => {
            this.setState({
                [value]: this.state[value] + value,
            });
            this.carousel._snapToItem(this.state.indexvalue - 1)

        }


     <View style={styles.container}>
                    <View style={styles.topView}>
                        <TouchableOpacity onPress={() => { this.decrease(this.state.progress) }}>
                            <Image source={require('./../../Images/left-arrow-red.png')} style={styles.topImage} />
                        </TouchableOpacity>
                        <TouchableHighlight style={{ marginTop: hp('1.5%') }}>
                            <ProgressBarAnimated
                                width={wp('70%')}
                                value={this.state.progress}
                                // maxValue={100}
                                onComplete={() => {
                                    this.props.navigation.navigate('EditprofileScreen')
                                }}
                                height={hp('0.6%')}

                            />
                        </TouchableHighlight>

                        <TouchableOpacity onPress={() => { this.props.navigation.goBack() }}>
                            <Image source={require('./../../Images/closescreen.png')} style={styles.topImage1} />
                        </TouchableOpacity>
                    </View>

                    <Carousel
                        data={questionList}
                        renderItem={this.renderItemQuestion}
                        itemWidth={wp('100%')}
                        sliderWidth={wp('100%')}
                        ref={ref => this.carousel = ref}
                        scrollEnabled={false}
                        onSnapToItem={this.onSnapToItem}
                        extraData={this.state.indexvalue}

                    />

                    <TouchableOpacity onPress={() => this.increase(this.state.progress)}><Text style={styles.skiptext}>Skip</Text></TouchableOpacity>
                </View>

score 1 · Accepted Answer · answered Apr 29 '20 at 10:01

I have changed onSnapToItem, increse and decrese functions a little bit,

onSnapToItem = (index) => {
    let progress = (index === (this.state.questionList.length-1)) ? 100 : ((index+1) * (100/this.state.questionList.length));
    this.setState({ indexvalue: index, progress: progress }, () => {
        console.log("check progresss index", this.state.progress, index);
    })
}

increase = () => {
    this.carousel.snapToItem(this.state.indexvalue + 1)
}
decrease = () => {
    this.carousel.snapToItem(this.state.indexvalue - 1)
}

And add max value to your Progress bar animated

<ProgressBarAnimated
    width={wp('70%')}
    value={this.state.progress}
    maxValue={100}
    onComplete={() => {
        this.props.navigation.navigate('EditprofileScreen')
    }}
    height={hp('0.6%')}
/>

This should work.

When user will click on back arrow image button progress bar indicator is not decrease in react native

1 Answers1