Can Progress Steps be changed programatically?

[tudorelu]

Hi there. I have a slightly different use case in mind: I need the progress steps to indicate progress and stages made externally, not by the user - for example when a person orders something for delivery, the progress steps would indicate what the order status is.

(1) Order Received -> (2) Preparing order -> (3) Ready For Delivery -> (4) En Route ...

Is there a way to programatically change the steps? Should i think about this in a different perspective? Or is this not a proper use case and I should look for alternatives? BTW, thanks for putting this our here.

[colbymillerdev]

Hello @tudorelu -

Thanks for opening this issue and considering the library for your next project! We have a prop activeStep on the ProgressSteps component that can change the current step without the need for user interaction. It would just need to be incremented whenever the next step should be shown. Theres also a removeBtnRow prop on the ProgressStep component that can remove the buttons from the bottom of the screen.

Let me know if that helps at all with what you're trying to accomplish.

[tudorelu]

Thanks @colbymillerdev I'll give it a try today!

[tudorelu]

Works like a charm! Thank you.

For reference, here's the code:

import React, { useState, useEffect } from 'react'
import {StyleSheet, View, Text } from 'react-native'
import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ebebeb'
  },
  text: {
    color: '#101010',
    fontSize: 24,
    fontWeight: 'bold'
  }
})

export default ({ navigation }) => {
  const [activeStep, setActiveStep] = useState(0);

  // increment the step counter every 2 seconds
  useEffect(() => {
    setTimeout(function () {
      setActiveStep((activeStep+1)%3);
    }, 5000);
  });

  return (
    <View style={styles.container}>
      <Text style={styles.text}> Progress </Text>
      <View style={{flex: 1}}>
        <ProgressSteps 
          activeStep={activeStep}>
          <ProgressStep label="Order Received" removeBtnRow>
            <View style={{ alignItems: 'center' }}>
              <Text>We received your order!</Text>
            </View>
          </ProgressStep>
          <ProgressStep label="Processing Order" removeBtnRow>
            <View style={{ alignItems: 'center' }}>
              <Text>This is the content within step 2!</Text>
            </View>
          </ProgressStep>
          <ProgressStep label="Delivery Ready" removeBtnRow>
            <View style={{ alignItems: 'center' }}>
              <Text>This is the content within step 3!</Text>
            </View>
          </ProgressStep>
        </ProgressSteps>
      </View>
    </View>
  )
}