Styling in React Native

When you first jump into React Native, styling can seem a little confusing; it’s in JavaScript, it has some but not all features of css, certain styles can only be used on certain components, and the list goes on. I’m aiming to be of aid to the initial confusion. Instead of going too deep into how React Native styles work, I want to keep this post as pragmatic as possible. I’ll simply share some practical points that I would have wanted to know, prior to styling in React Native.

– Use StyleSheet

You can write your styles inline but that’s usually not the best idea. There are times to take advantage of inline styles but when in doubt, use StyleSheet, import { StyleSheet } from 'react-native'. It’s often worth splitting your styles from your component code and importing them into your component. Using StyleSheet is an easy way to handle the maintainability of your front-end codebase. Too many inline styles will cause bloated component code and unfortunately you can’t just feed it some Activia*. Example:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  redText: {
    color: 'red'
  },
});

– Use Flexbox

If there was one thing I would want you to take from this article, it would be to fully invest in Flexbox. As much as I would advocate it on the web, even more so on mobile. App design and Flexbox go hand in hand, and you won’t be using media queries so let Flexbox handle that for you. It makes spacing extremely simple, it works across a plethora of screen sizes, and it allows you to create powerful interface designs with a lot less code. Here is a great resource to help you dive into Flexbox.

– Using Dimensions

You can pull Dimensions from React Native, import { Dimensions } from 'react-native'. This allows you to get the window width and height of the users device which can be very helpful in certain cases. Example: const { width, height } = Dimensions.get('window'). Be careful with this, if you find yourself using dimensions too much it probably means you aren’t leveraging Flexbox well enough.

– Use constants

Much like using variables in standard CSS pre-processors, I’d recommend a similar strategy in React Native styling. It will allow you to define certain values in one location and re-use it throughout your styles. It’s massively beneficial when it comes to the maintainability of your styles. To implement this, simply import an object composed of styling properties. You could use this for anything, but the most common use cases are likely colors and window dimensions, as mentioned above. Example:

export default const Colors = {
  brandBlue: #6898ee,
  brandYellow: #ebe55a,
  black: #000,
};

import { Text } from 'react-native';
import Colors from './constants/Colors';

export default const Brand = () => <Text style={{ color: Colors.brandBlue }}>Brand</Text>;

– Using inline styles

One of the benefits of writing styles in JavaScript is having easy access to your applications state or your components props. When passing styles into react native components you can simply pass in an array of styles. I would tend to pass in the basic styles for that component and then pass in state dependent styles in object form. Example: <Text style={[styles.text, { color: this.props.color }]} />

– Platform specific styles

If you need to use different styles for iOS or Android you can control this in this your StyleSheet using Platform, import { Platform } from 'react-native'. Once I show you a quick example, it’s pretty clear what this does. Example:

import { Platform, StyleSheet } from 'react-native'
const styles = StyleSheet.create({
  container: {
    fontFamily: 'Arial',

    ...Platform.select({
      ios: {
        color: '#333',
      },
      android: {
        color: '#ccc',
      },
    }),
  },
});

Gotchas & quick notes

• React Native components accepts specific styles, for example View won’t accept a colorproperty. The RN warnings are very helpful here.
• React Native styles don’t have all the CSS properties you might be used to having on the web.
• Media queries aren’t built into React Native, #istandwithflexbox.
• You can’t pass in a plain JavaScript object into a component.
• Use PixelRatio to make a perfect circle when using border radius.

  Ref: https://www.okgrow.com/posts/react-native-styling-tips