Styling and laying out your components

Applying CSS styles to your app is not difficult, but you'll have to un-learn and re-learn some of the following concepts that are just plain different in RN, when compared to HTML:

  • In web pages, CSS style is global, and applies to all tags; in RN, styling is done locally on a component-by-component basis; there is no global styling. Also, you don't need selectors, because styles are directly associated to components.
  • There is no inheritance of styles: in HTML, children inherit some of their parent's style by default, but in RN, if you want this to happen, you'll have to provide the specific desired style to the children. However, if you wish, you can export styles and import them elsewhere.
  • RN styles are completely dynamic: you can use all JS functions to compute whichever values you wish to apply. You could even alter styles on the fly, so an app background color could be lighter during the day, gradually changing to darker colors at night, as time goes by. You won't need anything like SASS or LESS; you can do math and use constants, because that's pure JS.

There are some other minor differences as well:

  • RN uses camelCase style (such as fontFamily) instead of CSS's kebab-case style (for example, font-family); that's easy enough to get used to. Also, not all usual CSS properties may be present (it depends on specific components), and some may be restricted as to their possible values.
  • RN has only two possible measurements: either percentages, or density independent pixels (DP). DP aren't the classic screen pixels from the web; rather, they work well with every device, independently of their pixel density or pixels per inch (ppi), thus guaranteeing a common look for all screens.
  • The layout is done with flex, so positioning elements is simpler. You may not have the full set of options that are available for web pages, but what you get is absolutely enough for any kind of layout.

There's much to read about styling in RN (for starters, see https://facebook.github.io/react-native/docs/style for an introduction, and https://facebook.github.io/react-native/docs/height-and-width and https://facebook.github.io/react-native/docs/flexbox for sizing and positioning elements), so here, in this recipe, we'll look at some specific examples by styling our countries-and-regions app.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.147.87