Ketut Muliarta Blog

Penggunaan borderRadius pada sebuah view sangat umum di gunakan dalam desain project React Native. borderRadius akan membuat tampilan view tidak lagi kotak, tetapi dengan sudut yang membulat. Namun, pada project terakhir yang saya buat, saya mengalami kasus yang cukup membuat kesal, bagaimana tidak, penerapan style yang biasanya tidak ada masalah, tiba-tiba tidak bekerja seperti biasanya. Kasusnya terjadi ketika saya menerapkan borderRadius pada sebuah View tiba tiba saja background dan border dari View ini tidak tampil, jadi seolah olah semuanya transparan. Setelah mencoba berbagai cara akhirnya saya menemukan sebuah solusi yang sebenarnya lebih mirip seperti mengakali kesalahan dari React Native ini. Ya yang penting errornya bisa di atasi tanpa mengurangi kinerja aplikasi 😀.

Terkadang dalam proses pengembangan sebuah aplikasi menggunakan React Native, kita perlu untuk mengganti Nama dari Aplikasi yang kita buat. Seperti kasus yang saya alami, pada awal pengembangan aplikasi saya asal saja memberi nama. Setelah aplikasi siap di upload ke playstore saya baru mendapatkan nama yang pas untuk aplikasi tersebut. Setelah melakukan pencarian, ternyata React Native tidak menyediakan perintah khusus untuk mengganti nama Aplikasi, jadi kita harus melakukannya secara manual. Pada contoh kasus ini, misalkan Nama Aplikasi kita adalah l atihan1 dan kita akan mengganti namanya menjadi aplikasikeren. Untuk melakukan perubahan nama aplikasi ada beberapa file yang perlu di edit, diantaranya: android\app\src\main\java\com\Latihan1\MainActivity.java android\app\src\main\java\com\Latihan1\MainApplocation.java android\app\src\main\AndroidManifest.xml android\app\build.gradle 1. MainActivity.java Bagian yang perlu kita edit pada file  MainActivity.java adala...

Sebagai seorang programer tentunya kita sudah tidak asing dengan condition If Else. ya fungsi ini memang wajib ada dalam setiap bahasa pemrograman. Tapi lain ceritanya ketika saya mencoba membuat Aplikasi dengan React Native. Hal yang biasanya mudah di implementasi kan ternyata berbeda kasusnya di React Native. iklanku Sebagai orang yang baru mengenal Javascript, penerapan If else pada method masih cukup mudah di mengerti. Tapi ketika saya ingin menggunakan if else pada bagian render saya benar benar tidak ada ide. Setelah pencarian cukup lama akhirnya saya menemukan solusi. ternyata Javascript mempunyai aturan sendiri dalam penerapan if else pada bagian render. Di bawah ini adalah contoh code nya. {this.state.benar==true? (       <view>                       <text>Jawaban Kamu Benar</text>      </view> ) : (          <view styl=""...

Dalam pengembangan sebuah aplikasi mobile baik itu untuk Ios maupun Android, terkadang kita perlu untuk mendapatkan lokasi pengguna sehingga pengguna aplikasi tidak perlu untuk mengetik lokasi mereka secara manual. Untuk menambahkan fungsi Geo Location di React native, saya akan menggunakan modul react-native-geolocation-service karena modul ini sudah mendukung FusedLocationProviderClient yang di sarankan oleh pihak Google. Berikut ini adalah langkah-langkah yang harus kita lakukan: Proses Installasi Install react-native-geolocation-service Edit file android/app/build.gradle Edit file android/build.gradle Edit file android/setting.gradle Edit file android/app/src/main/java/[nama aplikasi]/MainApplication.java Pemakaian dalam project Import modul react-native-geolocation-service ke dalam project Mengelola Permission Mengambil informasi pengguna Konversi menjadi nama tempat yang bisa di baca Di bawah ini adalah penjelasan dari masing-masing la...

Setelah project react native yang kita kerjakan selesai dan semua fitur sudah bekerja sempurna di emulator. kini saatnya kita membuat file APK supaya Aplikasi yang kita buat bisa di install di perangkat android. Cara Untuk Membuat File APK Versi Release. APK versi release adalah file final yang bisa di install di perangkat android. pada versi ini semua fungsi dan  menu debug tidak akan ada.  Membuat signing key Signing ke di sini adalah file dengan extensi .keystore yang berfungsi sebagai id unik dari Alpikasi yang kita buat. file ini bisa kita buat dengan keytool dari java. Berikut ini langkah-langkahnya: Buka terminal atau command promt Di terminal, masuk ke folder project kita ( sebenarnya bisa di mana saja , tapi saya lebih suka kita membuat file keystore ini langsung di folder project) Copy perintah di bawah ini, dan jalankan di terminal keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 S...

Navigasi adalah komponen penting dalam sebuah aplikasi, karena sebagian besar aplikasi pasti memiliki lebih dari satu halaman. nah untuk berpindah dari satu halaman ke halaman lainnya kita memerlukan komponen navigasi ini. Pada project kali ini saya akan menggunakan  react-native-router-flux untuk membantu navigasi dalam aplikasi. Cara install  react-native-router-flux Untuk menambahkan  modul React Native Vector Icons ke dalam project anda, pertama buka terminal. Apabila anda belum berada di folder project React Native anda, silahkan masuk dulu ke folder Project React Native Anda. Tambahkan modul react-native-router-flux dengan menjalankan  perintah Yarn add react-native-router-flux Bila yarn belum ada di komputer kalian silahkan gunakan ini: Npm install react-native-router-flux Selanjutnya menambahkan code untuk mengatur navigasi. Kita bisa menambahkan code pada file App.js atau membuat file terpisah. Nah saya akan membuat code na...

Icon merupakan elemen yang sangat penting dalam desain user interface sebuah aplikasi. pemilihan icon yang tepat sangat mempengaruhi kemudahan user dalam memakai aplikasi. Lalu bagaimana cara mendapatkan icon yang tepat untuk project react native kita. Untuk itu kali ini saya akan membagikan informasi tentang modul yang sering digunakan untuk memudahkan penambahan Icon pada project react native. Kita akan menggunakan React-Native-Vector Icon. module ini mempunyai banyak pilihan Icon yang sangat bagus dan berkualitas. dan yang terpenting semuanya Gratis. Silahkan lihat  koleksi icon react-native vector-icons apabila anda penasaran seperti apa koleksi Iconnya. Cara install React Native Vector Icons Untuk menambahkan  modul React Native Vector Icons ke dalam project anda, pertama buka terminal. Apabila anda belum berada di folder project React Native anda, silahkan masuk dulu ke folder Project React Native Anda. Lalu jalankan perintah ini di terminal: yar...

Hmmm. erroe lagi error lagi??. setelah beberapa masalah error saat menjalankan project react native di android. muncul lagi error yang satu ini. dari pesan yang muncul seolah olah yang bermasalah adalah folder asset. Tapi tunggu dulu, sebenarnya penyebab dari error ini adalah server npm nya tidak jalan. Solusinya: Untuk mengatasi masalah ini teman teman bisa melakukan langkah-langkah di bawah ini: jalankan perintah npm start di terminal, lalu pencet reload di device. apabila cara itu belum berhasil, coba jalakan perintah react-native run-android di terminal. Semoga solusi ini bisa membantu teman teman yang mengalami masalah yang sama dengan yang saya alami.

Selain error  Command failed: gradlew.bat installDebug seperti postingan saya sebelumnya. ini ada lagi error yang muncul ketika saya mencoba membuat aplikasi dengan React Native. Kalau error sebelumnya muncul ketika saya melakukan perintah react-native link. maka error kali ini muncul saat saya akan menjalankan  project di emulator. mungkin teman teman yang mengalami masalah yang sama juga akan bingung, "Mengapa project yang baru di buat tidak bisa di jalankan ya?" Ternyata penyebab dari error ini adalah react native tidak bisa menemukan dimana path java berada. sebelum menunjukan solusinya, error yang muncul adalah seperti di bawah ini: Task :app:compileDebugJavaWithJavac FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:compileDebugJavaWithJavac'. > Could not find tools.jar. Please check that C:\Program Files (x86)\Java\jre1.8.0_151 contains a valid JDK installation. * Try: Run with --stacktrace...

Ketika mulai mempelajari cara membuat Aplikasi dengan React Native ada satu hal yang membuat saya tidak habis pikir. saya menghabiskan waktu lebih dari 2 hari untuk mencari bagaimana cara menampilkan angka dan tanggal sesuai dengan format yang saya inginkan. Padahal itu sangat mudah dilakukan di platform lain. Beberapa module sudah saya coba tapi tidak ada yang bekerja dengan baik. akhirnya saya menyerah untuk mencari module yang sesuai. saya memutuskan untuk membuat sendiri code untuk memformat angka dan tanggal sehingga gampang untuk saya ubah sesuai keinginan. Apabila teman teman mempunyai masalah seperti apa yang saya alami, teman-teman bisa mencoba script yang saya buat ini. Langkah -langkah yang harus dilakukan: Pertama , buat file js dengan nama apa saja. kalau saya membuat dengan nama FormatNumber.js. di dalam file FormatAngka.js masukan code berikut: Kedua , import file FormatNumber ini  sebelum menggunakannya. berikut contoh importnya.  import For...

Jadi ceritanya begini, sebelumnya Project React Native yang saya buat tidak ada masalah saat menjalankan perintah react-native run-android. Tetapi setelah saya install module react native image picker dan menjalankan perintah link. dan terjadilah error seperti ini: SOLUSI Ternyata solusinya sangatlah mudah. error ini di sebabkan oleh perintah  react-native link dimana pada saat menambahkan path di file settings.gradle dia menggunakan tanda "\". Jadi untuk memperbaikinya silahkan buka folder file settings.gradle yang ada di folder android. lalu ubah tanda "/" menjadi tanda "\". contohnya bisa di lihat di gambar di bawah ini.  Gambar di atas adalah settingan sebelum di ubah, jadi masih error. pada kasus ini, error project saya di sebabkan oleh path dari module  react-native-image-picker. Dan pada gambar di atas ini saya sudah merubah tanda "/" menjadi tanda "\" pada path react-native-image-picker. Demikian dulu sha...