feat: implement WithLocalSvg

android/src/main/java/com/horcrux/svg/RNSVGRenderableManager.java

@@ -250,7 +250,7 @@ public void getRawResource(String name, Promise promise) {
                 char[] buffer = new char[DEFAULT_BUFFER_SIZE];
                 StringBuilder builder = new StringBuilder();
                 int n;
-                while ((n = reader.read(buffer)) != EOF) {
+                while ((n = reader.read(buffer, 0, DEFAULT_BUFFER_SIZE)) != EOF) {
                     builder.append(buffer, 0, n);
                 }
                 String result = builder.toString();

src/LocalSvg.tsx

@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Component } from 'react';
 import { NativeModules, Platform } from 'react-native';
 // @ts-ignore
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 
 import { fetchText } from './xml';
-import { SvgCss } from './css';
+import { SvgCss, SvgWithCss } from './css';
 
-const { getRawResource } = NativeModules.RNSVGRenderableManager;
+const { getRawResource } = NativeModules.RNSVGRenderableManager || {};
 
 export function getUriFromSource(source?: string | number) {
   const resolvedAssetSource = resolveAssetSource(source);
@@ -49,6 +49,7 @@ export const loadLocalRawResource =
     : loadLocalRawResourceAndroid;
 
 export type LocalProps = { asset?: string | number; override?: Object };
+export type LocalState = { xml: string | null };
 
 export function LocalSvg(props: LocalProps) {
   const { asset, ...rest } = props;
@@ -59,4 +60,31 @@ export function LocalSvg(props: LocalProps) {
   return <SvgCss xml={xml} {...rest} />;
 }
 
+export class WithLocalSvg extends Component<LocalProps, LocalState> {
+  state = { xml: null };
+  componentDidMount() {
+    this.load(this.props.asset);
+  }
+  componentDidUpdate(prevProps: { asset?: string | number }) {
+    const { asset } = this.props;
+    if (asset !== prevProps.asset) {
+      this.load(asset);
+    }
+  }
+  async load(asset?: string | number) {
+    try {
+      this.setState({ xml: asset ? await loadLocalRawResource(asset) : null });
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  render() {
+    const {
+      props,
+      state: { xml },
+    } = this;
+    return <SvgWithCss xml={xml} override={props} />;
+  }
+}
+
 export default LocalSvg;

src/ReactNativeSVG.ts

@@ -31,7 +31,7 @@ import {
   SvgWithCssUri,
   inlineStyles,
 } from './css';
-import { LocalSvg, loadLocalRawResource } from './LocalSvg';
+import { LocalSvg, WithLocalSvg, loadLocalRawResource } from './LocalSvg';
 import {
   RNSVGCircle,
   RNSVGClipPath,
@@ -93,6 +93,7 @@ export {
   SvgWithCssUri,
   inlineStyles,
   LocalSvg,
+  WithLocalSvg,
   loadLocalRawResource,
   Shape,
   RNSVGMarker,