# 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
### Menggunakan nativebase
Sebelum menggunakan komponen nativebase, pertama sekali kita harus install pada proyek kita dengan perintah berikut.
```bash
npm install native-base
```
Contoh penggunaan native base.
```js
import React, { Component } from "react";
import { Container, Header, Content, Button, Text } from "native-base";
export default class ButtonThemeExample extends Component {
render() {
return (
);
}
}
```
### 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.
```bash
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`
```js
import React from "react";
import RouterApp from "./RouterApp";
const App = () => {
return ;
};
export default App;
```
File `RouterApp.js`
```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 (
);
};
export default RouterApp;
```
File `pages/Home.js`
```js
import React from "react";
import { Container, Header, Body, Title, Content, Text } from "native-base";
const Home = (props) => {
return (
Home Ini Home Page asrul.dev
);
};
export default Home;
```
File `pages/About.js`
```js
import React from "react";
import { Container, Header, Body, Title, Content, Text } from "native-base";
const About = (props) => {
return (
About About Page
);
};
export default About;
```
Hasilnya akan terlihat seperti berikut.
