Getting Started with React Native Template Design

We always look for apps that are faster to develop and run, React Native is one such emerging framework. Being focused on mobile development; React Native is an open source framework from Facebook which can be run on multiple platforms and devices such as iOS and Android. React Native is a javascript library. You do not have to learn iOS’ Swift or Java for Android, all you need to know is Javascript. I am going to present series of articles on React Native. This article explains making of native mobile template using React Native. Today, I am introducing video tutorials on Youtube for an easy learning.

React Native Blog AppDownload this project on Github

Video Tutorial - React Native Making Template

Install React Native Command-line
Open your terminal or command prompt and execute the following command, this will install React Native Cli globally. Before that you must setup your machine with latest Node.js software.

$sudo npm install -g react-native-cli

Note: This works only for Mac OS, soon they will release for Linux and Windows

Create and Launch a React Native Project
Here ng new command will take care the project files. Use ng serve command to launch the application.

$react-native init MyProject
$cd MyProject

Project Launch with iOS Emulator

$react-native run-ios

Launch Your with Android Emulator

$react-native run-android

Hot Loading
Command + D enable Hot Loading for live development.

React Native Hot Loading for Development

Get Started
This project a page that displays the blog feed. First lets divide this page into 3 components like Header, Footer and Body.

Create SRC folder
Create component like appHeader.js, appBody.js and appFooter.js.

appHeader.js
Header component, this contains mobile app header.

import React, {Component} from 'react';
import {Text} from 'react-native';

export default class AppHeader extends Component {
render() {
return (
<Text >
Header
</Text >
);
}
}
module.export = AppHeader;

appBody.js
Body component, this will parse the JSON feed .

import React, {Component} from 'react';
import {Text} from 'react-native';

export default class AppBody extends Component {
render() {
return (
<Text>
Body Content
</Text>
);
}
}
module.export = AppBody;

appFooter.js
This contains all of the navigations.

import React, {Component} from 'react';
import {Text} from 'react-native';

export default class AppFooter extends Component {
render() {
return (
<Text >
Footer
</Text >
);
}
}
module.export = AppFooter;

index.ios.js & index.android.js
Import all of the components in root component.

import React, {Component} from 'react';
import {Text, AppRegistry} from 'react-native';
import AppHeader from './src/components/appHeader';
import AppFooter from './src/components/appFooter';
import AppBody from './src/components/appBody';

export default class MyProject extends Component {
render() {
return (
<View >
   <AppHeader>
   <AppBody>
   <AppFooter>
</View >
);
}
}

AppRegistry.registerComponent('MyProject', () => MyProject);

NativeBase
NativeBase is an user interface framework for React Native

Install NativeBase

$npm install native-base --save

Restart Your Build
When ever your install new packages, you have to restart your react-native build terminal.

$react-native run-ios

Create img folder
Copy all of your images here.

appHeader.js
Modify Header component with NativeBase UI components.

import React, {Component} from 'react';
import { Image} from 'react-native';
import {Header, Left, Button, Icon, Title, Body, Right} from 'native-base';

export default class AppHeader extends Component {
render() {
return (
<Header>
<Body>
<Image source={require('../img/9lessonsLogo.png')}
style={{width: 160,height: 30}}/>
</Body>
</Header>
);
}
}
module.export = AppHeader;

appBody.js
Modify Body component with NativeBase Card components.

import React, {Component} from 'react';
import {Text} from 'react-native';
import {Content, Card, CardItem, Body} from 'native-base';

export default class AppBody extends Component {
render() {
return (
<Content>
<Card>
<CardItem>
<Body>
<Text>
My Project Text
</Text>
</Body>
</CardItem>
</Card>
</Content>
);
}
}

module.export = AppBody;

appFooter.js
Same way you can modify Footer component with NativeBase components.

import React, {Component} from 'react';
import {Text} from 'react-native';
import {Footer, FooterTab, Button, Icon} from 'native-base';

export default class AppFooter extends Component {
render() {
return (
<Footer >
<FooterTab>
<Button active>
<Icon name="egg"/>
<Text>Feed</Text>
</Button>
<Button>
<Icon name="paper"/>
<Text >Camera</Text >
</Button>
<Button >
<Icon active name="person"/>
<Text >About</Text >
</Button>
</FooterTab>
</Footer>
);
}
}
module.export = AppFooter;

NativeBase Customization

Execute the following command in project folder, this will create themes folder. Take a look at live demo.

$node node_modules/native-base/ejectTheme.js

Rename the theme file with your project name.

index.ios.js & index.android.js
Import theme files and link with getTheme component.

import React, {Component} from 'react';
import {Text, AppRegistry} from 'react-native';
import {Container, StyleProvider} from 'native-base';
import getTheme from './src/themes/components';
import nineLessons from './src/themes/variables/nineLessons';

import AppHeader from './src/components/appHeader';
import AppFooter from './src/components/appFooter';
import AppBody from './src/components/appBody';

export default class MyProject extends Component {
render() {
return (
<StyleProvider style={getTheme(nineLessons)}>
<Container>
<AppHeader/>
<AppBody/>
<AppFooter/>
</Container>
</StyleProvider >
);
}
}

AppRegistry.registerComponent('MyProject', () => MyProject);

Re-Build your IOS project

$react-native run-ios

iOS View

Re-Build your Android project

$react-native run-android

Android View

Video Tutorial - React Native Making Template

Part 2: React Native Parsing JSON feed.

15 comments:

UnknownMarch 27, 2017 at 1:19 AM
Hey Srinivas, What is your opinion about progressive web app?
Sabir Abdul GafoorMarch 27, 2017 at 3:02 AM
This article is very awesome. Very nicely written and thanks for writing this articles.
Rich WhitingMarch 27, 2017 at 12:39 PM
Thank you so much for providing these instructions!
AnonymousApril 4, 2017 at 5:51 AM
Its Amazing & Very Very Cleraly tell that,really i am learn it(Because of i am fresher in React Native)
Thanks lot srini ...
AnonymousApril 4, 2017 at 5:52 AM
Its Amazing & Really i am learn it,its clearly explain them..
UnknownMay 12, 2017 at 4:09 PM
I don't know why my title name in header is showing as left aligned. I am running in android simulator.
AnonymousJune 19, 2017 at 8:29 AM
THanks.
UnknownJune 24, 2017 at 1:17 AM
Thanks SRINIVAS TAMADA.
UnknownJune 24, 2017 at 1:17 AM
Thanks SRINIVAS TAMADA.
AdminJune 25, 2017 at 5:53 AM
React Native fetch() Network Request Failed error occuring. I'm running it on android device can't find a solution for network request failed. please help
AnonymousAugust 25, 2017 at 6:06 AM
Nice
MytechshoutSeptember 19, 2017 at 12:08 PM
Hi
Very nice tutorial. But after the latest releases of react native there are some errors preventing the app from launching. Can you update the app code to make it work on the latest react native version. ??
Thanks.
HerbertNovember 2, 2017 at 5:53 AM
Very nice infomative tutorial thanks
AyrMarch 9, 2018 at 12:11 PM
Hi,

I am follow your tutorial to render a map in a child component. in tha parent I have:

constructor(){
super()
this.state = {
isLoading: false,
data: {},
comentarios: [],
}
}
...

...

In the child component I have:

let lgt = parseFloat(this.props.data.longitude);

initialRegion={{
latitude: latitude,
longitude: lgt,
latitudeDelta: 0.04864195044303443,
longitudeDelta: 0.040142817690068,
}}

From API endpoint: {"latitude":-30.0306551,"longitude":-51.1846846}

Seems the Latitude e Longitude from props are null and I am not able to initialize the region's map. What I am doing wrong? Using JSX, latitude and longitude are displayed. So the datas are there.

Thank you so much