react-native-ui-lib/src/components/progressBar/progressBar.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "ProgressBar",
  "category": "status",
  "description": "Progress bar",
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressBarScreen.tsx",
  "props": [
    {
      "name": "progress",
      "type": "number",
      "description": "The progress of the bar from 0 to 100",
      "default": "0"
    },
    {
      "name": "fullWidth",
      "type": "boolean",
      "description": "FullWidth Ui preset"
    },
    {
      "name": "style",
      "type": "ViewStyle",
      "description": "Override container style"
    },
    {
      "name": "progressColor",
      "type": "string",
      "description": "Progress color"
    },
    {
      "name": "customElement",
      "type": "JSX.Element",
      "description": "Custom element to render on top of the animated progress"
    }
  ],
  "snippet": [
    "<ProgressBar progress={55$1} progressColor={Colors.red30$2}/>"
  ],
  "docs": {
    "hero": {
      "title": "ProgressBar",
      "description": "ProgressBar is a linear progress indicators, that express the length of a process. It should be used when the process completion rate can be detected. As the completion rate increases, the track fills from 0 to 100%. The ProgressBar can be accompanied by a textual representation of the progress in a percent format.",
      "type": "hero",
      "layout": "horizontal",
      "content": [
        {
          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_cover.png"
        }
      ]
    },
    "tabs": [
      {
        "title": "Overview",
        "sections": [
          {
            "type": "list",
            "items": [
              {
                "title": "Inline (Default)",
                "description": "Inline Progress Bar attached to a container, such as a card, can indicate the process applies to that particular item.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_inline.png"
                  }
                ]
              },
              {
                "title": "Full Width",
                "description": "Indicates progress with the screen’s content.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_fullWidth.png"
                  }
                ]
              },
              {
                "title": "Animated",
                "description": "In cases where the progress will take about a minute to complete, use an animated progress bar with a stripes pattern ",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_animated.png"
                  }
                ]
              }
            ],
            "layout": "horizontal",
            "title": "Usage Examples"
          },
          {
            "type": "table",
            "columns": [
              "Property",
              "Preview"
            ],
            "items": [
              {
                "title": "Default",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_default.png"
                  }
                ]
              },
              {
                "title": "AnimatedStripes",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_AnimatedStripes.png"
                  }
                ]
              }
            ],
            "title": "Types"
          },
          {
            "type": "table",
            "columns": [
              "Property",
              "Preview"
            ],
            "items": [
              {
                "title": "Inline (default)",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_default.png"
                  }
                ]
              },
              {
                "title": "FullWidth",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_fullWidth.png"
                  }
                ]
              }
            ],
            "title": "Size"
          },
          {
            "type": "section"
          },
          {
            "type": "list",
            "items": [
              {
                "title": "Phone spec",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_spec_phone.png"
                  }
                ]
              },
              {
                "title": "Tablet spec",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_spec_tablet.png"
                  }
                ]
              }
            ],
            "title": "Spec",
            "layout": "horizontal"
          }
        ]
      }
    ]
  }
}