In this blog you will learn about styling in react native. If you’re new to React Native go to this link and learn how to install and setup your application.

After doing that you will see start screen of our application like below.

Start-Screen
Start Screen

Now we can start styling our app. Make sure your packger is running on port 8081. If not then go to your project folder and run following command.

project/AwesomeProject $ react-native start

Now we can update our design and see changes by refreshing screen.

Let’s start styling our application. Here is our application screen will look like after we are done styling.

App-Screen
App Screen

This design is similar to Pinterest app design.  Just in header instead of icons I’ve used text.

Setup View

At first, our screen will look like we’ve shown above in first image. Now open index.android.js file located in root directory of your folder. Update component and styles with this code.

import React, { Component } from ‘react’;

import {

 AppRegistry,

 StyleSheet,

 Text,

 View

} from ‘react-native’;

export default class AwesomeProject extends Component {

 render() {

   return (

     <View style={styles.container}>

       <Text>Hello world</Text>

     </View>

   );

 }

}

const styles = StyleSheet.create({

 container: {

   flex: 1,

   justifyContent: ‘center’,

   alignItems: ‘center’,

   backgroundColor: ‘#F5FCFF’,

 },

});

AppRegistry.registerComponent(‘AwesomeProject’, () => AwesomeProject);

Here we are using flex container to cover entire area for screen. Other properties are like normal css property but in React native we write background-color to backgroundColor ( camelcase format).

After changes our app will look like this.

App-Screen
App Screen

Create New component

It is better to use different components for different results. Like we can use three separate components like header, footer and content in our app. But in this project we will use single component called layout.

Let’s create new folder app in our root directory. Every component we want to create will store in this folder.

Create components folder within app folder and then create Layout.js file within components folder. So your app folder will look like this.

app

.. components

 .. Layout.js

Now in Layout.js file add following code.

import React, { Component } from ‘react’;

import {

 AppRegistry,

 StyleSheet,

 Text,

 View

} from ‘react-native’;

export class Layout extends Component {

 render() {

   return (

     <View>

       <Text>Hello world</Text>

     </View>

   );

 }

}

const styles = StyleSheet.create({

});

AppRegistry.registerComponent(‘AwesomeProject’, () => Layout);

Here we’re just creating another component like we have in index.android.js file. Now to use this component we need to import this component in our index.android.js file. Add following code to import component.

import {Layout} from ‘./app/components/Layout

Now remove  <Text>Hello world</Text> and replace with <Layout />. By this you can import all layout from Layout.js file to index.android.js file. Output will be the same since we are just rendering text from our Layout file.

Note: Every time you create a new component make sure to return them within <View> element, otherwise it will give you an error.

Styling Component

We will use flexbox styling for our components. You can find more details on flexbox here.

First let’s create Views for our layout so we can style it afterwards. Replace your view by following code.

<View style={styles.PinContainer}>

         <View style={styles.PinHeader}>

             <View style={styles.UtilityNav}>

                 <Text>Back</Text>

                 <Text>Heart</Text>

                 <Text>Share</Text>

                 <Text>More</Text>

             </View>

             <View style={styles.PinButtonContainer}>

                 <View style={styles.PinButton}>

                     <Text style={styles.PinButtonText}>Save</Text>

                 </View>

             </View>

         </View>

         <View style={styles.PinContent}>

         </View>

         <View style={styles.PinMeta}>

             <View style={styles.PinMetaTextContainer}>

                 <Text style={styles.PinMetaText}>Saved from</Text>

                 <Text style={[styles.PinMetaText, styles.TextBold]}>website.com</Text>

             </View>

             <View style={styles.PinButtonContainer}>

                 <View style={[styles.PinButton , styles.PinUtilityButton]}>

                     <Text style={[styles.PinButtonText, styles.PinUtilityButtonText]}>Save</Text>

                 </View>

             </View>

         </View>

         <View style={styles.PinUser}>

             <View style={styles.pinUserAvatar}>

             </View>

             <View style={styles.PinUserContainer}>

                 <Text style={styles.PinUserText}>

                     <Text style={styles.TextBold}>User Name</Text> Save to<Text style={styles.TextBold}> space</Text>

                 </Text>

                 <Text style={styles.PinUserText}>Description </Text>

             </View>

         </View>

       </View>

This is basic structure for our layout. Now to we can apply styles for our component by StyleSheet.create Object. We can assign this object to a variable and then use it in our component.

Now add following code in our your styles object

const styles = StyleSheet.create({

   PinContainer:{

       flex: 1,

       alignSelf: ‘stretch’

   },

   PinHeader : {

       backgroundColor: ‘white’,

       flexDirection : ‘row’,

       alignItems: ‘flex-end’,

       justifyContent: ‘space-between’,

       height: 66,

       padding: 8

   },

   UtilityNav:{

       flexDirection : ‘row’,

       justifyContent: ‘space-between’,

       flex: 1

   },

   PinButton:{

       flexDirection : ‘row’,

       backgroundColor: ‘red’,

       padding: 8,

       borderRadius: 6

   },

   PinButtonText:{

       color : ‘#FFFFFF’

   },

   PinButtonContainer: {

       flex:1,

       alignItems : ‘flex-end’

   }

});

First we created flexbox with alignment of ‘stretch’ which will cover our screen. Then in PinHeader we have declared flex direction ‘row’ so it will add data in left to right order by default. flex-end property will set component left and right side at end. Space-between will provide space between components and assign them in in-line format. And other properties are normal css properties. Now after this our screen should look like this.

App Screen
App Screen

Now add following code to display our content and PinMeta with style.

   PinContent:{

       flex:3,

       justifyContent: ‘center’,

       alignItems: ‘center’,

       paddingLeft: 8,

       paddingRight: 8

   },

   ImagePlaceHolder:{

       flex:1,

       alignSelf: ‘stretch’,

       borderRadius: 6,

       width: 395

   },

   PinMeta:{

       flex:1,

       backgroundColor:’#FFFFFF%

Want to work with us? We're hiring!