{"id":548,"date":"2019-05-03T08:11:17","date_gmt":"2019-05-03T06:11:17","guid":{"rendered":"http:\/\/productcrafters.io\/blog\/?p=548"},"modified":"2026-01-19T23:15:51","modified_gmt":"2026-01-19T21:15:51","slug":"react-native-tips-to-style-you-app","status":"publish","type":"post","link":"https:\/\/stage.productcrafters.io\/blog\/react-native-tips-to-style-you-app\/","title":{"rendered":"React Native – Tips to Style Your App"},"content":{"rendered":"

Simply about React Native styling<\/h3>\n

With React Native, you don’t have to use a special language or syntax for defining styles. You can just style your application using JavaScript. All of the core components accept a prop named style<\/code>.
\nThe style prop accepts plain JavaScript objects. Also, you can pass an array of style objects.<\/p>\n

React Native uses Facebook\u2019s Yoga<\/span><\/a> layout engine, which is based on the flexbox spec<\/span><\/a> and takes from CSS rule names. Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with\u00a0flexDirection<\/code>\u00a0defaulting to\u00a0column<\/code>\u00a0instead of\u00a0row<\/code>, and the\u00a0flex<\/code>parameter only supporting a single number.<\/p>\n

Use camelCase instead of kebab-case for style properties. Also instead of pixels, React Native uses \u201cunits\u201d that get converted into pixels, related pixels. We know that all our mobile devices have screens with different pixel density, even though we always work with relative pixels.<\/p>\n

CSS:<\/p>\n

.section-title {\r\n  font-family: Roboto;\r\n  font-size: 24px;\r\n  font-weight: 400;\r\n}\r\n<\/code><\/pre>\n
React Native:<\/p>\n
const styles = StyleSheet.create({\r\n  sectionTitle: { \r\n    fontFamily: \"Roboto\", \r\n    fontSize: 24, \r\n    fontWeight: 400 \r\n  } \r\n}); <\/code><\/pre>\n
About CSS size values… In React Native, \u201cunits\u201d are everywhere. There is no em<\/code>, rem<\/code>, vm<\/code>, vh<\/code>, pt<\/code> and others, only numbers. Sometimes we can also use percents, just like with dimension properties. For example, a string value is \u2018100%\u2019 (take note of using quote marks). If you want your old CSS units, you can write your own CSS helpers, \u2019cause everything there is Javascript.<\/p>\n
So\u2026 Yes, if a value is not a number, it must be a string.<\/p>\n
const styles = StyleSheet.create({\r\n  modalCloseButton: {\r\n    position: \"absolute\",\r\n    top: \"5%\",\r\n    right: 5,\r\n    width: 30,\r\n    height: 30,\r\n    zIndex: 3,\r\n  }\r\n});<\/code><\/pre>\n
Styles structuring<\/h3>\n
When working with the web, there are a countless number of ways to organize the CSS structure. And to create a hierarchy for our application that makes sense.<\/p>\n
\"Styles<\/p>\n
Using React Native, we have to think of styling in a slightly different manner. As there is no classic DOM where we can apply styles to all default tags or specify styles only for tags inside this \u201cparent\u201d tag \u2013 there is no inheritance. Instead of writing one large StyleSheet, we need to write small bite-sized styles. This means that everything that can be reused should be a component.<\/p>\n
For styles that are shared among many components, it\u2019s a good idea to write a common stylesheet that can be imported into other stylesheets.<\/p>\n
So, keep your styles external, like \u2018Component.styles.js\u2019 or \u2018Component\/styleSheet.js\u2019<\/p>\n
import { StyleSheet } from 'react-native'\r\nexport default StyleSheet.create({\r\n  sectionTitle: { \r\n    fontFamily: \"Roboto\",\r\n    fontSize: 24,\r\n    fontWeight: 400 \r\n  }\r\n})\r\n\r\nimport styles from '.\/styleSheet'\r\n<Text style={styles.sectionTitle}>SomeText<\/Text><\/code><\/pre>\n
Use inline styles if you need to calculate some property:<\/span><\/p>\n
<Text style={{ color: DarkThemeFlag ? \u2018white\u2019 : \u2018black\u2019  }}>SomeText<\/Text><\/code><\/pre>\n
Use array to pass multiple style objects to prop:<\/span><\/p>\n
<Text style={[styles.sectionTitle, { color: DarkThemeFlag ? \u2018white\u2019 : \u2018black\u2019  }]}>SomeText<\/Text><\/code><\/pre>\n
Also don\u2019t forget\u00a0 about ES6 destructuring to make your component style prop cleaner:<\/span><\/p>\n
import styles from '.\/styleSheet'\r\nConst  titleStyle = { \r\n  ...styles.sectionTitle, \r\n  ...styles.featuredTitle, \r\n  color: DarkThemeFlag ? \u2018white\u2019 : \u2018black\u2019 \r\n}\r\n<Text style={titleStyle}>SomeText<\/Text><\/code><\/pre>\n
All styles are divided into 2 main groups:<\/b><\/p>\n