5 Things to Know When Styling Your First React Native App

As a front end dev, you’ve been familiar with styling and building layouts for your sites and applications in the way of the web — using good ole’ CSS and HTML. However, when you dive into your first React Native app, you’ll notice things just aren’t the same — may even seem a bit strange. Divs and spans ? Gone. Traditional CSS? Nope. But don’t panic! Everything is going to be okay… because hey, it’s just JavaScript.

1. Styling is done using JavaScript

As a modern day front end dev, surely (er..hopefully) you’re familiar with JavaScript. Great news! That’s all you’ll need to style your React Native components! Really, your components are essentially just functions, and you’ll style them using JS objects. Although you’ll never use CSS syntax, JS style property names will mostly match what you’re used to with CSS. The primary difference however is that JS styling uses camel casing. Also, some components won’t accept certain style properties ( ex: <View /> can’t take a color prop ).

CSS:

.bg--slate { background-color: #252525 }

JavaScript:

bgSlate: {
   backgroundColor: "#252525",
}

2. Styles are scoped to their components

In the web world, your styles are scoped to the browser — with RN, it’s scoped to the component. The beauty about this is that you never really have to worry about conflicting styles throughout your application. Bad thing is that there are really no concept of selectors. You have to create your style, then apply it to any and every component that needs it.

base.js

fcWhite: { 
   color: "#FFFFFF", 
}

MyComponent.js

import base from "../base";
<Text style={base.fcWhite}>Christian Bryant</Text>
<Text style={base.fcWhite}>Loves React Native</Text>

3. Programmable

Remember when I mentioned that everything you do is in JavaScript? With that being the case, you are able to take full advantage of the language — your styles are completely programmable.

const lighten = (n) => `rgba(255,255,255,${n})`
console.log(lighten(1/2));  // rgba( 255,255,255,0.5 )

4. Fewer options compared to CSS

1. Measurement units are all in pixels
2. Some properties you’ve used in CSS don’t exist ( like transform origin )
3. No media queries ( but you can use the dimension object to check for viewport size)
4. No display rules - layouts are all built using flexbox

5. Some extra tips

There a few other things to keep in mind when going about styling your React Native app. First, have a base style sheet. For shared styles it’s always a good idea to have a common base to go from that you can import to other stylesheets or components with.

Next, your UI components should encapsulate their own specific styles. This is important for when it comes time to update or refactor your component, you don’t have to worry about side effects throughout the rest of you app.

Lastly, make your components as reusable as possible. For example, say you have two variations of buttons in your app. One is blue, and one is red, but everything else like border radius, width, and height are all the same. Instead of creating a ‘redButton.js’ and ‘blueButton.js’ component, create a single button component and just pass the color in as a prop.

Transitioning from styling for the web to React Native can feel a bit strange, but I hope this quick read helps you feel a bit more comfortable, and that you can take away something to apply to your first project. At the end of the day, remember, it’s just JavaScript. If you have any further questions or feedback you can find me on twitter @rvawebd00d.