diff --git a/TestsExample/App.js b/TestsExample/App.js
index 03cca9e8..bfc396ac 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -8,6 +8,7 @@ import Test1813 from './src/Test1813';
 import Test1845 from './src/Test1845';
 import Test2080 from './src/Test2080';
 import PointerEventsBoxNone from './src/PointerEventsBoxNone';
+import Test2071 from './src/Test2071';
 
 export default function App() {
   return <ColorTest />;
diff --git a/TestsExample/src/Test2071.tsx b/TestsExample/src/Test2071.tsx
new file mode 100644
index 00000000..b895f633
--- /dev/null
+++ b/TestsExample/src/Test2071.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {View} from 'react-native';
+import Svg, {Circle, SvgXml} from 'react-native-svg';
+
+export default function App() {
+  const svgXmlWithTransform = `<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100" height="300" viewBox="0 0 100 100" transform="scale(1 -1)">
+  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
+</svg>`;
+  const svgXmlWithEmptyStyle = `<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <circle style=" " cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
+</svg>`;
+
+  const svgg = `
+<svg width="400" height="200">
+  <polygon points="100 100, 180 100, 140 180" fill="black"></polygon>
+  <polygon points="100 100, 180 100, 140 180" fill="red" transform="translate(0, 280), scale(1, -1)"></polygon>
+</svg>
+`;
+
+  const xmll = `en.wikipedia.org/wiki/File:Vector-based_example.svg`;
+
+  return (
+    <View style={{flex: 1}}>
+      <SvgXml
+        onError={() => {}}
+        xml={xmll}
+        fallback={
+          <Svg
+            width={100}
+            height={100}
+            viewBox="0 0 100 100"
+            transform={[{scaleX: 1}, {scaleY: -1}]}>
+            <Circle
+              cx={50}
+              cy={50}
+              r={40}
+              stroke="black"
+              strokeWidth={3}
+              fill="red"
+            />
+          </Svg>
+        }
+      />
+    </View>
+  );
+}
diff --git a/USAGE.md b/USAGE.md
index 966f757a..189a0dd2 100644
--- a/USAGE.md
+++ b/USAGE.md
@@ -122,11 +122,13 @@ export default function TestComponent() {
 
 Both `SvgUri` and `SvgCssUri` log errors to the console, but otherwise ignore them.
 You can set property `onError` if you want to handle errors such as resource not
-existing in a different way.
+existing in a different way and `fallback` if you want to render another component 
+instead in such case.
 
 ```jsx
 import * as React from 'react';
 import { SvgUri } from 'react-native-svg';
+import { SvgFallback } from './components/SvgFallback';
 
 export default () => {
   const [uri, setUri] = React.useState(
@@ -140,6 +142,7 @@ export default () => {
       width="100%"
       height="100%"
       uri={uri}
+      fallback={<SvgFallback />}
     />
   );
 };
diff --git a/src/xml.tsx b/src/xml.tsx
index ff9b02e0..7ae199e3 100644
--- a/src/xml.tsx
+++ b/src/xml.tsx
@@ -81,6 +81,7 @@ export type AdditionalProps = {
   onError?: (error: Error) => void;
   override?: Object;
   onLoad?: () => void;
+  fallback?: JSX.Element;
 };
 
 export type UriProps = SvgProps & { uri: string | null } & AdditionalProps;
@@ -106,17 +107,17 @@ export function SvgAst({ ast, override }: AstProps) {
 export const err = console.error.bind(console);
 
 export function SvgXml(props: XmlProps) {
-  const { onError = err, xml, override } = props;
-  const ast = useMemo<JsxAST | null>(
-    () => (xml !== null ? parse(xml) : null),
-    [xml],
-  );
+  const { onError = err, xml, override, fallback } = props;
 
   try {
+    const ast = useMemo<JsxAST | null>(
+      () => (xml !== null ? parse(xml) : null),
+      [xml],
+    );
     return <SvgAst ast={ast} override={override || props} />;
   } catch (error) {
     onError(error);
-    return null;
+    return fallback ?? null;
   }
 }
 
@@ -129,19 +130,25 @@ export async function fetchText(uri: string) {
 }
 
 export function SvgUri(props: UriProps) {
-  const { onError = err, uri, onLoad } = props;
+  const { onError = err, uri, onLoad, fallback } = props;
   const [xml, setXml] = useState<string | null>(null);
+  const [isError, setIsError] = useState(false);
   useEffect(() => {
     uri
       ? fetchText(uri)
           .then((data) => {
             setXml(data);
+            isError && setIsError(false);
             onLoad?.();
           })
-          .catch(onError)
+          .catch((e) => {
+            onError(e)
+            setIsError(true);
+          })
       : setXml(null);
   }, [onError, uri, onLoad]);
-  return <SvgXml xml={xml} override={props} />;
+  if (isError) return fallback ?? null;
+  return <SvgXml xml={xml} override={props} fallback={fallback} />;
 }
 
 // Extending Component is required for Animated support.