Hari 24: Menggunakan UI component React Native

Ada banyak sekali UI untuk react native yang bisa dipakai secara gratis, pada series ini kita akan menggunakan nativebase, yang dapat dilihat disitus resminya nativebase.io

nativebase

Menggunakan nativebase

Sebelum menggunakan komponen nativebase, pertama sekali kita harus install pada proyek kita dengan perintah berikut.

npm install native-base

Contoh penggunaan native base.

import React, { Component } from "react";
import { Container, Header, Content, Button, Text } from "native-base";
export default class ButtonThemeExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Button light>
            <Text> Light </Text>
          </Button>
          <Button primary>
            <Text> Primary </Text>
          </Button>
          <Button success>
            <Text> Success </Text>
          </Button>
          <Button info>
            <Text> Info </Text>
          </Button>
          <Button warning>
            <Text> Warning </Text>
          </Button>
          <Button danger>
            <Text> Danger </Text>
          </Button>
          <Button dark>
            <Text> Dark </Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

React Router Native

Sama halnya dengan reactjs, pada react native juga ada yang namanya router yang berfungsi untuk pindah scren dari yang satu ke yang lainnya. Pada series ini kita akan menggunakan react router native. Cara install seperti berikut.

npm i react-router-native

Kita telah menginstall UI untuk proyek react native, kemudian kita akan membuat file RouterApp.js, pages/Home.js, dan pages/About.js dan mengubah file App.js.

File App.js

import React from "react";
import RouterApp from "./RouterApp";

const App = () => {
  return <RouterApp />;
};

export default App;

File RouterApp.js

import React from "react";
import { Container, Text, Footer, View } from "native-base";
import { NativeRouter, Route, Link } from "react-router-native";

import Home from "./pages/Home";
import About from "./pages/About";

const RouterApp = () => {
  return (
    <NativeRouter>
      <Container>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Footer>
          <Link to="/" underlayColor="blue" style={{ flex: 1 }}>
            <View
              style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <Text style={{ color: "white" }}>Home</Text>
            </View>
          </Link>
          <Link to="/about" underlayColor="blue" style={{ flex: 1 }}>
            <View
              style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <Text style={{ color: "white" }}>About</Text>
            </View>
          </Link>
        </Footer>
      </Container>
    </NativeRouter>
  );
};

export default RouterApp;

File pages/Home.js

import React from "react";
import { Container, Header, Body, Title, Content, Text } from "native-base";

const Home = (props) => {
  return (
    <Container>
      <Header>
        <Body>
          <Title>Home</Title>
        </Body>
      </Header>
      <Content>
        <Text> Ini Home Page asrul.dev </Text>
      </Content>
    </Container>
  );
};

export default Home;

File pages/About.js

import React from "react";
import { Container, Header, Body, Title, Content, Text } from "native-base";

const About = (props) => {
  return (
    <Container>
      <Header>
        <Body>
          <Title>About</Title>
        </Body>
      </Header>
      <Content>
        <Text> About Page </Text>
      </Content>
    </Container>
  );
};

export default About;

Hasilnya akan terlihat seperti berikut.

React Router Native

AsrulDev

AsrulDev

Hari 24: Menggunakan UI component React Native

Menggunakan nativebase

React Router Native