Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
msand committed Feb 13, 2018
1 parent 1e75860 commit 7cc77bb
Showing 1 changed file with 10 additions and 33 deletions.
43 changes: 10 additions & 33 deletions README.md
Expand Up @@ -23,9 +23,9 @@
```bash
npm install react-native-svg --save
```

# NOTICE:

- 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.3.0 only supports react-native >= 0.33.0
Expand All @@ -42,15 +42,15 @@
```bash
react-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

#### Manual

##### Android
Expand All @@ -63,7 +63,7 @@
include ':react-native-svg'
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`:

```
Expand All @@ -73,7 +73,7 @@
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 `new SvgPackage()` to the list returned by the `getPackages()` method. Add a comma to the previous item if there's already something there.

##### iOS

[Manual linking](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)
Expand All @@ -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:

1. Add RNSVG to your Pods
1. Add RNSVG to your Podfile
```
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>

Here's a simple example. To render output like this:
Expand Down Expand Up @@ -182,7 +159,7 @@ 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`
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.
Expand Down

0 comments on commit 7cc77bb

Please sign in to comment.