Skip to main content

TouchableOpacity tidak bisa diklik saat didalamnya hanya berisi Icon

Kali ini saya dibikin pusing oleh bug ini dalam kode saya.

Biasanya tak pernah ada masalah saat membuat button dengan TouchableOpacity, namun kali ini saat membuat button untuk menampilkan Modal yang didalamnya berisi komponen {RNCamera} untuk mengakses fitur kamera secara native, saya tidak berhasil.

Lama saya mengutak-atik dengan mengubah width dan height pada style-nya, namun tidak membuahkan hasil.

Setelah lewat beberapa hari, barulah terpikirkan untuk mencoba melakukan setting state berupa "true" pada variable "isVisible", sehingga Modal langsung visible/terlihat saat screen/halaman atau komponen yang bermasalah tersebut diakses.

Ternyata, saat initial state disetting menjadi true, Modal yang di dalamnya berisi komponen camera dapat tampil tanpa masalah. Berarti masalahnya bukan pada elemen Modal-nya, namun pada tombolnya.

Barulah setelah saya mencoba comment out baris kode <Icon /> dan mencoba menggantinya dengan <Text> komponen, saya menjadi tahu bahwa saat TouchableOpacity isinya adalah komponen Text, tombol tersebut bisa berfungsi dengan normal.

Artinya, letak masalahnya ada pada TouchableOpacity yang didalamnya hanya berisi Icon tersebut.

TouchableOpacity tidak bisa diklik

Setelah coba dicermati kembali, bug ini juga ternyata muncul dari kesalahan yang sederhana.

Entah kenapa saat saya menerapkan styles.editPhoto pada komponen <Icon /> maka TouchableOpacity ini tidak berfungsi.

Kemudian saya coba cut style yang terdapat pada komponen Icon dan memindahkannya ke komponen TouchableOpacity (komponen induknya), ternyata #solved! he he he...

TouchableOpacity tidak bisa diklik


TouchableOpacity tidak bisa diklik

TouchableOpacity tidak bisa diklik

Ok.. semoga bermanfaat luur...

Comments

Popular posts from this blog

Belajar Coding Intensive Bootcamp Online 300 ribuan selama Sebulan dapat apa saja?

Sekedar catatan sedikit tentang apa yang saya pelajari saat mengikuti online intensive coding bootcamp kelas project React Native selama sebulan kemarin. Pada umumnya cukup menantang karena setiap hari harus catch up dengan materi yang diberikan dan tugas harian (ya, tugasnya pun setiap hari, jadi peserta mau tidak mau harus coding tiap hari). Selain itu ada quiz tiap akhir pekan atau dalam kasus kelas project tiap akhir pekan harus menyelesaikan Mini Project yang merupakan bagian dari Final Project. Lalu apa saja yang dipelajari selama sebulan tersebut? (dengan biaya Rp 300 K itu? *atau Rp 200K karena saya dapat voucher 100rb). Beberapa hal yang saya pelajari: SplashScreen dan onBoarding  Register (dengan OTP)  Login (dengan JWT ke API Sanbercode, Google Sign In dengan firebase, serta local sign in dengan sidik jari / fingerprint)  Passing data dengan menggunakan route.params melalui navigation, passing data dengan konteks ({useContext}) serta melalui props  Home Page kekinian meman

Cara Mengambil Foto dengan RNCamera dan Upload Foto ke API di React Native

Berikut ini catatan singkat saya saat belajar mengambil dan upload foto ke API menggunakan React Native yang saya pelajari saat mengikuti Indonesia Mengoding Intensive Coding Bootcamp React Native Kelas Project yang diadakan Sanbercode. Sebelumnya, bukan bermaksud iklan, namun pengalaman saya mengikuti batch online intensive coding bootcamp di Sanbercode cukup recommended (khususnya jika kita sudah memiliki sedikit saja dasar pengetahuan programming. Jika belum ada dasar pengalaman pemrograman, Sanbercode juga menawarkan kelas dasar yang bisa diikuti pemula). Jadi ini adalah honest review. Saya sendiri telah mengambil kelas Laravel Web Devt (30 hari), React Native Dasar (30 hari) dan React Native lanjutan atau kelas project (30 hari). Investasi totalnya hanya 700 ribu rupiah (3 bulan intensive online bootcamp!), itu jika tanpa potongan.  Dengan biaya 200 ribu rupiah untuk kelas dasar dan 300 ribu rupiah untuk kelas project, saya rasa jika dibandingkan Coding Bootcamp lain yang harga

Cara atau Solusi Mengatasi java.lang.OutOfMemoryError :app:mergeDexRelease FAILED saat Build APK di React Native

 Pernah mengalami error java.lang.OutOfMemoryError :app:mergeDexRelease FAILED saat Build APK di React Native? Ente nggak sendirian Ndan .. Saya juga pernah mengalami error serupa..   Cara mengatasi / solusi / obatnya ternyata cukup simple. Untuk memastikan bahwa pada saat build APK/AAB tidak terjadi OutofMemory error, kita bisa melakukan setting pada file gradle.     Nah, udah tenang kalau sudah ada build successfull hehe.. Semoga bermanfaat..