ProgressIndicators

• The ProgressIndicators component is a dynamic and visually engaging tool used to display progress across multiple steps or stages in an application. It's especially useful in scenarios such as during form completion, multi-step processes, or navigation through a sequenced content display. This component leverages animated transitions to enhance user interaction and feedback, making progress tracking both intuitive and aesthetically pleasing.

  The component displays a row of indicators that vary in size to depict progression, where each indicator can be active, completed, or pending based on the progress status. Active indicators expand in size dynamically to signify current focus, while completed indicators remain fully highlighted showing progression.

  Here's a brief outline of setting up and using the ProgressIndicators component within your Mini:

• 
  

  <ProgressIndicators
    numberOfIndicators={5}
    currentStep={2}
    progress={useSharedValue(0.5)}
  />

Integration

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Step 1: Importing the Component

Import ProgressIndicators from the components directory:

import { ProgressIndicators } from '@shopify/shop-minis-platform-sdk';

Step 2: Implementing the ProgressIndicators

Incorporate the ProgressIndicators component in the relevant parts of your application, providing the required numberOfIndicators, currentStep, and progress properties:

<ProgressIndicators
  numberOfIndicators={10}
  currentStep={currentProgressStep}
  progress={progressValue}
/>

Examples

Basic Usage:

<ProgressIndicators
  numberOfIndicators={3}
  currentStep={1}
  progress={useSharedValue(0.33)}
/>

Advanced Scenario with Dynamic Progress:

const progressValue = useSharedValue(0)

<ProgressIndicators
  numberOfIndicators={5}
  currentStep={currentStep}
  progress={progressValue}
/>

Props

• numberOfIndicators (number): Specifies the total number of progress steps.
• currentStep (number): Indicates the current active step in the progress sequence.
• progress (Animated.SharedValue<number>): Represents the completion percentage of the current step.
• width (FlexStyle['width'], optional): 🚧 Deprecated. Specifies the width of the component.

This component provides a clear, customizable, and responsive way to visualize progress within your application, enhancing user experience by providing real-time feedback on their navigation or task completion status.

For more details on the props, please refer to the ProgressIndicatos Props.