Tag: reactnative

Menggunakan Component NativeBase untuk React Native

NativeBase adalah komponen user interface untuk React Native  yang dapat digunakan pada platform Android maupun iOS.

Komponen-komponen yang tersedia adalah:

Bagaimana cara menggunakannya?

npm install native-base --save
react-native link
npm start

Lalu, import component sesuai yang dibutuhkan. Misalnya component Container, Header dan Title.

import { Container, Header, Title } from 'native-base';

Pada component tersebut, terdapat konfigurasi yang dapat diatur sesuai kebutuhan.

Misal, pada component Radio terdapat konfigurasi seperti berikut:

Property Default Option Description
selected false boolean (true/false) nilai dari pilihan

 

Contoh dari pemakaiannya seperti berikut:

<Content>
     <ListItem>
         <Left>
             <Text>Female</Text>
          </Left>
          <Right>
              <Radio selected={false} />
          </Right>
     </ListItem>

     <ListItem>
         <Left>
             <Text>Male</Text>
          </Left>
          <Right>
              <Radio selected={true} />
          </Right>
     </ListItem>
</Content>

Dari code diatas, menghasilkan list dengan radio button yang memilih text “Male“.

Selamat mencoba!

 

Referensi:

NativeBase

Perbedaan React Native CLI dan Create React Native App

Pada postingan Membangun Mobile Apps dengan React Native, dijelaskan betapa mudahnya memulai proyek dengan React Native.

$ create-react-native-app my-app

create-react-native-app atau CRNA adalah cara termudah untuk membuat aplikasi React Native baru tanpa menginstal Xcode dan Android Studio.

Karena Anda tidak membuat kode native saat menggunakan CRNA untuk membuat proyek, tidak mungkin menyertakan modul native yang ditulis di Java dan Objetive-C.

Jika melihat struktur folder-nya, Anda tidak menemukan folder android atau ios pada proyek ini.

crna

Sehingga, untuk kebutuhan publish aplikasi ke Play Store atau App Store dan menggukan library yang tidak tersedia, Anda harus melakukan eject pada aplikasi yang dibuat dengan CRNA dengan command berikut:

$ react-native eject

Kelebihan

  • Setting yang mudah
  • Berbagi aplikasi yang masih tahap development melalui QR Code atau link
  • Dapat menggunakan library dasar bawaan Expo
  • Dapat membuat file .apk ataupun .ipa

Kekurangan

  • Tidak dapat menambahkan modul native
  • Tidak dapat menambahkan library yang ditulis dalam Java dan Objetive-C

Lalu, apa ada cara lain untuk membuat aplikasi tanpa melakukan eject? Jawabannya, bisa dengan React Native CLI menggunakan command  berikut:

$ react-native init my-app

Tapi dengan ini, tentu Anda membutuhkan Android Studio dan XCode untuk menjalankan proyek.

Kelebihan

  • Dapat menambahkan modul native yang ditulis dalam Java dan Objetive-C

Kekurangan

  • Membutuhkan Android Studio dan Xcode
  • Tidak dapat mengembangkan aplikasi untuk iOS tanpa Mac

Semua tergantung kebutuhan Anda :D

 

Referensi:

Membangun Mobile Apps dengan React Native

App

Instagram, Facebook, Pinterest, Uber, SoundCloud Pulse dan Skype.

Pasti sudah tidak asing dengan beberapa aplikasi yang disebutkan diatas. Aplikasi tersebut dibangun menggunakan React Native.

Sudah pernah mendengar React Native sebelumnya?

React Native merupakan framework berbasis JavaScript yang dibuat dan dikembangkan oleh Facebook. Bermula pada tahun 2013, React Native merupakan sebuah proyek internal Facebook Hackathon. Hingga akhirnya Maret 2015, pada F8 Conference, Facebook mengumumkan React Native terbuka untuk publik dan tersedia di GitHub.

Lalu, apa kelebihan React Native dibandingkan dengan framework mobile apps lainnya?

Dengan React Native, kita memungkinkan untuk membangun aplikasi Android dan IOS sekaligus. Aplikasi yang dibangun bukan hybrid atau web, tapi benar-benar native.

Untuk UI dan UX nya sendiri menggunakan CamelCase, yaitu Javascript styling hampir mirip dengan CSS.

Bagaimana cara belajar React Native? Apa sulit? Jawabannya tidak. Bagi pemula, Create React Native App adalah cara termudah untuk membuat suatu aplikasi dengan React Native tanpa menggunakan Android Studio.

Tools penunjang yang digunakan adalah Expo. Expo dapat dipasang di smartphone yang berfungsi sebagai emulator untuk melihat proyek yang sedang dibangun dengan React Native.

 

 

Tunggu apalagi, buka command prompt Anda, ketik syntax berikut, lalu mulai project pertama menggunakan React Native.

$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start

Namun pastikan NodeJS dan NPM sudah terpasang di perangkat Anda.

Selamat mencoba! :)

 

Referensi: