Creating Component Using React Native

Syed Saad Qamar
Jr. Software Developer

/SyedSaadQamar96

/saadqamar96

/saadqamar01

/in/syed-saad-qamar

What is component?

A part or element of a larger whole, especially a part of a machine or vehicle.

Normal Definition :

Programmar Definition :

In programming, a system is divided into components that in turn are made up of modules.

We will take example to understand how react native component works so we will make list of post like Twitter and Facebook post and will tap any post to route new page and show details of that post

File Structure of stage 1 example

- - index.js
- - app.js
- - container
- - main.js
- - home.js
- - feeds.js
- - components
- - details.

- - store
- - data.json

react-native init AwesomeProject

Last time we have created a project using that above command so, you can use that project and can create new project. Before run your project now we have to install some important libraries so, first we are installing native base for styling our component so open cmd in project folder and run below command
1) npm install --save native-base

then installing this below command for routing
2) npm install --save react-native-router-flux

After installing these two command our basic setup is done, now open your emulator and run below command
3) react-native run-android

Now open your project in IDE, In my case I'm using VS code so can use your IDE then create 3 folders and files within on your project root directory
1) container
main.js
home.js
2) components
details.js
3) store
data.json

we use data.json for retrieving dummy data

When project is started so first run index.js, below is the code

import { AppRegistry } from 'react-native';

import App from './App';

AppRegistry.registerComponent('AwesomeProject', () => App);

Then go to App.js and import main.js file, below is the code of App.js file

import React, { Component } from 'react';
import Main from './container/main';

export default class App extends Component {
  render() {
    return (
      <Main />
    );
  }
}

Now go to main.js, here we define our app route using react-native-router-flux.
We sets our initail page to Home.js, when Main.js component will be run it'll loaded Home.js component.

import React, { Component } from "react";
import { Router, Scene } from 'react-native-router-flux';
import Home from './home';
import Details from './../components/details';

export default class Main extends Component {
  render() {
    return (
      <Router>
        <Scene headerTintColor="#4286f4" key="root">
          <Scene key="Home"
            component={Home}
            hideNavBar
            initial
          />
          <Scene
            key="Details"
            component={Details}
          />
        </Scene>
      </Router>
    );
  }
}

Before going to Home.js we should know about component State & Props.

What is State?

There are two types of data that control a component: props and state . props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state . In general, you should initialize state in the constructor, and then call setState when you want to change it.

In home.js we will create taps using native-base that library we installed, Below is the code

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Container, Content, Thumbnail, Icon, Tab, Tabs, TabHeading } from 'native-base';
import Feeds from './feeds';

export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      currentTab: 0
    }
  }
  render() {
    return (
      <Container>
        <Content>
          <Tabs tabBarUnderlineStyle={styles.tabBarUnderlineStyle} initialPage={this.state.currentTab} onChangeTab={({ i }) => this.setState({ currentTab: i })}>
            <Tab heading={<TabHeading style={styles.tabsBackgroundColor}><Icon name="home" style={this.state.currentTab == 0 ? styles.isActiveTab : styles.isNotActiveTab} /></TabHeading>}>
              <Feeds />
            </Tab>
            <Tab heading={<TabHeading style={styles.tabsBackgroundColor}><Icon name="search" style={this.state.currentTab == 1 ? styles.isActiveTab : styles.isNotActiveTab} /></TabHeading>}>
            
            </Tab>
            <Tab heading={<TabHeading style={styles.tabsBackgroundColor}><Icon name="notifications" style={this.state.currentTab == 2 ? styles.isActiveTab : styles.isNotActiveTab} /></TabHeading>}>
            
            </Tab>
            <Tab heading={<TabHeading style={styles.tabsBackgroundColor}><Icon name="person" style={this.state.currentTab == 3 ? styles.isActiveTab : styles.isNotActiveTab} /></TabHeading>}>
            
           </Tab>
          </Tabs>
        </Content>
      </Container>
    )
  }
}
const styles = StyleSheet.create({
  tabBarUnderlineStyle: {
    backgroundColor: '#4286f4'
  },
  tabsBackgroundColor: {
    backgroundColor: '#fff'
  },
  isActiveTab: {
    color: '#4286f4'
  },
  isNotActiveTab: {
    color: '#8c8a8a'
  }
});

Text

In previous code we set initial tab of feeds.js, so before going to feeds.js we have to create a dummy data in store/data.json as per we descussed in previous slides, below is the code of data.json.

{
  "data": [
    {
      "name": "Ahsan Ayaz",
      "description": "Begins with the Card List component, which is similar to our List Avatar.Make use of Left, Body and Right components to align the content of your Card header.To mixup Image with other NativeBase components in a single CardItem, include the content within Body component.",
      "profile": "https://academist-app-production.s3.amazonaws.com/uploads/user/profile_image/1211/default_user_icon.png",
      "imgURL": "https://www.developer-tech.com/media/img/news/reactive-nativingitup.png.800x600_q96.png"
    },
    {
      "name": "Syed Saad Qamar",
      "description": "Begins with the Card List component, which is similar to our List Avatar.Make use of Left, Body and Right components to align the content of your Card header.To mixup Image with other NativeBase components in a single CardItem, include the content within Body component.",
      "profile": "https://academist-app-production.s3.amazonaws.com/uploads/user/profile_image/1211/default_user_icon.png"
    },
    {
      "name": "Yawar Abbas",
      "description": "Begins with the Card List component, which is similar to our List Avatar.Make use of Left, Body and Right components to align the content of your Card header.To mixup Image with other NativeBase components in a single CardItem, include the content within Body component.",
      "profile": "https://academist-app-production.s3.amazonaws.com/uploads/user/profile_image/1211/default_user_icon.png",
      "imgURL": "https://www.developer-tech.com/media/img/news/reactive-nativingitup.png.800x600_q96.png"
    },
    {
      "name": "Siraj ul haq",
      "description": "Begins with the Card List component, which is similar to our List Avatar.Make use of Left, Body and Right components to align the content of your Card header.To mixup Image with other NativeBase components in a single CardItem, include the content within Body component.",
      "profile": "https://academist-app-production.s3.amazonaws.com/uploads/user/profile_image/1211/default_user_icon.png",
      "imgURL": "https://www.developer-tech.com/media/img/news/reactive-nativingitup.png.800x600_q96.png"
    },
    {
      "name": "Mohsin Ayaz",
      "description": "Begins with the Card List component, which is similar to our List Avatar.Make use of Left, Body and Right components to align the content of your Card header.To mixup Image with other NativeBase components in a single CardItem, include the content within Body component.",
      "profile": "https://academist-app-production.s3.amazonaws.com/uploads/user/profile_image/1211/default_user_icon.png",
      "imgURL": "https://www.developer-tech.com/media/img/news/reactive-nativingitup.png.800x600_q96.png"
    }
  ]
}

import data.json in feeds.js and below is the overall code

import React, { Component } from 'react';
var customData = require('./../store/data/data.json');
import Details from './../components/details';
import { Actions } from 'react-native-router-flux';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity
} from 'react-native';
import { Container, Header, Content, Card, CardItem, Thumbnail, Button, Icon, Left, Tab, Tabs, TabHeading, Body, Right } from 'native-base';

export default class Feeds extends Component {
  render() {
    return (
      <View>
        {customData.data.map((data, index) => (
          <Card key={index}>
          {/* Card Header */}
            <CardItem>
              <Left>
                <Thumbnail source={{ uri: data.profile }} />
                <Body>
                  <Text>{data.name}</Text>
                  <Text note>Pk</Text>
                </Body>
              </Left>
            </CardItem>
            {/* Card Body */}
            <CardItem>
              <TouchableOpacity onPress={() => Actions.Details({ data: data })}>
                <Body>
                  <Image source={{ uri: data.imgURL }} style={styles.bodyImage} />
                  <Text>
                    {data.description}
                  </Text>
                </Body>
              </TouchableOpacity>
            </CardItem>
            {/* Card Footer */}
            <CardItem>
              <Left>
                <Button transparent>
                  <Icon active name="thumbs-up" />
                  <Text>  12 Likes</Text>
                </Button>
              </Left>
              <Body>
                <Button transparent>
                  <Icon active name="chatbubbles" />
                  <Text>4 Comments</Text>
                </Button>
              </Body>
              <Right>
                <Text>11h ago</Text>
              </Right>
            </CardItem>
          </Card>
        ))}
      </View>
    )
  }
}
const styles = StyleSheet.create({
bodyImage: { 
  height: 200,
  width: '100%',
  flex: 1,
  marginBottom: 10
 }
});

Text

When user tap any post it'll route details page and show details of post, you go to components/details.js and write below code in details.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import { Container, Card, CardItem, Thumbnail, Button, Icon, Left, Body, Right } from 'native-base';

export default class Details extends Component {
  render() {
    data = this.props.data;
    return (
      <Card>
        <CardItem>
          <Left>
            <Thumbnail source={{ uri: data.profile }} />
            <Body>
              <Text>{data.name}</Text>
              <Text note>Pk</Text>
            </Body>
          </Left>
        </CardItem>
        <CardItem>
          <Body>
            <Image source={{ uri: data.imgURL }} style={styles.bodyImage} />
            <Text>
              {data.description}
            </Text>
          </Body>
        </CardItem>
        <CardItem>
          <Left>
            <Button transparent>
              <Icon active name="thumbs-up" />
              <Text>  12 Likes</Text>
            </Button>
          </Left>
          <Body>
            <Button transparent>
              <Icon active name="chatbubbles" />
              <Text>4 Comments</Text>
            </Button>
          </Body>
          <Right>
            <Text>11h ago</Text>
          </Right>
        </CardItem>
      </Card>
    )
  }
}
const styles = StyleSheet.create({
  bodyImage: {
    height: 200,
    width: '100%',
    flex: 1,
    marginBottom: 10
  }
});

Any Question?

Thank you!!!

Create Component using React Native

By Syed Saad Qamar

Create Component using React Native

Creating Component Using React Native

What is component?

Create Component using React Native

More from Syed Saad Qamar