updated demo to use the SVGImageView

susonthapa · Sep 12, 2023 · a1e0bd1 · a1e0bd1
1 parent 6b1979a
commit a1e0bd1
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 29 deletions.
diff --git a/FlowerIcon.tsx b/FlowerIcon.tsx
@@ -2,26 +2,134 @@ import * as React from "react"
 import Svg, { SvgProps, Path } from "react-native-svg"
 const SvgComponent = (props: SvgProps) => (
   <Svg
+    viewBox="0 0 1024 1024"
     {...props}
   >
     <Path
+      fill="#EC407A"
       d="M964.858 634.71c-5.924 0-11.848-3.384-15.233-9.308-56.7-112.556-279.272-245.422-280.965-247.114-8.463-5.078-11.002-15.233-5.924-22.85 5.078-8.463 15.233-11.002 22.85-5.924 6.77 4.231 116.786 69.395 203.953 150.638-89.705-166.717-189.567-266.578-190.413-268.271-6.77-6.77-6.77-16.926 0-23.696 6.77-6.77 16.926-6.77 23.696 0 5.924 5.924 155.716 157.408 257.27 402.83 3.384 8.463 0 17.772-8.463 22.003-1.693.846-4.232 1.693-6.77 1.693z"
     />
     <Path
+      fill="#FFEE58"
       d="M897.156 583.934a50.777 50.777 0 1 0 101.554 0 50.777 50.777 0 1 0-101.554 0Z"
     />
     <Path
+      fill="#EC407A"
       d="M947.933 651.636c-16.926 0-33.005-5.924-45.7-17.772-13.54-12.694-21.157-28.773-22.003-47.391-.846-17.772 5.924-35.544 17.772-48.238 11.848-13.54 28.774-21.157 47.392-22.004 17.772-.846 35.544 5.924 48.238 17.772 13.54 11.848 21.157 28.774 22.003 47.392.846 17.772-5.924 35.544-17.772 48.238s-28.773 21.157-47.391 22.003h-2.54zm0-101.553h-1.693c-9.309 0-17.772 4.231-23.696 11.001-5.924 6.77-9.309 15.233-9.309 24.542 0 9.31 4.232 17.772 11.002 23.696 13.54 12.695 35.544 11.848 48.238-1.692 5.924-6.77 9.309-15.233 9.309-24.542 0-9.31-4.231-17.772-11.002-23.696-5.924-5.924-14.387-9.31-22.85-9.31zM50.875 634.71c-2.539 0-5.078-.847-6.77-1.693-8.463-3.385-11.848-13.54-8.463-22.003 101.553-245.422 251.345-396.906 257.27-402.83 6.77-6.77 16.925-6.77 23.695 0s6.77 16.926 0 23.696c-.846.846-100.707 101.554-190.413 267.425 87.167-80.397 197.183-146.407 203.954-149.792 8.462-5.078 18.618-1.693 22.85 5.924 5.077 7.617 1.692 18.618-5.925 22.85-2.539 1.692-225.11 134.558-280.965 247.114-3.385 5.924-9.31 9.309-15.233 9.309z"
     />
     <Path
+      fill="#FFEE58"
+      d="M17.024 583.934a50.777 50.777 0 1 0 101.553 0 50.777 50.777 0 1 0-101.553 0Z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M67.8 651.636c-18.618 0-36.39-7.616-49.93-22.003A64.825 64.825 0 0 1 .098 581.395c.846-17.772 8.463-34.697 22.003-47.392 27.081-25.388 70.242-23.696 95.63 3.385 12.694 13.54 18.618 30.467 17.772 48.238-.846 17.772-8.463 34.698-22.003 47.392-12.695 12.694-29.62 18.618-45.7 18.618zm0-101.553c-8.462 0-16.079 3.385-22.85 9.309-6.77 5.924-11 14.387-11 22.85 0 9.308 2.538 17.771 9.308 24.541 12.695 13.541 33.852 14.387 48.238 1.693 6.77-5.924 10.156-14.387 11.002-23.696 0-9.309-2.539-17.772-9.31-24.542-6.77-6.77-16.078-10.155-25.388-10.155z"
+    />
+    <Path
+      fill="#F48FB1"
+      d="M507.867 1007.074c-21.157 0-38.083-16.925-38.083-38.082v-541.62c0-21.157 16.926-38.083 38.083-38.083s38.082 16.926 38.082 38.083v541.62c0 21.157-16.925 38.082-38.082 38.082z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M507.867 1024c-30.467 0-55.009-24.542-55.009-55.008v-541.62c0-30.466 24.542-55.008 55.009-55.008s55.008 24.542 55.008 55.008v541.62c0 30.466-24.542 55.008-55.008 55.008zm0-617.785c-11.848 0-21.157 9.309-21.157 21.157v541.62c0 11.848 9.309 21.157 21.157 21.157s21.157-9.31 21.157-21.157v-541.62c0-11.848-9.31-21.157-21.157-21.157z"
+    />
+    <Path
+      fill="#FCE4EC"
+      d="M203.205 321.587a304.661 304.661 0 1 0 609.323 0 304.661 304.661 0 1 0-609.323 0Z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M507.867 643.174c-177.72 0-321.587-143.868-321.587-321.587S330.148 0 507.867 0s321.586 143.868 321.586 321.587-143.867 321.587-321.586 321.587zm0-609.323c-158.255 0-287.736 129.481-287.736 287.736s129.481 287.735 287.736 287.735 287.735-129.48 287.735-287.735S666.122 33.85 507.867 33.85z"
+    />
+    <Path
+      fill="#F8BBD0"
+      d="M507.867 16.926c-14.387 0-28.774.846-42.314 3.385C613.652 40.62 727.9 168.41 727.9 321.587S613.652 602.552 465.553 622.863c13.54 1.692 27.927 3.385 42.314 3.385 168.41 0 304.66-136.251 304.66-304.661S676.278 16.926 507.868 16.926z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M507.867 186.182c-78.705 0-154.024-28.774-212.417-80.397-3.385-3.385-5.924-7.616-5.924-12.694s1.693-9.31 5.924-12.694C353.843 28.774 429.162 0 507.867 0S661.89 28.774 720.283 80.397c3.385 3.385 5.924 7.616 5.924 12.694s-1.693 9.309-5.924 12.694c-58.393 51.623-133.712 80.397-212.416 80.397zM332.687 93.09c49.93 38.083 111.708 59.24 175.18 59.24s124.403-21.157 175.18-59.24c-49.93-38.083-111.71-59.24-175.18-59.24s-124.404 21.157-175.18 59.24z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M507.867 643.174c-177.72 0-321.587-143.868-321.587-321.587S330.148 0 507.867 0s321.586 143.868 321.586 321.587-143.867 321.587-321.586 321.587zm0-609.323c-158.255 0-287.736 129.481-287.736 287.736s129.481 287.735 287.736 287.735 287.735-129.48 287.735-287.735S666.122 33.85 507.867 33.85z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M507.867 643.174c-9.31 0-16.926-7.617-16.926-16.926V169.256c0-9.309 7.616-16.925 16.926-16.925s16.925 7.616 16.925 16.925v456.992c0 9.309-7.616 16.926-16.925 16.926z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M461.321 308.893a46.545 46.545 0 1 0 93.091 0 46.545 46.545 0 1 0-93.09 0Z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M507.867 372.364c-34.698 0-63.472-28.774-63.472-63.471s28.774-63.472 63.472-63.472 63.47 28.774 63.47 63.472-28.773 63.47-63.47 63.47zm0-93.091c-16.08 0-29.62 13.54-29.62 29.62s13.54 29.62 29.62 29.62 29.62-13.541 29.62-29.62-13.541-29.62-29.62-29.62z"
+    />
+    <Path
+      fill="#FFF"
+      d="M423.238 97.322a12.694 12.694 0 1 0 25.389 0 12.694 12.694 0 1 0-25.389 0Z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M435.933 126.942c-16.08 0-29.62-13.54-29.62-29.62s13.54-29.62 29.62-29.62 29.62 13.541 29.62 29.62-13.541 29.62-29.62 29.62zm0-33.851c-2.54 0-4.232 1.692-4.232 4.231s1.693 4.232 4.232 4.232 4.231-1.693 4.231-4.232-1.692-4.231-4.231-4.231z"
+    />
+    <Path
+      fill="#FFF"
+      d="M567.106 97.322a12.694 12.694 0 1 0 25.389 0 12.694 12.694 0 1 0-25.389 0Z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M579.8 126.942c-16.079 0-29.62-13.54-29.62-29.62s13.541-29.62 29.62-29.62 29.62 13.541 29.62 29.62-13.54 29.62-29.62 29.62zm0-33.851c-2.538 0-4.231 1.692-4.231 4.231s1.693 4.232 4.231 4.232 4.232-1.693 4.232-4.232-1.693-4.231-4.232-4.231z"
+    />
+    <Path
+      fill="#FCE4EC"
+      d="M313.222 262.347a25.388 25.388 0 1 0 50.777 0 25.388 25.388 0 1 0-50.777 0Z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M338.61 304.661c-23.696 0-42.314-18.618-42.314-42.314s18.618-42.314 42.314-42.314 42.314 18.618 42.314 42.314-18.618 42.314-42.314 42.314zm0-50.777c-5.077 0-8.462 3.385-8.462 8.463s3.385 8.463 8.462 8.463 8.463-3.385 8.463-8.463-3.385-8.463-8.463-8.463z"
+    />
+    <Path
+      fill="#FCE4EC"
+      d="M313.222 397.752a25.388 25.388 0 1 0 50.777 0 25.388 25.388 0 1 0-50.777 0Z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M338.61 440.066c-23.696 0-42.314-18.618-42.314-42.314s18.618-42.314 42.314-42.314 42.314 18.618 42.314 42.314-18.618 42.314-42.314 42.314zm0-50.777c-5.077 0-8.462 3.385-8.462 8.463s3.385 8.463 8.462 8.463 8.463-3.385 8.463-8.463-3.385-8.463-8.463-8.463z"
+    />
+    <Path
+      fill="#FCE4EC"
+      d="M380.924 507.769a25.388 25.388 0 1 0 50.777 0 25.388 25.388 0 1 0-50.777 0Z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M406.313 550.083c-23.696 0-42.314-18.619-42.314-42.314s18.618-42.314 42.314-42.314 42.314 18.618 42.314 42.314-18.618 42.314-42.314 42.314zm0-50.777c-5.078 0-8.463 3.385-8.463 8.463s3.385 8.462 8.463 8.462 8.463-3.385 8.463-8.462-3.385-8.463-8.463-8.463z"
+    />
+    <Path
+      fill="#FCE4EC"
+      d="M651.734 262.347a25.388 25.388 0 1 0 50.777 0 25.388 25.388 0 1 0-50.777 0Z"
+    />
+    <Path
+      fill="#EC407A"
+      d="M677.123 304.661c-23.696 0-42.314-18.618-42.314-42.314s18.618-42.314 42.314-42.314 42.314 18.618 42.314 42.314-18.618 42.314-42.314 42.314zm0-50.777c-5.078 0-8.463 3.385-8.463 8.463s3.385 8.463 8.463 8.463 8.463-3.385 8.463-8.463-3.386-8.463-8.463-8.463z"
+    />
+    <Path
+      fill="#FCE4EC"
+      d="M651.734 397.752a25.388 25.388 0 1 0 50.777 0 25.388 25.388 0 1 0-50.777 0Z"
+    />
+    <Path
+      fill="#EC407A"
       d="M677.123 440.066c-23.696 0-42.314-18.618-42.314-42.314s18.618-42.314 42.314-42.314 42.314 18.618 42.314 42.314-18.618 42.314-42.314 42.314zm0-50.777c-5.078 0-8.463 3.385-8.463 8.463s3.385 8.463 8.463 8.463 8.463-3.385 8.463-8.463-3.386-8.463-8.463-8.463z"
     />
     <Path
+      fill="#FCE4EC"
       d="M584.032 507.769a25.388 25.388 0 1 0 50.777 0 25.388 25.388 0 1 0-50.777 0Z"
     />
     <Path
+      fill="#EC407A"
       d="M609.42 550.083c-23.696 0-42.314-18.619-42.314-42.314s18.618-42.314 42.314-42.314 42.314 18.618 42.314 42.314-18.618 42.314-42.314 42.314zm0-50.777c-5.077 0-8.463 3.385-8.463 8.463s3.386 8.462 8.463 8.462 8.463-3.385 8.463-8.462-3.385-8.463-8.463-8.463z"
     />
   </Svg>
 )
+
 export default SvgComponent
diff --git a/SVGDemo.tsx b/SVGDemo.tsx
@@ -45,7 +45,7 @@ const SVGDemo = () => {
       <FlowerIcon style={{
         width: 150,
         height: 150,
-      }} stroke={'pink'} fill='white' strokeWidth={5.0} viewBox='0 0 1024 1024' />
+      }} />
     ).toJSON()
   ), [])
 
@@ -82,36 +82,18 @@ const SVGDemo = () => {
       />
 
       <Text>Off Screen rendering</Text>
-      <SvgRenderer
-        svgProps={{
-          name: 'flower-150-150',
-          width: PixelRatio.getPixelSizeForLayoutSize(150),
-          height: PixelRatio.getPixelSizeForLayoutSize(150),
-        }}
-        style={{
-          backgroundColor: 'pink',
-          width: 0,
-          height: 0,
-        }}
+      <SvgImageView
         svgComponent={svgJson}
-      >
-        <FlowerIcon style={{
-          width: 150,
-          height: 150,
-        }} color='red' stroke={'pink'} fill='white' strokeWidth={5.0} viewBox='0 0 1024 1024' />
-      </SvgRenderer>
-      {/* <SvgImageView
-        svgName="flower-150-150"
         style={{
           width: 150,
           height: 150,
         }}
-      /> */}
+      />
 
-      <FlowerIcon style={{
+      {/* <FlowerIcon style={{
         width: 150,
         height: 150,
-      }} stroke={'pink'} fill='white' strokeWidth={5.0} viewBox='0 0 1024 1024' />
+      }} stroke={'pink'} fill='white' strokeWidth={5.0} viewBox='0 0 1024 1024' /> */}
 
     </View>
   )

diff --git a/android/app/src/main/java/com/svgrendernativeformat/SvgImageViewManager.kt b/android/app/src/main/java/com/svgrendernativeformat/SvgImageViewManager.kt
@@ -12,6 +12,8 @@ import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.UIManagerModule
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.views.view.ReactViewGroup
+import com.svgrendernativeformat.svg.ReactSvgRenderer
+import com.svgrendernativeformat.svg.SvgRenderer
 import com.svgrendernativeformat.svg.SvgRendererManager
 
 class SvgImageViewManager(private val reactContext: ReactContext) :
@@ -46,4 +48,11 @@ class SvgImageViewManager(private val reactContext: ReactContext) :
             }
         }
     }
+
+    @ReactProp(name = "svgComponent")
+    fun setSvgComponent(view: SvgImageView, props: ReadableMap) {
+        val renderer = ReactSvgRenderer(view.context as ThemedReactContext, props)
+        val bitmap = renderer.renderToBitmap()
+        view.setImageBitmap(bitmap)
+    }
 }
diff --git a/android/app/src/main/java/com/svgrendernativeformat/svg/ReactSvgRenderer.kt b/android/app/src/main/java/com/svgrendernativeformat/svg/ReactSvgRenderer.kt
@@ -1,5 +1,6 @@
 package com.svgrendernativeformat.svg
 
+import android.graphics.Bitmap
 import android.view.View
 import android.view.ViewGroup
 import com.facebook.react.bridge.ReadableMap
@@ -12,9 +13,9 @@ import com.horcrux.svg.SvgView
 class ReactSvgRenderer(private val context: ThemedReactContext, private val input: ReadableMap) {
 
 
-    fun renderToBitmap() {
+    fun renderToBitmap(): Bitmap {
         val rootView = renderChildView(null, input) as SvgView
-        rootView.renderToBitmap(413, 413)
+        return rootView.renderToBitmap(413, 413)
     }
 
     private fun renderChildView(parent: View?, childProps: ReadableMap): View {

diff --git a/android/app/src/main/java/com/svgrendernativeformat/svg/SvgRendererManager.kt b/android/app/src/main/java/com/svgrendernativeformat/svg/SvgRendererManager.kt
@@ -106,7 +106,7 @@ class SvgRendererManager(private val reactContext: ReactContext) : ViewGroupMana
     @ReactProp(name = "svgComponent")
     fun setSvgComponent(view: SvgRenderer, props: ReadableMap) {
         val renderer = ReactSvgRenderer(view.context as ThemedReactContext, props)
-        renderer.renderToBitmap()
+        val bitmap = renderer.renderToBitmap()
     }
 
     @ReactProp(name = "svgProps")
@@ -131,9 +131,13 @@ class SvgRendererManager(private val reactContext: ReactContext) : ViewGroupMana
 
     private fun renderView(parent: SvgRenderer, props: SvgProps, child: View) {
         val bitmap = parent.getRenderedBitmap(child) ?: return
-        bitmapCache[props.name] = bitmap
-        renderCallbacks[props.name]?.forEach { it.invoke(bitmap) }
-        renderCallbacks.remove(props.name)
+        cacheBitmap(bitmap, props.name)
+    }
+
+    private fun cacheBitmap(bitmap: Bitmap, name: String) {
+        bitmapCache[name] = bitmap
+        renderCallbacks[name]?.forEach { it.invoke(bitmap) }
+        renderCallbacks.remove(name)
     }
 
     override fun removeViewAt(parent: SvgRenderer, index: Int) {