https://reactnative.dev/assets/js/457dfddf.578a8045.js

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["15672"],{14266(e,r,n){n.r(r),n.d(r,{metadata:()=>t,default:()=>h,frontMatter:()=>d,contentTitle:()=>l,toc:()=>o,assets:()=>a});var t=JSON.parse('{"id":"progressbarandroid","title":"\u{1F5D1}\uFE0F ProgressBarAndroid","description":"Use one of the community packages instead.","source":"@site/versioned_docs/version-0.84/progressbarandroid.md","sourceDirName":".","slug":"/progressbarandroid","permalink":"/docs/0.84/progressbarandroid","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/progressbarandroid.md\\"},{\\"label\\":\\"Edit page for 0.84 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.84/progressbarandroid.md\\"}]","tags":[],"version":"0.84","lastUpdatedAt":1780494561000,"frontMatter":{"id":"progressbarandroid","title":"\u{1F5D1}\uFE0F ProgressBarAndroid"}}'),s=n(62540),i=n(43023);let d={id:"progressbarandroid",title:"\u{1F5D1}\uFE0F ProgressBarAndroid"},l,a={},o=[{value:"Example",id:"example",level:3},{value:"Props",id:"props",level:2},{value:"<code>animating</code>",id:"animating",level:3},{value:"<code>color</code>",id:"color",level:3},{value:"<code>indeterminate</code>",id:"indeterminate",level:3},{value:"<code>progress</code>",id:"progress",level:3},{value:"<code>styleAttr</code>",id:"styleattr",level:3},{value:"<code>testID</code>",id:"testid",level:3}];function c(e){let r={a:"a",admonition:"admonition",code:"code",div:"div",h1:"h1",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.admonition,{title:"Deprecated",type:"warning",children:(0,s.jsxs)(r.p,{children:["Use one of the ",(0,s.jsx)(r.a,{href:"https://reactnative.directory/?search=progressbar",children:"community packages"})," instead."]})}),"\n",(0,s.jsx)(r.p,{children:"Android-only React component used to indicate that the app is loading or there is some activity in the app."}),"\n",(0,s.jsx)(r.h3,{id:"example",children:"Example"}),"\n",(0,s.jsx)(r.div,{className:"snack-player","data-snack-name":"ProgressBarAndroid","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20%7BView%2C%20StyleSheet%2C%20ProgressBarAndroid%2C%20Text%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.example%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CText%3ECircle%20Progress%20Indicator%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3CProgressBarAndroid%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.example%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CText%3EHorizontal%20Progress%20Indicator%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3CProgressBarAndroid%20styleAttr%3D%5C%22Horizontal%5C%22%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.example%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CText%3EColored%20Progress%20Indicator%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3CProgressBarAndroid%20styleAttr%3D%5C%22Horizontal%5C%22%20color%3D%5C%22%232196F3%5C%22%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.example%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CText%3EFixed%20Progress%20Value%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3CProgressBarAndroid%5Cn%20%20%20%20%20%20%20%20%20%20styleAttr%3D%5C%22Horizontal%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20indeterminate%3D%7Bfalse%7D%5Cn%20%20%20%20%20%20%20%20%20%20progress%3D%7B0.5%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%3C%2FView%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20example%3A%20%7B%5Cn%20%20%20%20marginVertical%3A%2024%2C%5Cn%20%20%7D%2C%5Cn%7D

1)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D","data-snack-dependencies":"react-native-safe-area-context","data-snack-platform":"web","data-snack-supported-platforms":"android","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-appearance":"light","data-snack-device-frame":"false"}),"\n",(0,s.jsx)(r.hr,{}),"\n",(0,s.jsx)(r.h1,{id:"reference",children:"Reference"}),"\n",(0,s.jsx)(r.h2,{id:"props",children:"Props"}),"\n",(0,s.jsxs)(r.p,{children:["Inherits ",(0,s.jsx)(r.a,{href:"/docs/0.84/view#props",children:"View Props"}),"."]}),"\n",(0,s.jsx)(r.h3,{id:"animating",children:(0,s.jsx)(r.code,{children:"animating"})}),"\n",(0,s.jsx)(r.p,{children:"Whether to show the ProgressBar (true, the default) or hide it (false)."}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Required"})]})}),(0,s.jsx)(r.tbody,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"bool"}),(0,s.jsx)(r.td,{children:"No"})]})})]}),"\n",(0,s.jsx)(r.hr,{}),"\n",(0,s.jsx)(r.h3,{id:"color",children:(0,s.jsx)(r.code,{children:"color"})}),"\n",(0,s.jsx)(r.p,{children:"Color of the progress bar."}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Required"})]})}),(0,s.jsx)(r.tbody,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:(0,s.jsx)(r.a,{href:"/docs/0.84/colors",children:"color"})}),(0,s.jsx)(r.td,{children:"No"})]})})]}),"\n",(0,s.jsx)(r.hr,{}),"\n",(0,s.jsx)(r.h3,{id:"indeterminate",children:(0,s.jsx)(r.code,{children:"indeterminate"})}),"\n",(0,s.jsxs)(r.p,{children:["If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal, and requires a ",(0,s.jsx)(r.code,{children:"progress"})," value."]}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Required"})]})}),(0,s.jsx)(r.tbody,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"indeterminateType"}),(0,s.jsx)(r.td,{children:"No"})]})})]}),"\n",(0,s.jsx)(r.hr,{}),"\n",(0,s.jsx)(r.h3,{id:"progress",children:(0,s.jsx)(r.code,{children:"progress"})}),"\n",(0,s.jsx)(r.p,{children:"The progress value (between 0 and 1)."}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Required"})]})}),(0,s.jsx)(r.tbody,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"number"}),(0,s.jsx)(r.td,{children:"No"})]})})]}),"\n",(0,s.jsx)(r.hr,{}),"\n",(0,s.jsx)(r.h3,{id:"styleattr",children:(0,s.jsx)(r.code,{children:"styleAttr"})}),"\n",(0,s.jsx)(r.p,{children:"Style of the ProgressBar. One of:"}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsx)(r.li,{children:"Horizontal"}),"\n",(0,s.jsx)(r.li,{children:"Normal (default)"}),"\n",(0,s.jsx)(r.li,{children:"Small"}),"\n",(0,s.jsx)(r.li,{children:"Large"}),"\n",(0,s.jsx)(r.li,{children:"Inverse"}),"\n",(0,s.jsx)(r.li,{children:"SmallInverse"}),"\n",(0,s.jsx)(r.li,{children:"LargeInverse"}),"\n"]}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Required"})]})}),(0,s.jsx)(r.tbody,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse')"}),(0,s.jsx)(r.td,{children:"No"})]})})]}),"\n",(0,s.jsx)(r.hr,{}),"\n",(0,s.jsx)(r.h3,{id:"testid",children:(0,s.jsx)(r.code,{children:"testID"})}),"\n",(0,s.jsx)(r.p,{children:"Used to locate this view in end-to-end tests."}),"\n",(0,s.jsxs)(r.table,{children:[(0,s.jsx)(r.thead,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.th,{children:"Type"}),(0,s.jsx)(r.th,{children:"Required"})]})}),(0,s.jsx)(r.tbody,{children:(0,s.jsxs)(r.tr,{children:[(0,s.jsx)(r.td,{children:"string"}),(0,s.jsx)(r.td,{children:"No"})]})})]})]})}function h(e={}){let{wrapper:r}={...(0,i.R)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},43023(e,r,n){n.d(r,{R:()=>d,x:()=>l});var t=n(63696);let s={},i=t.createContext(s);function d(e){let r=t.useContext(i);return t.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function l(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),t.createElement(i.Provider,{value:r},e.children)}}}]);