React Native - Membuat Toolbar

Hello sobat, hari ini saya akan memberikan artikel mengenai membuat toolbar menggunakan aplikasi react native berbasis android, untuk langkah-langkahnya sebagai berikut, 

Source Code

Create Aplikasi

Membuat aplikasi baru lihat vidio disini

Class Utama .js
Dibagian index.android.js tambahkan code berikut

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  StatusBar,
  View
} from 'react-native';

import Toolbar from './lib/Toolbar'
import { getColor } from './lib/helpers'
import Icon from './lib/Icon'

export default class CodeTROprek extends Component {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor="#16a085"
          animated={true}
        />
        <Toolbar title="CodeTR" color={getColor('#1abc9c')}/>
        <Icon name="av-timer" size={180} color={getColor('#1abc9c')} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

Folder
Struktur dari folder lib, dari folder lib di bawah tambahkan file Icon.js dan untuk file yang lain dapat di download pada bagian download source code

Masukan code js berikut pada Icon.js

import React, { Component, PropTypes } from 'react'
import { View } from 'react-native'
import { default as VectorIcon } from 'react-native-vector-icons/MaterialIcons'

import { getColor } from './helpers'

export default class Icon extends Component {

  static propTypes = {
    name: PropTypes.string.isRequired,
    style: View.propTypes.style,
    size: PropTypes.number,
    color: PropTypes.string,
    allowFontScaling: PropTypes.bool
  }

  static defaultProps = {
    size: 30,
    color: '#757575',
    allowFontScaling: true
  }

  render() {
    const {
      name,
      style,
      size,
      color,
      allowFontScaling
    } = this.props

    return (
      <VectorIcon
        name={name}
        size={size}
        color={getColor(color)}
        style={style}
        allowFontScaling={allowFontScaling}
      />
    )
  }
}

Lebih jelasnya lihat vidio 

 

Output aplikasi

Sekian artikel dari saya semoga bermanfaat, jika ada yang ditanyakan comment saja di bawah.