React Native – Tips to Style Your App

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.
The style prop accepts plain JavaScript objects. Also, you can pass an array of style objects.

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 the CSS structure. And to create a hierarchy for our application that makes sense.

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 “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.

So, keep your styles external, like ‘Component.styles.js’ or ‘Component/styleSheet.js’

import { StyleSheet } from 'react-native'
export default StyleSheet.create({
  sectionTitle: { 
    fontFamily: "Roboto",
    fontSize: 24,
    fontWeight: 400 
  }
})

import styles from './styleSheet'
<Text style={styles.sectionTitle}>SomeText</Text>

Use inline styles if you need to calculate some property:

<Text style={{ color: DarkThemeFlag ? ‘white’ : ‘black’  }}>SomeText</Text>

Use array to pass multiple style objects to prop:

<Text style={[styles.sectionTitle, { color: DarkThemeFlag ? ‘white’ : ‘black’  }]}>SomeText</Text>

Also don’t forget  about ES6 destructuring to make your component style prop cleaner:

import styles from './styleSheet'
Const  titleStyle = { 
  ...styles.sectionTitle, 
  ...styles.featuredTitle, 
  color: DarkThemeFlag ? ‘white’ : ‘black’ 
}
<Text style={titleStyle}>SomeText</Text>

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)

From CSS to React Native StyleSheet

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

• React Native 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:"relative" – by default, all components have relative positioning. It’s also possible to use “absolute” for positioning out of the flow. Use position absolute helper StyleSheet.absoluteFill to expand component to parent edges – {position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}
• There is only one style for a background: backgroundColor
• There is a special component for establishing a picture as a background image: ImageBackground. Which is a wrapper component with the same properties as Image. Remember that you can pass styles for Image by imageStyle:

  <ImageBackground
    source={{ uri: path}}
    imageStyle={{left: 10, top: “5%”}}
  >
    <Text>Text With Background</Text>
  <ImageBackground>

• 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 accepts an array of transformation objects – transform: [{ rotateX: '45deg' } ,{translateY: 50}]
• 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.