https://reactnative.dev/assets/js/22a023c4.d78728d1.js

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["117"],{14422(e,a,t){t.r(a),t.d(a,{metadata:()=>r,default:()=>h,frontMatter:()=>c,contentTitle:()=>u,toc:()=>p,assets:()=>d});var r=JSON.parse('{"id":"platformcolor","title":"PlatformColor","description":"You can use the PlatformColor function to access native colors on the target platform by supplying the native color\u2019s corresponding string value. You pass a string to the PlatformColor function and, provided it exists on that platform, it will return the corresponding native color, which you can apply in any part of your application.","source":"@site/versioned_docs/version-0.79/platformcolor.md","sourceDirName":".","slug":"/platformcolor","permalink":"/docs/0.79/platformcolor","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/platformcolor.md\\"},{\\"label\\":\\"Edit page for 0.79 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/platformcolor.md\\"}]","tags":[],"version":"0.79","lastUpdatedAt":1744640057000,"frontMatter":{"id":"platformcolor","title":"PlatformColor"},"sidebar":"api","previous":{"title":"Platform","permalink":"/docs/0.79/platform"},"next":{"title":"RootTag","permalink":"/docs/0.79/roottag"}}'),o=t(62540),l=t(43023),n=t(77779),s=t(98263),i=t(38469);let c={id:"platformcolor",title:"PlatformColor"},u,d={},p=[{value:"Supported colors",id:"supported-colors",level:3},{value:"Developer notes",id:"developer-notes",level:4},{value:"Example",id:"example",level:2}];function f(e){let a={a:"a",blockquote:"blockquote",code:"code",div:"div",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.pre,{children:(0,o.jsx)(a.code,{className:"language-js",metastring:'title="JavaScript"',children:"PlatformColor(color1, [color2, ...colorN]);\n"})}),"\n",(0,o.jsxs)(a.p,{children:["You can use the ",(0,o.jsx)(a.code,{children:"PlatformColor"})," function to access native colors on the target platform by supplying the native color\u2019s corresponding string value. You pass a string to the ",(0,o.jsx)(a.code,{children:"PlatformColor"})," function and, provided it exists on that platform, it will return the corresponding native color, which you can apply in any part of your application."]}),"\n",(0,o.jsxs)(a.p,{children:["If you pass more than one string value to the ",(0,o.jsx)(a.code,{children:"PlatformColor"})," function, it will treat the first value as the default and the rest as fallback."]}),"\n",(0,o.jsx)(a.pre,{children:(0,o.jsx)(a.code,{className:"language-js",metastring:'title="JavaScript"',children:"PlatformColor('bogusName', 'linkColor');\n"})}),"\n",(0,o.jsx)(a.p,{children:"Since native colors can be sensitive to themes and/or high contrast, this platform specific logic also translates inside your components."}),"\n",(0,o.jsx)(a.h3,{id:"supported-colors",children:"Supported colors"}),"\n",(0,o.jsx)(a.p,{children:"For a full list of the types of system colors supported, see:"}),"\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsxs)(a.li,{children:["Android:","\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsxs)(a.li,{children:[(0,o.jsx)(a.a,{href:"https://developer.android.com/reference/android/R.attr",children:"R.attr"})," - ",(0,o.jsx)(a.code,{children:"?attr"})," prefix"]}),"\n",(0,o.jsxs)(a.li,{children:[(0,o.jsx)(a.a,{href:"https://developer.android.com/reference/android/R.color",children:"R.color"})," - ",(0,o.jsx)(a.code,{children:"@android:color"})," prefix"]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(a.li,{children:["iOS (Objective-C and Swift notations):","\n",(0,o.jsxs)(a.ul,{children:["\n",(0,o.jsx)(a.li,{children:(0,o.jsx)(a.a,{href:"https://developer.apple.com/documentation/uikit/uicolor/standard_colors",children:"UIColor Standard Colors"})}),"\n",(0,o.jsx)(a.li,{children:(0,o.jsx)(a.a,{href:"https://developer.apple.com/documentation/uikit/uicolor/ui_element_c

1olors",children:"UIColor UI Element Colors"})}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(a.h4,{id:"developer-notes",children:"Developer notes"}),"\n",(0,o.jsx)(n.A,{groupId:"guide",queryString:!0,defaultValue:"web",values:i.A.getDevNotesTabs(["web"]),children:(0,o.jsx)(s.A,{value:"web",children:(0,o.jsxs)(a.blockquote,{children:["\n",(0,o.jsxs)(a.p,{children:["If you\u2019re familiar with design systems, another way of thinking about this is that ",(0,o.jsx)(a.code,{children:"PlatformColor"})," lets you tap into the local design system's color tokens so your app can blend right in!"]}),"\n"]})})}),"\n",(0,o.jsx)(a.h2,{id:"example",children:"Example"}),"\n",(0,o.jsx)(a.div,{className:"snack-player","data-snack-name":"PlatformColor Example","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%7BPlatform%2C%20PlatformColor%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(%5Cn%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.label%7D%3EI%20am%20a%20special%20label%20color!%3C%2FText%3E%5Cn%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%3C%2FSafeAreaProvider%3E%5Cn)%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20label%3A%20%7B%5Cn%20%20%20%20padding%3A%2016%2C%5Cn%20%20%20%20fontWeight%3A%20'800'%2C%5Cn%20%20%20%20...Platform.select(%7B%5Cn%20%20%20%20%20%20ios%3A%20%7B%5Cn%20%20%20%20%20%20%20%20color%3A%20PlatformColor('label')%2C%5Cn%20%20%20%20%20%20%20%20backgroundColor%3A%20PlatformColor('systemTealColor')%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20android%3A%20%7B%5Cn%20%20%20%20%20%20%20%20color%3A%20PlatformColor('%3Fandroid%3Aattr%2FtextColor')%2C%5Cn%20%20%20%20%20%20%20%20backgroundColor%3A%20PlatformColor('%40android%3Acolor%2Fholo_blue_bright')%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20default%3A%20%7Bcolor%3A%20'black'%7D%2C%5Cn%20%20%20%20%7D)%2C%5Cn%20%20%7D%2C%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%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":"android,ios","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-appearance":"light","data-snack-device-frame":"false"}),"\n",(0,o.jsxs)(a.p,{children:["The string value provided to the ",(0,o.jsx)(a.code,{children:"PlatformColor"})," function must match the string as it exists on the native platform where the app is running. In order to avoid runtime errors, the function should be wrapped in a platform check, either through a ",(0,o.jsx)(a.code,{children:"Platform.OS === 'platform'"})," or a ",(0,o.jsx)(a.code,{children:"Platform.select()"}),", as shown on the example above."]}),"\n",(0,o.jsxs)(a.blockquote,{children:["\n",(0,o.jsxs)(a.p,{children:[(0,o.jsx)(a.strong,{children:"Note:"})," You can find a complete example that demonstrates proper, intended use of ",(0,o.jsx)(a.code,{children:"PlatformColor"})," in ",(0,o.jsx)(a.a,{href:"https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js",children:"PlatformColorExample.js"}),"."]}),"\n"]})]})}function h(e={}){let{wrapper:a}={...(0,l.R)(),...e.components};return a?(0,o.jsx)(a,{...e,children:(0,o.jsx)(f,{...e})}):f(e)}},98263(e,a,t){t.d(a,{A:()=>s});var r=t(62540);t(63696);var o=t(11750),l=t(23865);function n({children:e,className:a,hidden:t}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,o.A)("tabItem_wHwb",a),hidden:t,children:e})}function s({children:e,className:a,value:t}){let{selectedValue:o,lazy:i}=(0,l.uc)(),c=t===o;return!c&&i?null:(0,r.jsx)(n,{className:a,hidden:!c,children:e})}},77779(e,a,t){t.d(a,{A:()=>p});var r=t(62540);t(63696);var o=t(11750),l=t(46065),n=t(23865),s=t(45194),i=t(83029);function c({className:e}){let{selectedValue:a,selectValue:t,tabValues:l,block:i}=(0,n.uc)(),u=[],{blockElementScrollPositionUntilNextRender:d}=(0,s.a_)(),p=e=>{let r=e.currentTarget,o=l[u.indexOf(r)].value;o!==a&&(d(r),t(o))},f=e=>{let a=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":{let t=u.indexOf(e.currentTarget)+1;a=u[t]??u[0];break}case"ArrowLeft":{let t=u.indexOf(e.currentTarget)-1;a=u[t]??u[u.length-1]}}a?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.A)("tabs",{"tabs--block":i},e),children:l.map(({value:e,label:t,attributes:l})=>(0,r.jsx)("li",{role:"tab",tabIndex:a===e?0:-1,"aria-selected":a===e,ref:e=>{u.push(e)},onKeyDown:f,onClick:p,...l,className:(0,o.A)("tabs__item","tabItem_l0OV",l?.className,{"tabs__item--active":a===e}),children:t??e},e))})}function u({children:e}){return(0,r.jsx)("div",{className:"margin-top--md",children:e})}function d({className:e,children:a}){return(0,r.jsxs)("div",{className:(0,o.A)(l.G.tabs.container,"tabs-container","tabList_J5MA"),children:[(0,r.jsx)(c,{className:e}),(0,r.jsx)(u,{children:a})]})}function p(e){let a=(0,i.A)(),t=(0,n.OC)(e);return(0,r.jsx)(n.O_,{value:t,children:(0,r.jsx)(d,{className:e.className,children:(0,n.vT)(e.children)})},String(a))}},23865(e,a,t){t.d(a,{OC:()=>p,O_:()=>m,uc:()=>h,vT:()=>u});var r=t(62540),o=t(63696),l=t(49519),n=t(6743),s=t(88511),i=t(15396),c=t(89030);function u(e){return o.Children.toArray(e).filter(e=>"\n"!==e)}function d({value:e,tabValues:a}){return a.some(a=>a.value===e)}function p(e){let a,{defaultValue:t,queryString:r=!1,groupId:u}=e,p=function(e){let{values:a,children:t}=e;return(0,o.useMemo)(()=>{let e=a??o.Children.toArray(t).flatMap(e=>{if(!e)return[];if((0,o.isValidElement)(e)&&function(e){let{props:a}=e;return!!a&&"object"==typeof a&&"value"in a}(e))return[e];

1let a="string"==typeof e.type?e.type:e.type.name;throw Error(`Docusaurus error: Bad <Tabs> child <${a}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
2If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:a,attributes:t,default:r}})=>({value:e,label:a,attributes:t,default:r})),r=(0,i.XI)(e,(e,a)=>e.value===a.value);if(r.length>0)throw Error(`Docusaurus error: Duplicate values "${r.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[a,t])}(e),[f,h]=(0,o.useState)(()=>(function({defaultValue:e,tabValues:a}){if(0===a.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!d({value:e,tabValues:a}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${a.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let t=a.find(e=>e.default)??a[0];if(!t)throw Error("Unexpected error: 0 tabValues");return t.value})({defaultValue:t,tabValues:p})),[m,v]=function({queryString:e=!1,groupId:a}){let t=(0,l.W6)(),r=function({queryString:e=!1,groupId:a}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!a)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return a??null}({queryString:e,groupId:a});return[(0,s.aZ)(r),(0,o.useCallback)(e=>{if(!r)return;let a=new URLSearchParams(t.location.search);a.set(r,e),t.replace({...t.location,search:a.toString()})},[r,t])]}({queryString:r,groupId:u}),[b,C]=function({groupId:e}){let a=e?`docusaurus.tab.${e}`:null,[t,r]=(0,c.Dv)(a);return[t,(0,o.useCallback)(e=>{a&&r.set(e)},[a,r])]}({groupId:u}),g=d({value:a=m??b,tabValues:p})?a:null;return(0,n.A)(()=>{g&&h(g)},[g]),{selectedValue:f,selectValue:(0,o.useCallback)(e=>{if(!d({value:e,tabValues:p}))throw Error(`Can't select invalid tab value=${e}`);h(e),v(e),C(e)},[v,C,p]),tabValues:p,lazy:e.lazy??!1,block:e.block??!1}}let f=(0,o.createContext)(null);function h(){let e=o.useContext(f);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function m(e){return(0,r.jsx)(f.Provider,{value:e.value,children:e.children})}},38469(e,a,t){t.d(a,{A:()=>n});var r=t(93227);let o=!!r.A.canUseDOM&&navigator.platform.startsWith("Mac"),l=!!r.A.canUseDOM&&navigator.platform.startsWith("Win"),n={defaultGuide:"quickstart",defaultJsDebugger:"flipper",defaultOs:o?"macos":l?"windows":"linux",defaultPackageManager:"npm",defaultPlatform:o?"ios":"android",defaultSyntax:"functional",defaultAndroidLanguage:"java",defaultAppleLanguage:"objc",defaultJavaScriptSpecLanguages:"typescript",getDevNotesTabs:(e=["android","ios","web","windows"])=>[e.includes("android")?{label:"Android",value:"android"}:void 0,e.includes("ios")?{label:"iOS",value:"ios"}:void 0,e.includes("web")?{label:"Web",value:"web"}:void 0,e.includes("windows")?{label:"Windows",value:"windows"}:void 0].filter(Boolean),guides:[{label:"Expo Go Quickstart",value:"quickstart"},{label:"React Native CLI Quickstart",value:"native"}],oses:[{label:"macOS",value:"macos"},{label:"Windows",value:"windows"},{label:"Linux",value:"linux"}],packageManagers:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],platforms:[{label:"Android",value:"android"},{label:"iOS",value:"ios"}],syntax:[{label:"Function Component",value:"functional"},{label:"Class Component",value:"classical"}],androidLanguages:[{label:"Java",value:"java"},{label:"Kotlin",value:"kotlin"}],appleLanguages:[{label:"ObjectiveC",value:"objc"},{label:"Swift",value:"swift"}],javaScriptSpecLanguages:[{label:"TypeScript",value:"typescript"},{label:"Flow",value:"flow"}],jsDebuggers:[{label:"Hermes Debugger / Expo",value:"hermes"},{label:"Flipper",value:"flipper"},{label:"New Debugger (Experimental)",value:"new-debugger"}],snackLanguages:[{label:"TypeScript",value:"typescript"},{label:"JavaScript",value:"javascript"}],defaultSnackLanguage:"typescript"}},43023(e,a,t){t.d(a,{R:()=>n,x:()=>s});var r=t(63696);let o={},l=r.createContext(o);function n(e){let a=r.useContext(l);return r.useMemo(function(){return"function"==typeof e?e(a):{...a,...e}},[a,e])}function s(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:n(e.components),r.createElement(l.Provider,{value:a},e.children)}}}]);