React Native Uygulamalarında HTML Render Etmek

3 min readMay 29, 2021

Motivasyon

Yakın zamanda bir React Native uygulamasında HTML render etmem gerekti. React Native içerisinde bu olanağı sağlayan bütünleşik bir çözüm olmadığından üçüncü parti kütüphanelere başvurdum. Fakat bu işi yapan o kadar fazla kütüphane var ki, içlerinden istediğim gibi çalışan, stabil, bakımı süren bir tanesini bulana kadar epey mesai harcadım. Bulmuşken de hakkında birkaç şey yazayım istedim.

Mezkûr uygulama için kaynak olarak WordPress’in REST API’ını kullanıyordum. Kullanmak istediğim HTML kaynak, WordPress sitedeki WYSIWYG metin editöründen girilmekteydi ve içerisinde birtakım eklentiler vasıtasıyla oluşturulan özelleştirilmiş HTML etiketleri barındırıyordu. Bu etiketlerin bir kısmını mobil uygulama içerisinde manipüle ederek göstermek istiyor, bir kısmını da hiç göstermek istemiyordum. O yüzden seçeceğim kütüphanenin HTML render etme yeteneğinin yanı sıra HTML kaynak üzerinde ne kadar manipülasyon yapabildiği benim için önemliydi.

react-native-render-html

React Native Render HTML, imdadıma yetişen kütüphane oldu. Oldukça yoğun bir kullanımı ve hatırı sayılır bir topluluk desteği var. Yetenekleri ve kullanım pratikleri de muazzam.

Kütüphanenin en basit, yalnızca verilen HTML kaynağı uygulama arayüzünde render eden kullanımı aşağıdaki gibi.

Fakat asıl marifet HTML bileşeninin prop kullanımlarıyla sağladığı sair yeteneklerde. En çok ihtiyaç duyulabileceklerden bahsedeyim.

Stilleri Özelleştirmek

Benim en ihtiyaç duyduğum özellik mevcut HTML kaynak içerisindeki stilleri özelleştirmek, yani ezmekti. Kütüphane içerisinde bunun için birçok özellik mevcut.

containerStyle: HTML kaynak içerisindeki kapsayıcı etiketin stillerini değiştirmeyi sağlıyor.
baseFontStyle: HTML kaynak içerisindeki tüm metin stillerini özelleştirmeyi sağlıyor.
tagStyles: HTML kaynak içerisindeki spesifik alanları HTML etiketlerinden yakalayarak özelleştirmeyi sağlıyor.
classesStyles: HTML kaynak içerisindeki spesifik alanları CSS sınıflarından yakalayarak özelleştirmeyi sağlıyor.
emSize: Ebeveyn etiketten miras alınacak yazı tipi büyüklüğünün varsayılan değerini piksel cinsinden tanımlamayı sağlıyor.
ptSize: Varsayılan yazı tipi puntosunun varsayılan değerini piksel cinsinden tanımlamayı sağlıyor.
allowedStyles: HTML kaynak içerisindeki yalnızca belirlenen stillerin işlenmesini, diğer tüm stillerin göz ardı edilmesini sağlıyor.
ignoredStyles: HTML kaynak içerisindeki belirlenen stillerin göz ardı edilmesini sağlıyor.

Diğer Özellikler

contentWidth: HTML içeriğinin render edildikten sonraki genişliğini belirlemeyi sağlıyor.
imagesInitialDimensions: Görseller için varsayılan genişlik ve yükseklik değerleri tanımlamayı sağlıyor.
onLinkPress: HTML içerisindeki herhangi bir bağlantıya tıklandığında tetiklenecek bir fonksiyon belirlemeyi sağlıyor.
onParsed: HTML içeriğinin render edilmesi tamamlandıktan sonra tetiklenecek bir fonksiyon belirlemeyi sağlıyor.
listsPrefixesRenderers: ul, ol gibi HTML liste etiketlerinin liste işaretçilerini değiştirmeyi sağlıyor.
remoteLoadingView: Uzak sunucudan alınacak HTML kaynağı tamamen yüklenene kadar gösterilecek görünümü sağlıyor.
remoteErrorView: Uzak sunucudan HTML kaynağı alınırken oluşacak hatalar sonrasında gösterilecek görünümü sağlıyor.
alterData: HTML kaynak içerisinde metin bazında değişiklik yapmayı sağlıyor.
ignoredTags: HTML kaynak render edilirken belirlenen etiketlerin göz ardı edilmesini sağlıyor.

Sonuç

React Native Render HTML, son zamanlarda kullandığım en temiz üçüncü parti kütüphanelerden birisi. Kullanım senaryoları ve ihtiyaçlar farklılık gösterebildiğinden kütüphane övmeyi pek sevmiyorum ama işini çok iyi yaptığı için hakkında kısaca yazmak istedim.