React-Native: Styling Forms — The Easy Way

Hello, and welcome back.

Welcome Back? — Yes, This is a Series of posts on React-Native and how to work with it in the simplest form. Don’t worry you haven’t missed much. You can catch up with the first post here: React-Native: The Easy Way.

Alright!. Let's move on with the second post on React-Native. This time we will be looking at Project Structure, basic UI elements, and how to style those elements. Let's Get Started!

In the previous post, we started off by creating a React-Native project using expo. Now let's take a look at how the project is structured and how to navigate through those files.

I opened my project in VS Code. You can choose your favorite code editor or choose among some well-known ones such as sublime, atom etc.

App.js ( more details later)

This is the file we will be most concerned with for this post. This is the starting point of our Native application.

To put it simply, it is like the index.html page for our app.

Assets

The assets folder is used to store in-app assets that would be used to inside the application. For example, in this post, we will be using several assets such as a background which is an image and hence will be stored in the assets folder.

node_modules

This folder contains all the packages and libraries or dependencies that you have installed to work along with inside React-Native Application. All the existing packages can be seen under package.json file.

package.json

In this file under dependencies, you can see all the libraries that our app is currently using, as of now we have :

"dependencies": {
"expo": "^31.0.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz" 
}

App.json

This file consists of much more intricate details like the version number, platforms SDK version, etc.

It also consists of the name of your app as well as its description.

babel.config.js and watchman.config files will be discussed later.

Let's Get Down to Business

To understand a little bit more on what's going, it would be our best bet to look at App.js file.

To begin we can see we have two import statements at the top. Here we are importing ‘React’ and some elements from ‘react-native’.

import React from 'react'

This line brings in the ecosystem of React into react-native. The ecosystem of components, props and etc that most react developers are familiar with.

To get a much better understanding of this line I recommend this short post.

import { StyleSheet, Text, View } from 'react-native';

This line brings in some react-native elements for us to use in our app.

Stylesheet — Used to style the UI components in a CSS-type fashion.

Text- Used to display text onto our app screen. ( consider this like TextView in Android and UITextView in IOS )

View- It can be described best as a container that hosts other elements. It can also host other ‘view’s. It maps directly to the native view equivalent on whatever platform React Native is running on.

Coming further down we have a class and object styles. Styles is an object created using the Stylesheet element we imported from ‘react-native’.

In our App.js file, we have a class called App and it has a render function, which gets returned a View element. The render function takes the view element and essentially converts it into its Native Counterparts.

For eg: converting Text into TextView for android and UITextView for IOS.

Hence, whatever you are writing in react-native using JavaScript is actually being converted into its Native equivalent on both platforms. This is especially great because now we have the power of JavaScript to write the code and the performance of true Native Apps and simultaneously developing for both platforms.

The styles object is initiated by using StyleSheet.create. Consider these styles object as the CSS for our class. Here we write styling as objects. In our example, the ‘style’ container is the class and the values inside are treated as properties. In React-Native we use a camelCase style for our CSS properties.

For eg:

background-color becomes backgroundColor
align-items becomes alignItems
justify-content becomes justifyContent

React-Native has out-of-the-box support for flexbox. So we can arrange our layouts with the help of flex.

Okay, to start off let’s remove the default styling applied i.e container and removing the Text element inside the View.

Our goal here is to create a Login Page.

It will contain 3 input fields ( Email, Password and Re-enter Password ).

2 Buttons — Login, SignUp

For this tutorial, we will look into basic styling. In the next Post, we will create an awesome looking Login Screen that will look and feel more professional.

In React-Native the “input” fields are referred to as TextInput. The “buttons” would be Button.

First Step:

Importing Button and TextInput from ‘react-native’

import TextInput from ‘react-native’
import Button from 'react-native'

we can also do this as:

import { StyleSheet, Text, View, TextInput, Button} from 'react-native';

Once we have Button and TextInput imported we can start using them inside our View as follows:-

TextInput takes in a “prop”, which essentially means a parameter or a property that can be used to modify or edit the components provided by ‘react-native’. In this case, TextInput alone does not have a placeholder text, so we can use the placeholder prop to enter our own custom placeholder.

Similarly, for Button, we can use the title to display the text shown inside the button. If I save my file and run it as is. It should look something as follows.

Right off the bat, we can see that the Button components have taken up their default Native look.

In the case of Android, we have a blue background with white capitalized text.

In the case of IOS, we have a transparent background with blue text.

But the look of the app is not so great. Lets fix that!

Styling React-Native Components

To style our components we need to create an StyleSheet object. We can do this by

const styles = StyleSheet.create({
})

The StyleSheet.create function assigns the functionality of StyleSheet to the styles object. Next, we have to create style objects ( in css terms ‘class’ ) and we can use the camel casing to declare our properties.

To begin lets add some padding to our main View. We can do this by creating an object called “container”(name it as you please) and lets assign some padding to it.

const styles = StyleSheet.create({
container: {
padding: 20
}
)}

The units in React-Native are in “dp”(density pixel )by default. React-Native calculates the pixel density of the screen and applies the styling accordingly.

Lets also add some marginTop and marginBottom for TextInput.

const styles = StyleSheet.create({
container: {
padding: 20
},
input: {
marginTop: 10,
marginBottom: 10
}
})

Let’s apply the same styling to the buttons to provide more spacing between them.

But, the Button component does not have a “style” prop by default.

We can overcome this by wrapping the button component inside a View.

So Now with overall styling and components created, our code should look something like this.

For the TextInput with the password, we can add secureTextEntry={true} prop to make it a password field.

You can have a look at the code and the project structure and everything we have discussed here on this Snack on Expo

Link:

https://snack.expo.io/@chsvk/react-native:-the-easy-way---chsvk

In the next post, we will be creating a beautiful looking login screen that will include some more advanced styling.

React-Native: The Easy Way

Part 2: Styling Forms- The Easy Way

The End.

mail: chsvk21@gmail.com