Name: react-native-svg
Owner: React Native Community
Description: SVG library for React Native.
Created: 2016-01-17 14:29:21.0
Updated: 2018-05-24 13:07:49.0
Pushed: 2018-05-10 16:02:11.0
Size: 11895
Language: Java
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
react-native-svg
is built to provide a SVG interface to react native on both iOS and Android.
With Expo, this is pre-installed. Jump ahead to Usage
Install library from npm
install react-native-svg --save
Link native code
t-native link react-native-svg
A bug in react-native currently links the tvOS library into the iOS project as well.
Until the fix is released: https://github.com/facebook/react-native/issues/13783 https://github.com/facebook/react-native/commit/a63fd378a47173cc9f750e9980f18dc12dd7ea51
Follow the instructions here: https://github.com/react-native-community/react-native-svg/issues/544
npm install react-native-svg --save
Append the following lines to android/settings.gradle
:
ude ':react-native-svg'
ect(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
Insert the following lines inside the dependencies block in android/app/build.gradle
:
ile project(':react-native-svg')
Open up `android/app/src/main/java/[…]/MainApplication.java
Add import com.horcrux.svg.SvgPackage;
to the imports at the top of the file
Add new SvgPackage()
to the list returned by the getPackages()
method. Add a comma to the previous item if there's already something there.
To install react-native-svg on iOS visit the link referenced above or do the following:
Alternatively, you can use CocoaPods to manage your native (Objective-C and Swift) dependencies:
'RNSVG', :path => '../node_modules/react-native-svg'
Here's a simple example. To render output like this:
Use the following code:
rt 'react';
rt Svg,{
Circle,
Ellipse,
G,
LinearGradient,
RadialGradient,
Line,
Path,
Polygon,
Polyline,
Rect,
Symbol,
Text,
Use,
Defs,
Stop
om 'react-native-svg';
s SvgExample extends Component {
render() {
return (
<Svg
height="100"
width="100"
>
<Circle
cx="50"
cy="50"
r="45"
stroke="blue"
strokeWidth="2.5"
fill="green"
/>
<Rect
x="15"
y="15"
width="70"
height="70"
stroke="red"
strokeWidth="2"
fill="yellow"
/>
</Svg>
);
}
Name | Default | Description
—————-|————|————–
fill | '#000' | The fill prop refers to the color inside the shape.
fillOpacity | 1 | This prop specifies the opacity of the color or the content the current object is filled with.
fillRule | nonzero | The fillRule prop determines what side of a path is inside a shape, which determines how fill will paint the shape, can be nonzero
or evenodd
stroke | 'none' | The stroke prop controls how the outline of a shape appears.
strokeWidth | 1 | The strokeWidth prop specifies the width of the outline on the current object.
strokeOpacity | 1 | The strokeOpacity prop specifies the opacity of the outline on the current object.
strokeLinecap | 'square' | The strokeLinecap prop specifies the shape to be used at the end of open subpaths when they are stroked. Can be either 'butt'
, 'square'
or 'round'
.
strokeLinejoin | 'miter' | The strokeLinejoin prop specifies the shape to be used at the corners of paths or basic shapes when they are stroked. Can be either 'miter'
, 'bevel'
or 'round'
.
strokeDasharray | [] | The strokeDasharray prop controls the pattern of dashes and gaps used to stroke paths.
strokeDashoffset| null | The strokeDashoffset prop specifies the distance into the dash pattern to start the dash.
x | 0 | Translate distance on x-axis.
y | 0 | Translate distance on y-axis.
rotation | 0 | Rotation degree value on the current object.
scale | 1 | Scale value on the current object.
origin | 0, 0 | Transform origin coordinates for the current object.
originX | 0 | Transform originX coordinates for the current object.
originY | 0 | Transform originY coordinates for the current object.
height="100"
width="100"
<Rect x="0" y="0" width="100" height="100" fill="black" />
<Circle cx="50" cy="50" r="30" fill="yellow" />
<Circle cx="40" cy="40" r="4" fill="black" />
<Circle cx="60" cy="40" r="4" fill="black" />
<Path d="M 40 60 A 10 10 0 0 0 60 60" stroke="black" />
g>
The
width="200"
height="60"
<Rect
x="25"
y="5"
width="150"
height="50"
fill="rgb(0,0,255)"
strokeWidth="3"
stroke="rgb(0,0,0)"
/>
g>
Code explanation:
The
height="100"
width="100"
<Circle
cx="50"
cy="50"
r="50"
fill="pink"
/>
g>
Code explanation:
The
An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
height="100"
width="110"
<Ellipse
cx="55"
cy="55"
rx="50"
ry="30"
stroke="purple"
strokeWidth="2"
fill="yellow"
/>
g>
Code explanation:
The
height="100"
width="100"
<Line
x1="0"
y1="0"
x2="100"
y2="100"
stroke="red"
strokeWidth="2"
/>
g>
Code explanation:
The
height="100"
width="100"
<Polygon
points="40,5 70,80 25,95"
fill="lime"
stroke="purple"
strokeWidth="1"
/>
g>
Code explanation:
The
height="100"
width="100"
<Polyline
points="10,10 20,12 30,20 40,60 60,70 95,90"
fill="none"
stroke="black"
strokeWidth="3"
/>
g>
Code explanation:
The
The following commands are available for path data:
Note:
All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.
height="100"
width="100"
<Path
d="M25 10 L98 65 L70 25 L16 77 L11 30 L0 4 L90 50 L50 10 L11 22 L77 95 L20 25"
fill="none"
stroke="red"
/>
g>
The
height="60"
width="200"
<Text
fill="none"
stroke="purple"
fontSize="20"
fontWeight="bold"
x="100"
y="20"
textAnchor="middle"
>STROKED TEXT</Text>
g>
The
height="160"
width="200"
<Text y="20" dx="5 5">
<TSpan x="10" >tspan line 1</TSpan>
<TSpan x="10" dy="15">tspan line 2</TSpan>
<TSpan x="10" dx="10" dy="15">tspan line 3</TSpan>
</Text>
<Text x="10" y="60" fill="red" fontSize="14">
<TSpan dy="5 10 20" >12345</TSpan>
<TSpan fill="blue" dy="15" dx="0 5 5">
<TSpan>6</TSpan>
<TSpan>7</TSpan>
</TSpan>
<TSpan dx="0 10 20" dy="0 20" fontWeight="bold" fontSize="12">89a</TSpan>
</Text>
<Text y="140" dx="0 5 5" dy="0 -5 -5">delta on text</Text>
g>
In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a
height="100"
width="200"
<Defs>
<Path
id="path"
d={path}
/>
</Defs>
<G y="20">
<Text
fill="blue"
>
<TextPath href="#path" startOffset="-10%">
We go up and down,
<TSpan fill="red" dy="5,5,5">then up again</TSpan>
</TextPath>
</Text>
<Path
d={path}
fill="none"
stroke="red"
strokeWidth="1"
/>
</G>
g>
The
height="100"
width="200"
<G
rotation="50"
origin="100, 50"
>
<Line
x1="60"
y1="10"
x2="140"
y2="10"
stroke="#060"
/>
<Rect
x="60"
y="20"
height="50"
width="80"
stroke="#060"
fill="#060"
/>
<Text
x="100"
y="75"
stroke="#600"
fill="#600"
textAnchor="middle"
>
Text grouped with shapes</Text>
</G>
g>
The
height="100"
width="300"
<Defs>
<G id="shape">
<G>
<Circle cx="50" cy="50" r="50" />
<Rect x="50" y="50" width="50" height="50" />
<Circle cx="50" cy="50" r="5" fill="blue" />
</G>
</G>
</Defs>
<Use href="#shape" x="20" y="0"/>
<Use href="#shape" x="170"y="0" />
g>
This example shows a
Before the
The
The SVG
height="150"
width="110"
<Symbol id="symbol" viewBox="0 0 150 110" width="100" height="50">
<Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
<Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
</Symbol>
<Use
href="#symbol"
x="0"
y="0"
/>
<Use
href="#symbol"
x="0"
y="50"
width="75"
height="38"
/>
<Use
href="#symbol"
x="0"
y="100"
width="50"
height="25"
/>
g>
The
The
height="100"
width="100"
<Defs>
<ClipPath id="clip">
<Circle cx="50%" cy="50%" r="40%"/>
</ClipPath>
</Defs>
<Rect
x="0"
y="0"
width="100%"
height="100%"
fill="red"
/>
<Rect
x="5%"
y="5%"
width="50%"
height="90%"
/>
<Image
x="5%"
y="5%"
width="50%"
height="90%"
preserveAspectRatio="xMidYMid slice"
opacity="0.5"
href={require('../image.jpg')}
clipPath="url(#clip)"
/>
<Text
x="50"
y="50"
textAnchor="middle"
fontWeight="bold"
fontSize="16"
fill="blue"
>HOGWARTS</Text>
g>
The
height="100"
width="100"
<Defs>
<RadialGradient id="grad" cx="50%" cy="50%" rx="50%" ry="50%" fx="50%" fy="50%" gradientUnits="userSpaceOnUse">
<Stop
offset="0%"
stopColor="#ff0"
stopOpacity="1"
/>
<Stop
offset="100%"
stopColor="#00f"
stopOpacity="1"
/>
</RadialGradient>
<ClipPath id="clip">
<G scale="0.9" x="10">
<Circle cx="30" cy="30" r="20"/>
<Ellipse cx="60" cy="70" rx="20" ry="10" />
<Rect x="65" y="15" width="30" height="30" />
<Polygon points="20,60 20,80 50,70" />
<Text
x="50"
y="30"
fontSize="32"
fonWeight="bold"
textAnchor="middle"
scale="1.2"
>Q</Text>
</G>
</ClipPath>
</Defs>
<Rect
x="0"
y="0"
width="100"
height="100"
fill="url(#grad)"
clipPath="url(#clip)"
/>
g>
The
Linear gradients can be defined as horizontal, vertical or angular gradients:
height="150"
width="300"
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="170" y2="0">
<Stop offset="0" stopColor="rgb(255,255,0)" stopOpacity="0" />
<Stop offset="1" stopColor="red" stopOpacity="1" />
</LinearGradient>
</Defs>
<Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
g>
Code explanation:
NOTICE: LinearGradient also supports percentage as prop:
earGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
<Stop offset="100%" stopColor="red" stopOpacity="1" />
nearGradient>
This result is same as the example before. But it's recommend to use exact number instead; it has performance advantages over using percentages.
The
height="150"
width="300"
<Defs>
<RadialGradient id="grad" cx="150" cy="75" rx="85" ry="55" fx="150" fy="75" gradientUnits="userSpaceOnUse">
<Stop
offset="0"
stopColor="#ff0"
stopOpacity="1"
/>
<Stop
offset="1"
stopColor="#83a"
stopOpacity="1"
/>
</RadialGradient>
</Defs>
<Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
g>
Code explanation:
Touch events are supported in react-native-svg. These include:
disabled
onPress
onPressIn
onPressOut
onLongPress
delayPressIn
delayPressOut
delayLongPress
You can use these events to provide interactivity to your react-native-svg components.
cle
cx="50%"
cy="50%"
r="38%"
fill="red"
onPress={() => alert('Press on Circle')}
For more examples of touch in action, checkout the TouchEvents.js examples.
clone https://github.com/magicismight/react-native-svg-example.git
eact-native-svg-example
i
n Android: react-native run-android
n iOS: react-native run-ios