Styling in React Native

Published Mar 15, 2019

Explore the best ways to style a React Native application

SaidHayani@
Originally published on Bits and Pieces

Mar 14

If you are just started with React Native or even you are experienced with it, you may find the styling a little bit challenging for the first time. that happens when you come especially from the web background and when you try to write React Native style as you usually do when you write CSS on the web and you find out what you expected. the method that React Native use for styling use CSS properties and it’s actually not the same as normal CSS. anyway, we are going to see how we do styling in React Native, in addition, to React Native style method styling method, we will explore the different ways to style a React Native application.

If you are new to React Native I wrote a guide that will take to what you need to get started with React Native check it out here!

Tip : Use Bit to easily share and reuse React components to build apps. It’s free and open source, so feel free to jump in and make your components reusable.

React Native style method

React Native give us two powerful ways by default to style our application :

Style props

You can add styling to your component using style propsyou simply add style props to your element it accepts an object of properties.

If you look at our code, we use the CSS properties with the capital letter, notice that some properties are not supported in react-native, an error will throw when you try to use any unsupported property, CSS3 animations are not supported instead React Native leave that to the animation API

React Native use Flexbox for layout, it’s a great tool to define the layout of your React Native app, elsewhere it’s not working as the same as in CSS but genuinely it’s easy to use and flexible.

React native flexbox is a great way to deal with the layout manipulation it so easy to design your layout but you need some basic understanding of flexbox to get your head it, you can check this great article for a better understanding.

Using StyleSheet

if you have a large code base or you want to set many properties to your elements, writing our styling rules directly inside style props will make our code more complex that’s why React Native give us another way that let us write a concise code using StyleSheet method:

First, make sure to import StyleSheet from react-native

import { StyleSheet} from 'react-native';

And try to assign some style properties using create method that takes an object of properties.

And then we pass the styles object to our component via the style props:

Our code looks more concise with StyleSheet method and the result still the same:

The styling method that React Native use has really great features that allow as to do some dynamic styling but it’s limited especially when it comes to applying some CSS properties that aren’t supported by React Native, for example, applying box-shadow to your components you may have to do the following :

const Card=()=>(

<View style={styles.card}>

<Text>Hello!</Text>
</View>
)

//our style

const styles=StyleSheer.create({

card:{
width:100,height:120,shadowColor: '#000000', shadowOffset: { width: 0, height: 3 }, shadowRadius: 5, shadowOpacity: 1.0} 
})

Whereas if we have to do the same and adding shadow in CSS:

.card{
width:100px,height:120px,box-shadow:0 0 5 #000000;
}

It’s easier to do it with CSS, we all would love to the same in React native, unfortunately, we can’t write CSS directly in React Native. but no worries the good news is styled-component support React Native 💣

styled-component in React Native

Yes, you can use styled-component with React native so you can write your styles in React Native as you write normal CSS. and it’s easy to include it in your project and it doesn’t need any linking just run this following command inside the root directory of your app to install it:

yarn add styled-components

And then simply start using it in your components:

So cool 😃. now you can totally write CSS with React Native and we give that to styled-components , I prefer to use styled-components to style my React Native elements the day since I found out that they support React Native it gives me more freedom to make the style I want so easily and you better use styled-components from now and the get the benefits of CSS to make nice UI it makes your code cleaner, you can separate your styles to a single file far from your components that will make your code more organized. in another hand you can use the great features that styled-components provide us such as theming and passing props so you can make a dynamic style like the following:

And here the result:

So awesome 💪!!

Sometimes you may want to draw some complex shapes that include circles and some specific style or gradient backgrounds for example (CSS gradient background not supported in React Native). you might think of using some methods that CSS provide like clip-path or any other method that allows you to make complex shapes in CSS, unfortunately, those methods are not supported in React Native at this time even if you use styled-components that lets you use the CSS properties into React Native at this situation, we have to use some alternative solutions like using SVG

Using react-native-svg to draw specific shapes

React Native communitybrings react-native-svg that allows you to use the SVG in React Native. you can add it to your project using yarn or npm:

// using yarn

yarn add react-native

// npm 
npm i react-native

And then make sure to link it by running the following command line:

react-native link react-native-svg

And now let’s start something with it:

Examples from react-native-svg docs

The examples above are from react-native-svg docs

As you see you can go so far with react-native-svg in making specific shapes and gradient backgrounds and the things you usually do with SVG. you can check the official docs to see the available options.

Wrapping up

You can still use the React Native style method to make what you need but it remains complex when we want to make some complex styles so you need to use some alternative tools like react-native-svg to do that, for normal styling I like to use styled components it makes doing things easier for me and I hope the React Native community bring more supports of other style methods that will give us the freedom of making things easily