1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["11251"],{15155(e,t,a){a.r(t),a.d(t,{metadata:()=>n,default:()=>p,frontMatter:()=>r,contentTitle:()=>o,toc:()=>l,assets:()=>c});var n=JSON.parse('{"id":"safeareaview","title":"SafeAreaView","description":"The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.","source":"@site/versioned_docs/version-0.80/safeareaview.md","sourceDirName":".","slug":"/safeareaview","permalink":"/docs/0.80/safeareaview","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/safeareaview.md\\"},{\\"label\\":\\"Edit page for 0.80 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.80/safeareaview.md\\"}]","tags":[],"version":"0.80","lastUpdatedAt":1780494561000,"frontMatter":{"id":"safeareaview","title":"SafeAreaView"},"sidebar":"components","previous":{"title":"InputAccessoryView","permalink":"/docs/0.80/inputaccessoryview"},"next":{"title":"Image Style Props","permalink":"/docs/0.80/image-style-props"}}'),s=a(62540),i=a(43023);let r={id:"safeareaview",title:"SafeAreaView"},o,c={},l=[{value:"Example",id:"example",level:2},{value:"Props",id:"props",level:2},{value:"View Props",id:"view-props",level:3}];function d(e){let t={a:"a",blockquote:"blockquote",code:"code",div:"div",h1:"h1",h2:"h2",h3:"h3",hr:"hr",p:"p",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["The purpose of ",(0,s.jsx)(t.code,{children:"SafeAreaView"})," is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"SafeAreaView"})," renders nested content and automatically applies padding to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone 13)."]}),"\n",(0,s.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,s.jsxs)(t.p,{children:["To use, wrap your top level view with a ",(0,s.jsx)(t.code,{children:"SafeAreaView"})," with a ",(0,s.jsx)(t.code,{children:"flex: 1"})," style applied to it. You may also want to use a background color that matches your application's design."]}),"\n",(0,s.jsx)(t.div,{className:"snack-player","data-snack-name":"SafeAreaView","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%7BStyleSheet%2C%20Text%2C%20SafeAreaView%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%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3EPage%20content%3C%2FText%3E%5Cn%20%20%20%20%3C%2FSafeAreaView%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%20text%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2025%2C%5Cn%20%20%20%20fontWeight%3A%20'500'%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","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)(t.hr,{}),"\n",(0,s.jsx)(t.h1,{id:"reference",children:"Reference"}),"\n",(0,s.jsx)(t.h2,{id:"props",children:"Props"}),"\n",(0,s.jsx)(t.h3,{id:"view-props",children:(0,s.jsx)(t.a,{href:"/docs/0.80/view#props",children:"View Props"})}),"\n",(0,s.jsxs)(t.p,{children:["Inherits ",(0,s.jsx)(t.a,{href:"/docs/0.80/view#props",children:"View Props"}),"."]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:["As padding is used to implement the behavior of the component, padding rules in styles applied to a ",(0,s.jsx)(t.code,{children:"SafeAreaView"}
1)," will be ignored and can cause different results depending on the platform. See ",(0,s.jsx)(t.a,{href:"https://github.com/facebook/react-native/issues/22211",children:"#22211"})," for details."]}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},43023(e,t,a){a.d(t,{R:()=>r,x:()=>o});var n=a(63696);let s={},i=n.createContext(s);function r(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.