https://reactnative.dev/assets/js/c26b89f5.105bd35c.js

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["10007"],{61835(e,r,s){s.r(r),s.d(r,{metadata:()=>n,default:()=>a,frontMatter:()=>l,contentTitle:()=>t,toc:()=>c,assets:()=>o});var n=JSON.parse('{"id":"refreshcontrol","title":"RefreshControl","description":"This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0, swiping down triggers an onRefresh event.","source":"@site/versioned_docs/version-0.78/refreshcontrol.md","sourceDirName":".","slug":"/refreshcontrol","permalink":"/docs/0.78/refreshcontrol","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/refreshcontrol.md\\"},{\\"label\\":\\"Edit page for 0.78 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.78/refreshcontrol.md\\"}]","tags":[],"version":"0.78","lastUpdatedAt":1755170159000,"frontMatter":{"id":"refreshcontrol","title":"RefreshControl"},"sidebar":"components","previous":{"title":"Pressable","permalink":"/docs/0.78/pressable"},"next":{"title":"ScrollView","permalink":"/docs/0.78/scrollview"}}'),i=s(62540),d=s(43023);let l={id:"refreshcontrol",title:"RefreshControl"},t,o={},c=[{value:"Example",id:"example",level:2},{value:"Props",id:"props",level:2},{value:"View Props",id:"view-props",level:3},{value:'<div class="label required basic">Required</div><strong><code>refreshing</code></strong>',id:"requiredrefreshing",level:3},{value:'<code>colors</code> <div class="label android">Android</div>',id:"colors-android",level:3},{value:'<code>enabled</code> <div class="label android">Android</div>',id:"enabled-android",level:3},{value:"<code>onRefresh</code>",id:"onrefresh",level:3},{value:'<code>progressBackgroundColor</code> <div class="label android">Android</div>',id:"progressbackgroundcolor-android",level:3},{value:"<code>progressViewOffset</code>

1",id:"progressviewoffset",level:3},{value:'<code>size</code> <div class="label android">Android</div>',id:"size-android",level:3},{value:'<code>tintColor</code> <div class="label ios">iOS</div>',id:"tintcolor-ios",level:3},{value:'<code>title</code> <div class="label ios">iOS</div>',id:"title-ios",level:3},{value:'<code>titleColor</code> <div class="label ios">iOS</div>',id:"titlecolor-ios",level:3}];function h(e){let r={a:"a",blockquote:"blockquote",code:"code",div:"div",h1:"h1",h2:"h2",h3:"h3",hr:"hr",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,d.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(r.p,{children:["This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at ",(0,i.jsx)(r.code,{children:"scrollY: 0"}),", swiping down triggers an ",(0,i.jsx)(r.code,{children:"onRefresh"})," event."]}),"\n",(0,i.jsx)(r.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(r.div,{className:"snack-player","data-snack-name":"RefreshControl","data-snack-description":"Example usage","data-snack-files":"%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%20from%20'react'%3B%5Cnimport%20%7BRefreshControl%2C%20ScrollView%2C%20StyleSheet%2C%20Text%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5Brefreshing%2C%20setRefreshing%5D%20%3D%20React.useState(false)%3B%5Cn%5Cn%20%20const%20onRefresh%20%3D%20React.useCallback(()%20%3D%3E%20%7B%5Cn%20%20%20%20setRefreshing(true)%3B%5Cn%20%20%20%20setTimeout(()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20setRefreshing(false)%3B%5Cn%20%20%20%20%7D%2C%202000)%3B%5Cn%20%20%7D%2C%20%5B%5D)%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CScrollView%5Cn%20%20%20%20%20%20%20%20%20%20contentContainerStyle%3D%7Bstyles.scrollView%7D%5Cn%20%20%20%20%20%20%20%20%20%20refreshControl%3D%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CRefreshControl%20refreshing%3D%7Brefreshing%7D%20onRefresh%3D%7BonRefresh%7D%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%3EPull%20down%20to%20see%20RefreshControl%20indicator%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%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%7D%2C%5Cn%20%20scrollView%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20backgroundColor%3A%20'pink'%2C%5Cn%20%20%20%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%7D)%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":"ios,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,i.jsxs)(r.blockquote,{children:["\n",(0,i.jsxs)(r.p,{children:["Note: ",(0,i.jsx)(r.code,{children:"refreshing"})," is a controlled prop, this is why it needs to be set to ",(0,i.jsx)(r.code,{children:"true"})," in the ",(0,i.jsx)(r.code,{children:"onRefresh"})," function otherwise the refresh indicator will stop immediately."]}),"\n"]}),"\n",(0,i.jsx)(r.hr,{}),"\n",(0,i.jsx)(r.h1,{id:"reference",children:"Reference"}),"\n",(0,i.jsx)(r.h2,{id:"props",children:"Props"}),"\n",(0,i.jsx)(r.h3,{id:"view-props",children:(0,i.jsx)(r.a,{href:"/docs/0.78/view#props",children:"View Props"})}),"\n",(0,i.jsxs)(r.p,{children:["Inherits ",(0,i.jsx)(r.a,{href:"/docs/0.78/view#props",children:"View Props"}),"."]}),"\n",(0,i.jsx)(r.hr,{}),"\n",(0,i.jsxs)(r.h3,{id:"requiredrefreshing",children:[(0,i.jsx)("div",{className:"label required basic",children:"Required"}),(0,i.jsx)(r.strong,{children:(0,i.jsx)(r.code,{children:"refreshing"})})]}),"\n",(0,i.jsx)(r.p,{children:"Whether the view should be indicating an active refresh."}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.th,{children:"Type"})})}),(0,i.jsx)(r.tbody,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.td,{children:"boolean"})})})]}),"\n",(0,i.jsx)(r.hr,{}),"\n",(0,i.jsxs)(r.h3,{id:"colors-android",children:[(0,i.jsx)(r.code,{children:"colors"})," ",(0,i.jsx)("div",{className:"label android",children:"Android"})]}),"\n",(0,i.jsx)(r.p,{children:"The colors (at least one) that will be used to draw the refresh indicator."}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.th,{children:"Type"})})}),(0,i.jsx)(r.tbody,{children:(0,i.jsx)(r.tr,{children:(0,i.jsxs)(r.td,{children:["array of ",(0,i.jsx)(r.a,{href:"/docs/0.78/colors",children:"colors"})]})})})]}),"\n",(0,i.jsx)(r.hr,{}),"\n",(0,i.jsxs)(r.h3,{id:"enabled-android",children:[(0,i.jsx)(r.code,{children:"enabled"})," ",(0,i.jsx)("div",{className:"label android",children:"Android"})]}),"\n",(0,i.jsx)(r.p,{children:"Whether the pull to refresh functionality is enabled."}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.th,{children:"Type"}),(0,i.jsx)(r.th,{children:"Default"})]})}),(0,i.jsx)(r.tbody,{children:(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:"boolean"}),(0,i.jsx)(r.td,{children:(0,i.jsx)(r.code,{children:"true"})})]})})]}),"\n",(0,i.jsx)(r.hr,{}),"\n",(0,i.jsx)(r.h3,{id:"onrefresh",children:(0,i.jsx)(r.code,{children:"onRefresh"})}),"\n",(0,i.jsx)(r.p,{children:"Called when the view starts refreshing."}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.th,{children:"Type"})})}),(0,i.jsx)(r.tbody,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.td,{children:"function"})})})]}),"\n",(0,i.jsx)(r.hr,{}),"\n",(0,i.jsxs)(r.h3,{id:"progressbackgroundcolor-android",children:[(0,i.jsx)(r.code,{children:"progressBackgroun

1dColor"})," ",(0,i.jsx)("div",{className:"label android",children:"Android"})]}),"\n",(0,i.jsx)(r.p,{children:"The background color of the refresh indicator."}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.th,{children:"Type"})})}),(0,i.jsx)(r.tbody,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.td,{children:(0,i.jsx)(r.a,{href:"/docs/0.78/colors",children:"color"})})})})]}),"\n",(0,i.jsx)(r.hr,{}),"\n",(0,i.jsx)(r.h3,{id:"progressviewoffset",children:(0,i.jsx)(r.code,{children:"progressViewOffset"})}),"\n",(0,i.jsx)(r.p,{children:"Progress view top offset."}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.th,{children:"Type"}),(0,i.jsx)(r.th,{children:"Default"})]})}),(0,i.jsx)(r.tbody,{children:(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.td,{children:"number"}),(0,i.jsx)(r.td,{children:(0,i.jsx)(r.code,{children:"0"})})]})})]}),"\n",(0,i.jsx)(r.hr,{}),"\n",(0,i.jsxs)(r.h3,{id:"size-android",children:[(0,i.jsx)(r.code,{children:"size"})," ",(0,i.jsx)("div",{className:"label android",children:"Android"})]}),"\n",(0,i.jsx)(r.p,{children:"Size of the refresh indicator."}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsxs)(r.tr,{children:[(0,i.jsx)(r.th,{children:"Type"}),(0,i.jsx)(r.th,{children:"Default"})]})}),(0,i.jsx)(r.tbody,{children:(0,i.jsxs)(r.tr,{children:[(0,i.jsxs)(r.td,{children:["enum(",(0,i.jsx)(r.code,{children:"'default'"}),", ",(0,i.jsx)(r.code,{children:"'large'"}),")"]}),(0,i.jsx)(r.td,{children:(0,i.jsx)(r.code,{children:"'default'"})})]})})]}),"\n",(0,i.jsx)(r.hr,{}),"\n",(0,i.jsxs)(r.h3,{id:"tintcolor-ios",children:[(0,i.jsx)(r.code,{children:"tintColor"})," ",(0,i.jsx)("div",{className:"label ios",children:"iOS"})]}),"\n",(0,i.jsx)(r.p,{children:"The color of the refresh indicator."}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.th,{children:"Type"})})}),(0,i.jsx)(r.tbody,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.td,{children:(0,i.jsx)(r.a,{href:"/docs/0.78/colors",children:"color"})})})})]}),"\n",(0,i.jsx)(r.hr,{}),"\n",(0,i.jsxs)(r.h3,{id:"title-ios",children:[(0,i.jsx)(r.code,{children:"title"})," ",(0,i.jsx)("div",{className:"label ios",children:"iOS"})]}),"\n",(0,i.jsx)(r.p,{children:"The title displayed under the refresh indicator."}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.th,{children:"Type"})})}),(0,i.jsx)(r.tbody,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.td,{children:"string"})})})]}),"\n",(0,i.jsx)(r.hr,{}),"\n",(0,i.jsxs)(r.h3,{id:"titlecolor-ios",children:[(0,i.jsx)(r.code,{children:"titleColor"})," ",(0,i.jsx)("div",{className:"label ios",children:"iOS"})]}),"\n",(0,i.jsx)(r.p,{children:"The color of the refresh indicator title."}),"\n",(0,i.jsxs)(r.table,{children:[(0,i.jsx)(r.thead,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.th,{children:"Type"})})}),(0,i.jsx)(r.tbody,{children:(0,i.jsx)(r.tr,{children:(0,i.jsx)(r.td,{children:(0,i.jsx)(r.a,{href:"/docs/0.78/colors",children:"color"})})})})]})]})}function a(e={}){let{wrapper:r}={...(0,d.R)(),...e.components};return r?(0,i.jsx)(r,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},43023(e,r,s){s.d(r,{R:()=>l,x:()=>t});var n=s(63696);let i={},d=n.createContext(i);function l(e){let r=n.useContext(d);return n.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function t(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),n.createElement(d.Provider,{value:r},e.children)}}}]);