Understanding styling in React Native

Yashish Dua
Sep 3, 2018 · 4 min read

In this article, I will talk about the two most popular ways of styling React Native Apps — StyleSheet and styled-components. We will look at how to structure the style objects and I will share a few tips!

Image for post
Image for post
Just found this cool.

Everyone started with StyleSheet API of React Native to create styles and most of the wonderful react native developers across the globe still think this is the best way to create styles. Let’s first see a basic example.

export default class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.header}>Basic Header</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
paddingVertical: 10
},
header: {
fontSize: 12,
fontFamily: 'Cochin'
}
})

A StyleSheet is an abstraction similar to CSS StyleSheets.

  1. Instead of creating a new style object every time, StyleSheet helps to create style objects with an ID which is further used to reference instead rendering it again.

Must know and should follow things.

# React Native use camelCase instead of kebab-case for style properties

# Instead of pixels, React Native uses “units” that get converted into pixels

# Get screen resolution using:

fullHeight: Dimensions.get('window').height,
fullWidth: Dimensions.get('window').width

# You can use code inside style:

let iconSize = 24;
export default StyleSheet.create({
icon: {
height: iconSize,
width: iconSize,
borderRadius: iconSize / 2
}
});

# Reuse Basic Style Objects:

/* textMixins.js */ 

export const errorText = {
fontWeight: "700",
color: "red",
};
/* formStyles.js */

import { errorText } from "textMixins";

export default StyleSheet.create({
formErrorMessage: {
...errorText,
fontSize: 22,
},
fieldErrorMessage: {
...errorText,
fontSize: 18,
},
});

# Package which provides helper functions for the efficient use of colors: https://www.npmjs.com/package/color

# Flexbox!!!! (Read more from here)

Better Architecture of Styles

There are always some basic styles or components which we use over and over again somewhere in our project. The first step of better architecture is to define a base style and reuse it whenever required. This helps in maintaining a quality code base, and even in easy refactoring.

// app/styles/base.js

import {StyleSheet, Dimensions} from 'react-native'

export const dimensions = {
fullHeight: Dimensions.get('window').height,
fullWidth: Dimensions.get('window').width
}

export const colors = {
primary: '#226B74',
secondary: '#254B5A',
tertiary: '#5DA6A7'
}

export const padding = {
sm: 10,
md: 20,
lg: 30,
xl: 40
}

export const fonts = {
sm: 12,
md: 18,
lg: 28,
primary: 'Cochin'
}

Now we can import this style base.js to our component.

import {colors, fonts, padding, dimensions} from '../../styles/base.js'export default class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.header}>Basic Header</Text>
<Text style={styles.section}>Basic Section Text</Text>
</View>
)
}

const styles = StyleSheet.create({
container: {
paddingHorizontal: padding.sm,
paddingVertical: padding.lg,
width: dimensions.fullWidth
},
header: {
fontSize: fonts.lg,
fontFamily: fonts.primary
},
section: {
paddingVertical: padding.lg,
paddingHorizontal: padding.xl
}
})

Make sure, you define only those styles into the base which are basic attributes across the project. All component specific style should be inside directory where component is lying.

Styled Components

Let’s move onto another big thing in the world of styling in React.js that is styled-components.

Styled Components is a CSS-in-JS library that pushes developers to write CSS per component. It’s very unintuitive for developers are using CSS to write styles in JS which follow camelCase. Styled Components brings back the CSS feel to the developers. Here is a basic example:

Image for post
Image for post
Screen shot from styled-component documentation

styled-components utilizes tagged template literals to style your components.

It removes the mapping between components and styles. This means that when you’re defining your styles, you’re actually creating a normal React component, that has your styles attached to it. Let’s look at some pros ;)

# You can pass props to the styled components

const Input = styled.input`
padding: 0.5em;
margin: 0.5em;
color: palevioletred;
background: papayawhip;
border: none;
border-radius: 3px;
`;

// Render a styled text input with a placeholder of "@mxstbr", and one with a value of "@geelen"
render(
<div>
<Input placeholder="@mxstbr" type="text" />
<Input value="@geelen" type="text" />
</div>
);

# Custom Components using StyleSheet vs styled-components

One method of sharing styles in React Native is through creating your own component to reuse it.

/* header.js */  

const styles = StyleSheet.create({
text: {
fontFamily: "UnreadableSans",
fontSize: 24,
fontWeight "500",
},
});

class Header extends React.Component {
render() {
return (
<Text
style={ styles.text }
{ ...this.props }
/>
);
}
}

This component can be used further as:

import Header from "header";    

class Home extends React.Component {
render() {
return (
<View>
<Header>Article heading</Header>
</View>
);
}
}

This over 20 lines of code can be replaced with this using styled-components and the result achieved would be same:

import styled from "styled-components";   const Header = styled.Text`
font-family: "UnreadableSans";
font-size: 24em;
`;

class Home extends React.Component {
render() {
return (
<View>
<Header>Article heading</Header>
</View>
);
}
}

What do you think?

What do you think about this article? How do you style your React Native apps? Write your perspective and ideas in the comments section below.

Follow me over my personal blog to stay updated!

If you are interested in mentorship sessions,

MindOrks

Our community publishes stories worth reading on Android…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store