mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-05 22:56:11 +00:00
b3b175a7fb
# Summary Due to the large number of example apps in the repository, I decided to change the structure and move all applications into an "apps" folder to maintain a clear structure.
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|