diff --git a/README.md b/README.md index bfd83e241..dfb1eafa1 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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 @@ -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`: ``` @@ -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) @@ -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 -``` - ### Usage 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. 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.