Getting Started with React Native Template Design - Tutorial Part 1
Wall Script
Wall Script
Sunday, March 26, 2017

Getting Started with React Native Template Design - Tutorial Part 1

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 Template Design



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.
React Native Components Folder

appHeader.js
Header component, this contains mobile app header.
import React, {Component} from 'react';
import {Textfrom '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 {Textfrom '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 {Textfrom '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, AppRegistryfrom '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.
React Native Components Folder

appHeader.js
Modify Header component with NativeBase UI components.
import React, {Component} from 'react';
import { Imagefrom '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 {Textfrom '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 {Textfrom '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.
React Native Components Folder

index.ios.js & index.android.js
Import theme files and link with getTheme component.
import React, {Component} from 'react';
import {Text, AppRegistryfrom '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
React Native iOS view

Re-Build your Android project
$react-native run-android

Android View
React Native Android view

Video Tutorial - React Native Making Template


Part 2: React Native Parsing JSON feed.
web notification

15 comments:

  1. Hey Srinivas, What is your opinion about progressive web app?

    ReplyDelete
  2. This article is very awesome. Very nicely written and thanks for writing this articles.

    ReplyDelete
  3. Thank you so much for providing these instructions!

    ReplyDelete
  4. Its Amazing & Very Very Cleraly tell that,really i am learn it(Because of i am fresher in React Native)
    Thanks lot srini ...

    ReplyDelete
  5. Its Amazing & Really i am learn it,its clearly explain them..

    ReplyDelete
  6. I don't know why my title name in header is showing as left aligned. I am running in android simulator.

    ReplyDelete
  7. 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

    ReplyDelete
  8. 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.

    ReplyDelete
  9. Very nice infomative tutorial thanks

    ReplyDelete
  10. 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

    ReplyDelete

mailxengine Youtueb channel
Make in India
X