Understanding the basic components of React native

The motto of react native is “Learn once write everywhere“. React native is like React, however instead of using web components, it uses native components. You need to understand some of the basic react components like JSX, components, state and props.

Hello World Program:

Let’s start with a basic Hello world program, and I assume that you’ve done the Environment setup for react native. To create the first sample app by using

react native init NativeSample

Open the NativeSample project on your favorite IDE, and you will find the file called index.android.js open the file and erase everything in that file. Let’s begin with our own code. Paste the below code or type in the index.android.js

Example :

import React, { Component } from ‘react’;

import {

AppRegistry,

Text,

View

} from ‘react-native’;

export default class NativeSample extends Component {

render() {

return (

<View >

<Text >

Hello World!..

</Text>

</View>

);

}

}

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

Run this using the command react-native run-android. You will see the screen like below (assuming there are no errors)

You maybe think what these lines are. Let’s discuss the code one by one, In react native we want to import all the things we need because react native won’t import anything by default.In the first line, we import React and Component from react

Component

A component is a very basic element in react-native we can divide the large application into many small Components. This makes development fast and maintains the code very clear to understand.

AppRegistry:

The JS entry point for all React native app is AppRegistry. In AppRegistry the app root Component should be registered. Then only react native loads the app and then run the app by invoking the AppRegistry.runApplication.

Text

Text is a basic built-in Component, it displays text in the Application.

Render

Content inside the render only displays in the Application screen.

Core components of the React Native:

1. View :

In React, View is a built-in component. If you familiar with div in HTML, view is like div, it is used in mobile apps. The view is a content area where you display your content.Using this you can arrange the content in a very good manner.

Usage of view

When you need to wrap your content inside the container

When you need to use different style for different element

When you need a nested element

It supports for Synthetic touch events, which is used for different purpose.

2. State :

There are two types of data which controls a component. They are state and props. The state is mutable. It means a state can change the value at any time. The variable data are stored in state. Initialize the state in a constructor and change the value by calling the function ‘setState’ when you want.

3. props :

The second data type is props. It is immutable. It can be used to pass the data to the different component. It makes a connection between Container Component and Presentation Component.

Container Component is where we handle all the states and functionalities, and Presentation Component iswhere View present it is a passive area.

Initialization of the state and update of the state are handled in container component. The result will be passed to the presentation component to display the view by using the props

Example :

Container component :

import React, { Component } from ‘react’;

import { AppRegistry, View,Text } from ‘react-native’;

import presentationalComponent from ‘./presentationalComponent;

class Helloworld extends Component {

constructor() {

super()

this.state = {

firstVar: ‘It display using state’

}

}

hideText = () => {

this.setState({firstVar: ‘ ‘})

}

render() {

return (

<View style={{backgroundColor:’blue’}}>

<presentationalComponent

myText = {this.state.firstVar}

deleteText = {this.hideText}

/>

</View>

);

}

}

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

Presentation Component :

presentationalComponent.js

import React, { Component } from ‘react’

import { Text,View} from ‘react-native’

const presentationalComponent = (props) => {

return (

<View>

<Text onPress = {props.deleteText}>

{props.myText}

</Text>

</View>

)

}

export default presentationalComponent

We can create many presentation components using one container component. Props help to communicate between the components

4. Style :

The most important thing in web or mobile app is styling. It makes our application attractive. We don’t need any special language or syntax for styling. You can style your application by using the javascript object. All components accept the props style.We can pass the style by changing the CSS properties with camel case like ‘backgroundcolor- backgroundColor’. You can also use inline style but it’s not a good practice.The best way to create styleSheet object is,

Example 1 :

Inline style

import React, { Component } from ‘react’;

import { AppRegistry, View,Text } from ‘react-native’;

class NativeSample extends Component {

constructor() {

super()

this.state = {

firstVar: ‘It displays using state’

}

}

render() {

return (

<View style={{backgroundColor:’blue’}}>

<Text> {this.state.firstVar}</Text>

</View>

);

}

}

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

Example 2 :

Using styleSheet

import React, { Component } from ‘react’;

import {

AppRegistry,

StyleSheet,

Text,

View

} from ‘react-native’;

export default class NativeSample extends Component {

constructor() {

super()

this.state = {

firstVar: ‘It displays using styleSheet’

}

}

render() {

return (

<View >

<Text style={styles.textStyle} > {this.state.firstVar}</Text>

</View>

);

}

}

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

const styles = StyleSheet.create ({

textStyle: {

margin: 50,

fontSize: 30,

color:’red’,

fontWeight: ‘bold’,

}

})

Result :

5. Flex layout :

Flex Layout is provided to give a clean layout to the component. Children of a component layout are specified using the Flexbox. Using the flexDirection, alignItems, and justifyContent properties we can archive the right layout

5.1. flexDirection :

Values : (’row’,’column’)

This property decides the primary axis of the layout. Component’s children should be organized

Horizontally (row) or Vertically (column). Default value is column

Example :

import React, { Component } from ‘react’;

import {

AppRegistry,

StyleSheet,

Text,

View

} from ‘react-native’;

export default class NativeSample extends Component {

render() {

return (

<View style={{flex: 1, flexDirection: ‘row’}}>

<View style={{width: 50, height: 50, backgroundColor: ‘blue’}} />

<View style={{width: 50, height: 50, backgroundColor: ‘red’}} />

<View style={{width: 50, height: 50, backgroundColor: ‘green’}} />

</View>

);

}

}

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

Result :

5.2. justifyContent :

JustifyContent determines the distribution of children in primary Axis.

9. Navigators :

Navigators are used change the scene in the app. Most of the apps are built with more than one scene.So we navigate the user to multiple scenes. We do this by using navigators.React native has several built-in components for navigation. But Navigator is a basic built in js component. It supports both IOS and Android

initialRoute : Specifies which component (or scene) should be displayed or rendered when the application is started

10. Networking :

Most of the apps need to fetch data from remote URL. You maybe want to make POST a request or simply fetch the data from another server. React provides fetch function to make an HTTP request to another server. Catch the error throw by fetch otherwise dropped by silently

About us

Habile Technologies brews innovation and offers the perfect mix of technology, competitive business edge and strategy. With a proven track record of happy clients, we are proudly the best technology partner for your organisation.

how can we help you?

Tell us about your requirement and we’ll offer you the best possible solution. Get in touch now.

Habile Technologies - A digital technologies services and products company with more than 9 years of solid experience. Habile Technologies leverages it technical expertise to help clients outperform competition and be a leader in the innovation curve.