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 https://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

Hari 24: Menggunakan UI component React Native

Comments

30 Hari Javascript

Hari 25: Icon pada React Native

More from this blog

Ngoding React Nggak Harus Ribet: Ngobrolin Komponen yang Sering Disalahpahami

Ngapain Sih Pake TypeScript di React? Ribet Tapi Worth It

Regex untuk si paling anti ribet

Cara konversi bilangan String ke Number di Javascript

Tips bekerjasama dengan mentor

Menggunakan nativebase

React Router Native

Command Palette

Comments

30 Hari Javascript

Hari 25: Icon pada React Native

More from this blog

Menggunakan nativebase

React Router Native