https://reactnative.dev/assets/js/87bf071e.30160afd.js

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["1114"],{604(e,n,t){t.r(n),t.d(n,{metadata:()=>s,default:()=>h,frontMatter:()=>l,contentTitle:()=>r,toc:()=>o,assets:()=>i});var s=JSON.parse('{"id":"checkbox","title":"\u274C CheckBox","description":"Removed. Use one of the community packages instead.","source":"@site/versioned_docs/version-0.78/checkbox.md","sourceDirName":".","slug":"/checkbox","permalink":"/docs/0.78/checkbox","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/checkbox.md\\"},{\\"label\\":\\"Edit page for 0.78 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.78/checkbox.md\\"}]","tags":[],"version":"0.78","lastUpdatedAt":1757518175000,"frontMatter":{"id":"checkbox","title":"\u274C CheckBox"}}'),c=t(62540),d=t(43023);let l={id:"checkbox",title:"\u274C CheckBox"},r,i={},o=[{value:"Example",id:"example",level:2},{value:"Props",id:"props",level:2},{value:"<code>disabled</code>",id:"disabled",level:3},{value:"<code>onChange</code>",id:"onchange",level:3},{value:"<code>onValueChange</code>",id:"onvaluechange",level:3},{value:"<code>testID</code>",id:"testid",level:3},{value:"<code>value</code>",id:"value",level:3}];function a(e){let n={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,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(n.blockquote,{children:["\n",(0,c.jsxs)(n.p,{children:[(0,c.jsx)(n.strong,{children:"Removed."})," Use one of the ",(0,c.jsx)(n.a,{href:"https://reactnative.directory/?search=checkbox",children:"community packages"})," instead."]}),"\n"]}),"\n",(0,c.jsx)(n.p,{children:"Renders a boolean input (Android only)."}),"\n",(0,c.jsxs)(n.p,{children:["This is a controlled component that requires an ",(0,c.jsx)(n.code,{children:"onValueChange"})," callback that updates the ",(0,c.jsx)(n.code,{children:"value"})," prop in order for the component to reflect user actions. If the ",(0,c.jsx)(n.code,{children:"value"})," prop is not updated, the component will continue to render the supplied ",(0,c.jsx)(n.code,{children:"value"})," prop instead of the expected result of any user actions."]}),"\n",(0,c.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,c.jsx)(n.div,{className:"snack-player","data-snack-name":"CheckBox Component Example","data-snack-description":"Example usage","data-snack-files":"%7B%22App.js%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7BCheckBox%2C%20Text%2C%20StyleSheet%2C%20View%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BisSelected%2C%20setSelection%5D%20%3D%20useState(false)%3B%5Cn%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.checkboxContainer%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CCheckBox%5Cn%20%20%20%20%20%20%20%20%20%20value%3D%7BisSelected%7D%5Cn%20%20%20%20%20%20%20%20%20%20onValueChange%3D%7BsetSelection%7D%5Cn%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.checkbox%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.label%7D%3EDo%20you%20like%20React%20Native%3F%3C%2FText%3E%5Cn%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%3CText%3EIs%20CheckBox%20selected%3A%20%7BisSelected%20%3F%20'%F0%9F%91%8D'%20%3A%20'%F0%9F%91%8E'%7D%3C%2FText%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%20alignItems%3A%20'center'%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20checkboxContainer%3A%20%7B%5Cn%20%20%20%20flexDirection%3A%20'row'%2C%5Cn%20%20%20%20marginBottom%3A%2020%2C%5Cn%20%20%7D%2C%5Cn%20%20checkbox%3A%20%7B%5Cn%20%20%20%20alignSelf%3A%20'center'%2C%5Cn%20%20%7D%2C%5Cn%20%20label%3A%20%7B%5Cn%20%20%20%20margin%3A%208%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,web","data-snack-theme":"light","data-snack-preview":"true","data-snack-loading":"lazy","data-snack-device-appearance":"light","data-snack-device-frame":"false"}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h1,{id:"reference",children:"Reference"}),"\n",(0,c.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,c.jsxs)(n.p,{children:["Inherits ",(0,c.jsx)(n.a,{href:"view#props",children:"View Props"}),"."]}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h3,{id:"disabled",children:(0,c.jsx)(n.code,{children:"disabled"})}),"\n",(0,c.jsxs)(n.p,{children:["If true the user won't be able to toggle the checkbox. Default value is ",(0,c.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,c.jsxs)(n.table,{children:[(0,c.jsx)(n.thead,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.th,{children:"Type"}),(0,c.jsx)(n.th,{children:"Required"})]})}),(0,c.jsx)(n.tbody,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.td,{children:"bool"}),(0,c.jsx)(n.td,{children:"No"})]})})]}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h3,{id:"onchange",children:(0,c.jsx)(n.code,{children:"onChange"})}),"\n",(0,c.jsx)(n.p,{children:"Used in case the props change removes the component."}),"\n",(0,c.jsxs)(n.table,{children:[(0,c.jsx)(n.thead,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.th,{children:"Type"}),(0,c.jsx)(n.th,{children:"Required"})]})}),(0,c.jsx)(n.tbody,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.td,{children:"function"}),(0,c.jsx)(n.td,{children:"No"})]})})]}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h3,{id:"onvaluechange",children:(0,c.jsx)(n.code,{children:"onValueChange"})}),"\n",(0,c.jsx)(n.p,{children:"Invoked with the new value when the value changes."}),"\n",(0,c.jsxs)(n.table,{children:[(0,c.jsx)(n.thead,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.th,{children:"Type"}),(0,c.jsx)(n.th,{children:"Required"})]})}),(0,c.jsx)(n.tbody,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.td,{children:"function"}),(0,c.jsx)(n.td,{children:"No"})]})})]}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h3,{id:"testid",children:(0,c.jsx)(n.code,{children:"testID"})}),"\n",(0,c.jsx)(n.p,{children:"Used to locate this view in end-to-end tests."}),"\n",(0,c.jsxs)(n.table,{children:[(0,c.jsx)(n.thead,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.th,{children:"Type"}),(0,c.jsx)(n.th,{children:"Required"})]})}),(0,c.jsx)(n.tbody,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.td,{children:"string"}),(0,c.jsx)(n.td,{children:"No"})]})})]}),"\n",(0,c.jsx)(n.hr,{}),"\n",(0,c.jsx)(n.h3,{id:"value",children:(0,c.jsx)(n.code,{children:"value"})}),"\n",(0,c.jsxs)(n.p,{children:["The value of the checkbox. If true the checkbox will be turned on. Default value is ",(0,c.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,c.jsxs)(n.table,{children:[(0,c.jsx)(n.thead,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.th,{children:"Type"}),(0,c.jsx)(n.th,{children:"Required"})]})}),(0,c.jsx)(n.tbody,{children:(0,c.jsxs)(n.tr,{children:[(0,c.jsx)(n.td,{children:"bool"}),(0,c.jsx)(n.td,{children:"No"})]})})]})]})}function h(e={}){let{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,c.jsx)(n,{...e,children:(0,c.jsx)(a,{...e})}):a(e)}},43023(e,n,t){t.d(n,{R:()=>l,x:()=>r});var s=t(63696);let c={},d=s.createContext(c);function l(e){let n=s.useContext(d);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:l(e.components),s.createElement(d.Provider,{value:n},e.children)}}}]);