zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-06-02 23:02:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update README

Browse Source
This commit is contained in:
Mikael Sand
2018-02-13 19:55:49 +02:00
parent 1e7586037c
commit 7cc77bb1d1
1 changed files with 10 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+10 -33
View File
@@ -23,9 +23,9 @@
```bash ```bash
npm install react-native-svg --save npm install react-native-svg --save
``` ```
# NOTICE: # NOTICE:
- react-native-svg >= 3.2.0 only supports react-native >= 0.29.0 - react-native-svg >= 3.2.0 only supports react-native >= 0.29.0
- react-native-svg >= 4.2.0 only supports react-native >= 0.32.0 - react-native-svg >= 4.2.0 only supports react-native >= 0.32.0
- react-native-svg >= 4.3.0 only supports react-native >= 0.33.0 - react-native-svg >= 4.3.0 only supports react-native >= 0.33.0
@@ -42,15 +42,15 @@
```bash ```bash
react-native link react-native-svg react-native link react-native-svg
``` ```
A bug in react-native currently links the tvOS library into the iOS project as well. A bug in react-native currently links the tvOS library into the iOS project as well.
Until the fix is released: Until the fix is released:
https://github.com/facebook/react-native/issues/13783 https://github.com/facebook/react-native/issues/13783
https://github.com/facebook/react-native/commit/a63fd378a47173cc9f750e9980f18dc12dd7ea51 https://github.com/facebook/react-native/commit/a63fd378a47173cc9f750e9980f18dc12dd7ea51
Follow the instructions here: https://github.com/react-native-community/react-native-svg/issues/544 Follow the instructions here: https://github.com/react-native-community/react-native-svg/issues/544
#### Manual #### Manual
##### Android ##### Android
@@ -63,7 +63,7 @@
include ':react-native-svg' include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android') project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
``` ```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
``` ```
@@ -73,7 +73,7 @@
4. Open up `android/app/src/main/java/[...]/MainApplication.java 4. 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 `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. - Add `new SvgPackage()` to the list returned by the `getPackages()` method. Add a comma to the previous item if there's already something there.
##### iOS ##### iOS
[Manual linking](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking) [Manual linking](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)
@@ -88,34 +88,11 @@ To install react-native-svg on iOS visit the link referenced above or do the fol
Alternatively, you can use [CocoaPods](https://cocoapods.org/) to manage your native (Objective-C and Swift) dependencies: Alternatively, you can use [CocoaPods](https://cocoapods.org/) to manage your native (Objective-C and Swift) dependencies:
1. Add RNSVG to your Pods 1. Add RNSVG to your Podfile
``` ```
pod 'RNSVG', :path => '../node_modules/react-native-svg' pod 'RNSVG', :path => '../node_modules/react-native-svg'
``` ```
2. Add [this](https://github.com/msand/SVGPodTest/blob/fe45f88a936181e6ecaddeb68268d33268b56121/ios/Podfile#L66-L70) to the end of your Podfile
```
post_install do |installer|
installer.pods_project.targets.each do |target|
if target.name == 'yoga'
# Workaround: react-native v0.52 bug issue #17274
# node_modules/react-native/ReactCommon/yoga/yoga/YGNodePrint.cpp:208:46: Implicit conversion loses integer
# precision: 'size_type' (aka 'unsigned long') to 'const uint32_t' (aka 'const unsigned int')
# https://github.com/facebook/react-native/issues/17274#issuecomment-356363557
target.build_configurations.each do |config|
config.build_settings['GCC_TREAT_WARNINGS_AS_ERRORS'] = 'NO'
config.build_settings['GCC_WARN_64_TO_32_BIT_CONVERSION'] = 'NO'
end
end
if target.name == "RNSVG"
target.build_configurations.each do |config|
config.build_settings['GCC_NO_COMMON_BLOCKS'] = 'NO'
end
end
end
end
```
### <a name="Usage">Usage</a> ### <a name="Usage">Usage</a>
Here's a simple example. To render output like this: Here's a simple example. To render output like this:
@@ -182,7 +159,7 @@ Name | Default | Description
----------------|------------|-------------- ----------------|------------|--------------
fill | '#000' | The fill prop refers to the color inside the shape. 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. 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` 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. 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. 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. strokeOpacity | 1 | The strokeOpacity prop specifies the opacity of the outline on the current object.