React Native Error | Cara mengatasi masalah borderRadius

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 😀.


Apa yang saya lakukan adalah menambahkan sebuah View sebagai parent dari View yang sebenarnya. Kuncinya adalah, saya menerapkan borderRadius, dan overflow : 'hidden' pada parent View, sementara pada View yang sebenarnya baru saya tambahkan background.

Untuk lebih jelasnya silahkan lihat perbandingan code sebelum dan sesudah di perbaiki di bawah ini:

Ini adalah code normal yang biasanya tidak adala masalah, tetapi berpotemsi error di beberapa perangkat.

Solusinya adalah dengan menambahkan parent View dan menempatkan borderRadius pada parent View dan sertakan overflow: 'hidden'