fbpx

React Native – Tips to Style Your App

Reading Time: 3 minutes

Simply about React Native styling.

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.
React Native uses Facebook’s Yoga layout engine, which is based on the flexbox spec 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 flexDirection defaulting to column instead of row, and the flexparameter only supporting a single number.

Use camelCase instead of kebab-case for style properties. Also instead of pixels, React Native uses “units” 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.

CSS:

.section-title {
  font-family: Roboto;
  font-size: 24px;
  font-weight: 400;
}

React Native:

const styles = StyleSheet.create({
  sectionTitle: { fontFamily: "Roboto", fontSize: 24, fontWeight: 400 } }); 

About CSS size values… In React Native, “units” are everywhere. There is no em, rem, vm, vh, pt and others, only numbers. Sometimes we can also use percents, just like with dimension properties. For example, a string value is ‘100%’ (take note of using quote marks). If you want your old css units, you can write your own css helpers, ’cause everything there is Javascript.

So… Yes, if a value is not a number, it must be a string.

const styles = StyleSheet.create({
  modalCloseButton: {
    position: "absolute",
    top: "5%",
    right: 5,
    width: 30,
    height: 30,
    zIndex: 3,
  }
});

Styles structuring

When working with the web, there are a countless number of ways to organize our CSS structure. And to create a hierarchy for our application that makes sense.

In 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 defaults tags or specify styles only for tags inside this “parent” tag – 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.

For styles that are shared among many components, it’s a good idea to write a common stylesheet that can be imported into other stylesheets.

All styles are divided into 2 main groups:

  • View Style Props (general styles for all components)
  • Text Style Props (styles for “Text” component, as this is the only component where we can place text information)

There are many similar to CSS features, though there are also a few differences:

  • Styles are not inherited from parent component (except special Text components which can be attached and which inherit font styles one from another).
  • All elements are displayed only as flex, by default, it works like flexDirection:'column'. When adding flex styling (like flexDirection, justifyContent, alignItems and others), it will start working almost as usual flex.
  • Position – by default, all components have positioning relative. It’s also possible to use “absolute” for positioning out of the flow.
  • There is only one style for a background: backgroundColor
  • There is a special component for establishing a picture as a background: BackgroundImage
  • There are 2 ways to align the text: with textAlign for Text components or with flex capabilities for all others like align Text component on its parent.
  • It’s still possible to use percents for width, height, margin, padding, top, right, bottom, left – left:’50%’
  • transform, and in particular translateX, translateY possesses only digital value
  • The border has only ‘solid’ line style, so in React Native there is no “border-style” property
  • There are no shortcases like margin: 10px 5px; but we can use marginVertical: 10, marginHorizontal: 5, these shortcuts also work for padding

To avoid the appearance of a graphical artifact.

The documentation suggests rounding digital values to real pixel values. It can be accomplished with tools provided by React Native.

  • If you do calculations and get fractional numbers – round everything with the help of PixelRation.roundToNearestPixel().
  • If you need the thinnest width that can be displayed on the screen (physical pixel size) – use StyleSheet.hairlineWidth.
 

About the author

React Developer @ ProductCrafters