1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["11810"],{49710(e,n,t){t.r(n),t.d(n,{metadata:()=>i,default:()=>h,frontMatter:()=>r,contentTitle:()=>a,toc:()=>l,assets:()=>s});var i=JSON.parse('{"id":"keyboardavoidingview","title":"KeyboardAvoidingView","description":"This component will automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed.","source":"@site/versioned_docs/version-0.81/keyboardavoidingview.md","sourceDirName":".","slug":"/keyboardavoidingview","permalink":"/docs/0.81/keyboardavoidingview","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/keyboardavoidingview.md\\"},{\\"label\\":\\"Edit page for 0.81 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.81/keyboardavoidingview.md\\"}]","tags":[],"version":"0.81","lastUpdatedAt":1780494561000,"frontMatter":{"id":"keyboardavoidingview","title":"KeyboardAvoidingView"},"sidebar":"components","previous":{"title":"ImageBackground","permalink":"/docs/0.81/imagebackground"},"next":{"title":"Modal","permalink":"/docs/0.81/modal"}}'),d=t(62540),o=t(43023);let r={id:"keyboardavoidingview",title:"KeyboardAvoidingView"},a,s={},l=[{value:"Example",id:"example",level:2},{value:"Props",id:"props",level:2},{value:"View Props",id:"view-props",level:3},{value:"<code>behavior</code>",id:"behavior",level:3},{value:"<code>contentContainerStyle</code>",id:"contentcontainerstyle",level:3},{value:"<code>enabled</code>",id:"enabled",level:3},{value:"<code>keyboardVerticalOffset</code>
1",id:"keyboardverticaloffset",level:3}];function c(e){let n={a:"a",blockquote:"blockquote",code:"code",div:"div",h1:"h1",h2:"h2",h3:"h3",hr:"hr",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.p,{children:"This component will automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed."}),"\n",(0,d.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,d.jsx)(n.div,{className:"snack-player","data-snack-name":"KeyboardAvoidingView","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%7B%5Cn%20%20View%2C%5Cn%20%20KeyboardAvoidingView%2C%5Cn%20%20TextInput%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Text%2C%5Cn%20%20Platform%2C%5Cn%20%20TouchableWithoutFeedback%2C%5Cn%20%20Button%2C%5Cn%20%20Keyboard%2C%5Cn%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20KeyboardAvoidingComponent%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CKeyboardAvoidingView%5Cn%20%20%20%20%20%20behavior%3D%7BPlatform.OS%20%3D%3D%3D%20'ios'%20%3F%20'padding'%20%3A%20'height'%7D%5Cn%20%20%20%20%20%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CTouchableWithoutFeedback%20onPress%3D%7BKeyboard.dismiss%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.inner%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.header%7D%3EHeader%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CTextInput%20placeholder%3D%5C%22Username%5C%22%20style%3D%7Bstyles.textInput%7D%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.btnContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CButton%20title%3D%5C%22Submit%5C%22%20onPress%3D%7B()%20%3D%3E%20null%7D%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3C%2FTouchableWithoutFeedback%3E%5Cn%20%20%20%20%3C%2FKeyboardAvoidingView%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%20inner%3A%20%7B%5Cn%20%20%20%20padding%3A%2024%2C%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20justifyContent%3A%20'space-around'%2C%5Cn%20%20%7D%2C%5Cn%20%20header%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2036%2C%5Cn%20%20%20%20marginBottom%3A%2048%2C%5Cn%20%20%7D%2C%5Cn%20%20textInput%3A%20%7B%5Cn%20%20%20%20height%3A%2040%2C%5Cn%20%20%20%20borderColor%3A%20'%23000000'%2C%5Cn%20%20%20%20borderBottomWidth%3A%201%2C%5Cn%20%20%20%20marginBottom%3A%2036%2C%5Cn%20%20%7D%2C%5Cn%20%20btnContainer%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'white'%2C%5Cn%20%20%20%20marginTop%3A%2012%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20KeyboardAvoidingComponent%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,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h1,{id:"reference",children:"Reference"}),"\n",(0,d.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,d.jsx)(n.h3,{id:"view-props",children:(0,d.jsx)(n.a,{href:"/docs/0.81/view#props",children:"View Props"})}),"\n",(0,d.jsxs)(n.p,{children:["Inherits ",(0,d.jsx)(n.a,{href:"/docs/0.81/view#props",children:"View Props"}),"."]}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"behavior",children:(0,d.jsx)(n.code,{children:"behavior"})}),"\n",(0,d.jsx)(n.p,{children:"Specify how to react to the presence of the keyboard."}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:["Android and iOS both interact with this prop differently. On both iOS and Android, setting ",(0,d.jsx)(n.code,{children:"behavior"})," is recommended."]}),"\n"]}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsx)(n.tr,{children:(0,d.jsx)(n.th,{children:"Type"})})}),(0,d.jsx)(n.tbody,{children:(0,d.jsx)(n.tr,{children:(0,d.jsxs)(n.td,{children:["enum(",(0,d.jsx)(n.code,{children:"'height'"}),", ",(0,d.jsx)(n.code,{children:"'position'"}),", ",(0,d.jsx)(n.code,{children:"'padding'"}),")"]})})})]}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"contentcontainerstyle",children:(0,d.jsx)(n.code,{children:"contentContainerStyle"})}),"\n",(0,d.jsxs)(n.p,{children:["The style of the content container (View) when behavior is ",(0,d.jsx)(n.code,{children:"'position'"}),"."]}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsx)(n.tr,{children:(0,d.jsx)(n.th,{children:"Type"})})}),(0,d.jsx)(n.tbody,{children:(0,d.jsx)(n.tr,{children:(0,d.jsx)(n.td,{children:(0,d.jsx)(n.a,{href:"/docs/0.81/view-style-props",children:"View Style"})})})})]}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"enabled",children:(0,d.jsx)(n.code,{children:"enabled"})}),"\n",(0,d.jsx)(n.p,{children:"Enabled or disabled KeyboardAvoidingView."}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.th,{children:"Type"}),(0,d.jsx)(n.th,{children:"Default"})]})}),(0,d.jsx)(n.tbody,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"boolean"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"true"})})]})})]}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"keyboardverticaloffset",children:(0,d.jsx)(n.code,{children:"keyboardVerticalOffset"})}),"\n",(0,d.jsx)(n.p,{children:"This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases."}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.th,{children:"Type"}),(0,d.jsx)(n.th,{children:"Default"})]})}),(0,d.jsx)(n.tbody,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:"number"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"0"})})]})})]})]})}function h(e={}){let{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(c,{...e})}):c(e)}},43023(e,n,t){t.d(n,{R:()=>r,x:()=>a});var i=t(63696);let d={},o=i.createContext(d);function r(e){let n=i.useContext(o);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:r(e.components),i.createElement(o.Provider,{value:n},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.