Merge pull request #27 from plaidev/android-1

[ios] support background src

Nativebrik.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
  s.name = 'Nativebrik'
- s.version = '0.5.4'
+ s.version = '0.5.5'
  s.summary = 'Nativebrik SDK'
  s.description = <<-DESC
 Nativebrik SDK for iOS.

ios/Nativebrik/Nativebrik/component/renderer/flex.swift

@@ -84,6 +84,13 @@ class FlexView: AnimatedUIControl {
 
  self.addSubview(child)
  }
+
+ if childFlexShrink == nil {
+ if let bgSrc = block.data?.frame?.backgroundSrc {
+ let bgSrc = compile(bgSrc, context.getVariable())
+ loadAsyncImageToBackgroundSrc(url: bgSrc, view: self)
+ }
+ }
  }
 
  override func layoutSubviews() {
@@ -143,6 +150,11 @@ class FlexOverflowView: UIScrollView {
  flexView.layer.backgroundColor = .init(gray: 0, alpha: 0)
  self.flexView = flexView
  self.addSubview(flexView)
+
+ if let bgSrc = block.data?.frame?.backgroundSrc {
+ let bgSrc = compile(bgSrc, context.getVariable())
+ loadAsyncImageToBackgroundSrc(url: bgSrc, view: self)
+ }
  }
 
  @objc func onClicked(sender: ClickListener) {

ios/Nativebrik/Nativebrik/component/renderer/image.swift

@@ -18,6 +18,7 @@ class ImageView: AnimatedUIControl {
 
  init(block: UIImageBlock, context: UIBlockContext) {
  super.init(frame: .zero)
+
  let showSkelton = context.isLoading() && hasPlaceholderPath(template: block.data?.src ?? "")
 
  self.configureLayout { layout in
@@ -61,50 +62,107 @@ class ImageView: AnimatedUIControl {
  event: block.data?.onClick
  )
 
- self.asyncLoadImage(url: compiledSrc)
+ loadAsyncImage(url: compiledSrc, view: self, image: self.image)
+ }
+
+ override func layoutSubviews() {
+ super.layoutSubviews()
  }
+}
 
- func asyncLoadImage(url: String) {
- guard let requestUrl = URL(string: url) else {
+func loadAsyncImageToBackgroundSrc(url: String, view: UIView) {
+ guard let requestUrl = URL(string: url) else {
+ return
+ }
+
+ let fallbackSetting = parseImageFallbackToBlurhash(url)
+ let fallback = fallbackSetting.blurhash == "" ? UIImage() : UIImage(
+ blurHash: fallbackSetting.blurhash,
+ size: CGSize(width: CGFloat(fallbackSetting.width), height: CGFloat(fallbackSetting.height))
+ )
+
+ if let fallback = fallback {
+ view.layer.contents = fallback.cgImage
+ view.contentMode = UIView.ContentMode.scaleAspectFill
+ view.clipsToBounds = true
+ }
+
+ nativebrikSession.dataTask(with: requestUrl) { (data, response, error) in
+ if error != nil {
  return
  }
- URLSession.shared.dataTask(with: requestUrl) { (data, response, error) in
- DispatchQueue.main.async { [weak self] in
- if error != nil {
- return
- }
-
- if let imageData = data {
- if isGif(response) {
- UIView.transition(
- with: self?.image ?? UIImageView(),
- duration: 0.2,
- options: .transitionCrossDissolve,
- animations: {
- self?.image.image = UIImage.gifImageWithData(imageData)
- },
- completion: nil)
- } else {
- UIView.transition(
- with: self?.image ?? UIImageView(),
- duration: 0.2,
- options: .transitionCrossDissolve,
- animations: {
- self?.image.image = UIImage(data: imageData)
- },
- completion: nil)
+
+ DispatchQueue.main.async {
+ if let imageData = data {
+ if isGif(response) {
+ guard let image = UIImage.gifImageWithData(imageData) else {
+ return
  }
- self?.layoutSubviews()
+ UIView.transition(
+ with: view,
+ duration: 0.2,
+ options: .transitionCrossDissolve) {
+ view.layer.contents = image.cgImage
+ view.contentMode = UIView.ContentMode.scaleAspectFill
+ view.clipsToBounds = true
+ }
  } else {
- return
+ guard let image = UIImage(data: imageData) else {
+ return
+ }
+ UIView.transition(
+ with: view,
+ duration: 0.2,
+ options: .transitionCrossDissolve,
+ animations: {
+ view.layer.contents = image.cgImage
+ view.contentMode = UIView.ContentMode.scaleAspectFill
+ view.clipsToBounds = true
+ },
+ completion: nil)
  }
+ view.layoutSubviews()
  }
- }.resume()
- }
+ }
+ }.resume()
+}
 
- override func layoutSubviews() {
- super.layoutSubviews()
+func loadAsyncImage(url: String, view: UIView, image: UIImageView) {
+ guard let requestUrl = URL(string: url) else {
+ return
  }
+ nativebrikSession.dataTask(with: requestUrl) { (data, response, error) in
+ DispatchQueue.main.async {
+ if error != nil {
+ return
+ }
+
+ if let imageData = data {
+ if isGif(response) {
+ UIView.transition(
+ with: image,
+ duration: 0.2,
+ options: .transitionCrossDissolve,
+ animations: {
+ image.image = UIImage.gifImageWithData(imageData)
+ },
+ completion: nil)
+ } else {
+ UIView.transition(
+ with: image,
+ duration: 0.2,
+ options: .transitionCrossDissolve,
+ animations: {
+ image.image = UIImage(data: imageData)
+ },
+ completion: nil)
+ }
+ view.layoutSubviews()
+ } else {
+ return
+ }
+ }
+ }.resume()
 }
 
 func isGif(_ response: URLResponse?) -> Boolean {

ios/Nativebrik/Nativebrik/component/renderer/text.swift

@@ -47,6 +47,11 @@ class TextView: AnimatedUIControl {
  context: context,
  event: block.data?.onClick
  )
+
+ if let bgSrc = block.data?.frame?.backgroundSrc {
+ let bgSrc = compile(bgSrc, context.getVariable())
+ loadAsyncImageToBackgroundSrc(url: bgSrc, view: self)
+ }
  }
 
  override func layoutSubviews() {

ios/Nativebrik/Nativebrik/sdk.swift

@@ -9,7 +9,7 @@ import Foundation
 import SwiftUI
 import Combine
 
-public let nativebrikSdkVersion = "0.5.4"
+public let nativebrikSdkVersion = "0.5.5"
 public let isNativebrikAvailable: Bool = {
  if #available(iOS 15.0, *) {
  return true