35 border radius and rounded (#37)

* feat(iOS): wip

* feat(iOS): rounded placeholder

* feat(iOS): set corner radius by placeholder's witdh

example/src/App.tsx

@@ -18,7 +18,7 @@ export default function App() {
         style={styles.container}
         contentContainerStyle={styles.contentContainer}
       >
-        <Text>Turbo Image</Text>
+        <Text style={styles.title}>Turbo Image Example</Text>
         {imageURLs.map((url, idx) => (
           <TurboImage
             key={idx}
@@ -28,6 +28,7 @@ export default function App() {
             showActivityIndicator
             fadeDuration={10}
             base64Placeholder={base64Placeholder}
+            rounded
             onSuccess={handleOnSuccess}
             onError={handleOnError}
           />
@@ -45,10 +46,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  title: {
+    fontSize: 30,
+    fontWeight: 'bold',
+  },
   box: {
     marginVertical: 20,
     width: 300,
     height: 200,
-    backgroundColor: 'blue',
   },
 });

ios/TurboImage/TurboImageView.swift

@@ -3,6 +3,8 @@ import React
 
 class TurboImageView : UIView {
 
+  private var placeholder: UIImage?
+  private var cornerRadius: CGFloat?
   lazy var lazyImageView = UIImageView()
   @objc var onError: RCTDirectEventBlock?
   @objc var onSuccess: RCTDirectEventBlock?
@@ -30,13 +32,26 @@ class TurboImageView : UIView {
     }
   }
 
-  @objc var base64Placeholder: String?
+  @objc var base64Placeholder: String? {
+    didSet {
+      placeholder = UIImage(base64Placeholder: base64Placeholder)
+    }
+  }
 
   @objc var fadeDuration: NSNumber = 0.5
 
+  @objc var rounded: Bool = false {
+    didSet {
+      guard let width = placeholder?.size.width else { return }
+      cornerRadius = width
+      placeholder = placeholder?.roundedCorner(with: width)
+    }
+  }
+
   override init(frame: CGRect) {
     super.init(frame: frame)
     addSubview(lazyImageView)
+    layer.masksToBounds = true
     lazyImageView.translatesAutoresizingMaskIntoConstraints = false
     NSLayoutConstraint.activate([
       lazyImageView.topAnchor.constraint(equalTo: topAnchor),
@@ -61,15 +76,26 @@ fileprivate extension TurboImageView {
     guard let url = URL(string: url!)
     else { return }
 
+    let processor = composeProcessor(rounded)
+
     KF.url(url)
       .fade(duration: TimeInterval(truncating: fadeDuration))
-      .placeholder(UIImage(base64Placeholder: base64Placeholder))
-      .onSuccess({ _ in
+      .placeholder(placeholder)
+      .setProcessor(processor)
+      .onSuccess({ result in
         self.onSuccess?(["result": "success"])
       })
       .onFailure({ error in
         self.onError?(["error": error.localizedDescription])
       })
       .set(to: lazyImageView)
   }
+
+  func composeProcessor(_ rounded: Bool?) -> ImageProcessor {
+    var processor: ImageProcessor = DefaultImageProcessor.default
+    if rounded ?? false && (cornerRadius != nil) {
+      processor = processor |> RoundCornerImageProcessor(cornerRadius: cornerRadius!)
+    }
+    return processor
+  }
 }

ios/TurboImage/TurboImageViewManager.m

@@ -12,6 +12,8 @@ @interface RCT_EXTERN_MODULE(TurboImageViewManager, RCTViewManager)
 
 RCT_EXPORT_VIEW_PROPERTY(fadeDuration, NSNumber)
 
+RCT_EXPORT_VIEW_PROPERTY(rounded, BOOL)
+
 RCT_EXPORT_VIEW_PROPERTY(onSuccess, RCTDirectEventBlock)
 
 RCT_EXPORT_VIEW_PROPERTY(onError, RCTDirectEventBlock)

ios/TurboImage/UIImage+Extensions.swift

@@ -1,12 +1,31 @@
 import UIKit
 
 public extension UIImage {
-
-    convenience init?(base64Placeholder: String?) {
-        guard
-            let base64Placeholder,
-            let data = Data(base64Encoded: base64Placeholder, options: .ignoreUnknownCharacters)
-        else { return nil }
-        self.init(data: data)
+
+  convenience init?(base64Placeholder: String?) {
+    guard
+      let base64Placeholder,
+      let data = Data(base64Encoded: base64Placeholder, options: .ignoreUnknownCharacters)
+    else { return nil }
+    self.init(data: data)
+  }
+
+  func roundedCorner(with radius: CGFloat) -> UIImage {
+    let format = UIGraphicsImageRendererFormat()
+    format.scale = scale
+    let renderer = UIGraphicsImageRenderer(size: size, format: format)
+    return renderer.image { rendererContext in
+      let rect = CGRect(origin: .zero, size: size)
+      let path = UIBezierPath(roundedRect: rect,
+                              byRoundingCorners: .allCorners,
+                              cornerRadii: CGSize(width: radius, height: radius))
+      path.close()
+
+      let cgContext = rendererContext.cgContext
+      cgContext.saveGState()
+      path.addClip()
+      draw(in: rect)
+      cgContext.restoreGState()
     }
+  }
 }

src/TurboImage.d.ts

@@ -5,6 +5,7 @@ export interface TurboImageProps extends AccessibilityProps, ViewProps {
   showActivityIndicator?: boolean;
   base64Placeholder?: string;
   fadeDuration?: number;
+  rounded?: boolean;
   onSuccess?: () => void;
   onError?: (error: any) => void;
   ref?: React.Ref<any>;