1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["15910"],{38483(e,t,n){n.r(t),n.d(t,{metadata:()=>s,default:()=>h,frontMatter:()=>i,contentTitle:()=>r,toc:()=>c,assets:()=>l});var s=JSON.parse('{"id":"style","title":"Style","description":"With React Native, you style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color.","source":"@site/versioned_docs/version-0.81/style.md","sourceDirName":".","slug":"/style","permalink":"/docs/0.81/style","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/style.md\\"},{\\"label\\":\\"Edit page for 0.81 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.81/style.md\\"}]","tags":[],"version":"0.81","lastUpdatedAt":1780494561000,"frontMatter":{"id":"style","title":"Style"},"sidebar":"docs","previous":{"title":"Upgrading to new versions","permalink":"/docs/0.81/upgrading"},"next":{"title":"Height and Width","permalink":"/docs/0.81/height-and-width"}}'),a=n(62540),o=n(43023);let i={id:"style",title:"Style"},r,l={},c=[{value:"Known issues",id:"known-issues",level:2}];function d(e){let t={a:"a",code:"code",div:"div",h2:"h2",li:"li",p:"p",ul:"ul",...(0,o.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(t.p,{children:["With React Native, you style your application using JavaScript. All of the core components accept a prop named ",(0,a.jsx)(t.code,{children:"style"}),". The style names and ",(0,a.jsx)(t.a,{href:"/docs/0.81/colors",children:"values"})," usually match how CSS works on the web, except names are written using camel casing, e.g. ",(0,a.jsx)(t.code,{children:"backgroundColor"})," rather than ",(0,a.jsx)(t.code,{children:"background-color"}),"."]}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"style"})," prop can be a plain old JavaScript object. That's what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles."]}),"\n",(0,a.jsxs)(t.p,{children:["As a component grows in complexity, it is often cleaner to use ",(0,a.jsx)(t.code,{children:"StyleSheet.create"})," to define several styles in one place. Here's an example:"]}),"\n",(0,a.jsx)(t.div,{className:"snack-player","data-snack-name":"Style","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%20View%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20LotsOfStyles%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20return%20(%5Cn%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.red%7D%3Ejust%20red%3C%2FText%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.bigBlue%7D%3Ejust%20bigBlue%3C%2FText%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.bigBlue%2C%20styles.red%5D%7D%3EbigBlue%2C%20then%20red%3C%2FText%3E%5Cn%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.red%2C%20styles.bigBlue%5D%7D%3Ered%2C%20then%20bigBlue%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%20marginTop%3A%2050%2C%5Cn%20%20%7D%2C%5Cn%20%20bigBlue%3A%20%7B%5Cn%20%20%20%20color%3A%20'blue'%2C%5Cn%20%20%20%20fontWeight%3A%20'bold'%2C%5Cn%20%20%20%20fontSize%3A%2030%2C%5Cn%20%20%7D%2C%5Cn%20%20red%3A%20%7B%5Cn%20%20%20%20color%3A%20'red'%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20LotsOfStyles%3B%22%7D%7D","data-snack-dependencies":"react-native-safe-area-context","data-snack-platform":"web","data-snack-supported-platforms":"ios,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,a.jsxs)(t.p,{children:["One common pattern is to make your component accept a ",(0,a.jsx)(t.code,{children:"style"}),' prop which in turn is used to style subcomponents. You can use this to make styles "cascade" the way they do in CSS.']}),"\n",(0,a.jsxs)(t.p,{children:["There are a lot more ways to customize the text style. Check out the ",(0,a.jsx)(t.a,{href:"/docs/0.81/text",children:"Text component reference"})," for a complete list."]}),"\n",(0,a.jsxs)(t.p,{children:["Now you can make your text beautiful. The next step in becoming a style expert is to ",(0,a.jsx)(t.a,{href:"/docs/0.81/height-and-width",children:"learn how to control component size"}),"."]}),"\n",(0,a.jsx)(t.h2,{id:"known-issues",children:"Known issues"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"https://github.com/facebook/react-native/issues/29308#issuecomment-792864162",children:"react-native#29308"}),": In some cases React Native does not match how CSS works on the web, for example the touch area never extends past the parent view bounds and on Android negative margin is not supported."]}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},43023(e,t,n){n.d(t,{R:()=>i,x:()=>r});var s=n(63696);let a={},o=s.createContext(a);function i(e){let t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),s.createElement(o.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.