React Native — Average Rengini Alma

• Merhaba 🖐, bu yazımda sizlerle react native ile bir resimde en çok kullanılan rengi alabileceğimiz bir plugin geliştireceğiz. Ve geliştirdiğimiz plugini de halihazırda Cypien AI uygulamasının story paylaşma kısmında kullanıyor olacağız.

Plugin örnek kullanımı

Plugin örnek kullanımı

Plugin olarak kullanmak için npm sayfasını ziyaret edebilirsiniz: https://www.npmjs.com/package/react-native-find-image-color

Başlangıç

• Bu plugin için react-native-webview’i indireceğiz.
• yarn add react-native-webview
• .tsx uzantlı dosyamızı oluşturalı ben ImageColorPick adını veriyorum.
• webview kullanmamız sebebi kullanacağımız resmi canvas üzerinde kullanmak olacak daha sonrasında webview ile göndereceğimiz bir event ile react-native kısmında renk kodunu yaklayacağız.

Kullanacağımız script dosyası

• Burada gördüğünüz üzere get_average_rgb fonksiyonumuz bir base64 türünden resim alıyor bunun sebebi de bazı resim urlleri cors hatasına takılabilir sunucu konfigurasyonlarında canvas ile kullanılması kapatılmış olabilir. Bu yüzden ilk önce base64 e çeviriyoruz.
• Webview içerisinde bu scriptimizi geçelim:

Son

Umarım bu yazım sizlere faydalı olmuştur bana bir sorunuz varsa eğer istediğiniz zaman linkedin üzerinden sorabilirsiniz. Görüşmek üzere Mutlu yıllar 🥳