├── .babelrc ├── .buckconfig ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .watchmanconfig ├── LICENSE ├── README.md ├── android ├── app │ ├── BUCK │ ├── build.gradle │ ├── proguard-rules.pro │ ├── react.gradle │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ └── com │ │ │ └── svgexample │ │ │ ├── MainActivity.java │ │ │ └── MainApplication.java │ │ └── res │ │ ├── mipmap-hdpi │ │ └── ic_launcher.png │ │ ├── mipmap-mdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxhdpi │ │ └── ic_launcher.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradlew ├── gradlew.bat ├── keystores │ ├── BUCK │ └── debug.keystore.properties └── settings.gradle ├── app.json ├── examples.js ├── examples ├── Circle.js ├── Clipping.js ├── Ellipse.js ├── G.js ├── Gradients.js ├── Image.js ├── Line.js ├── PanResponder.js ├── Path.js ├── Polygon.js ├── Polyline.js ├── Rect.js ├── Reusable.js ├── Stroking.js ├── Svg.js ├── Text.js └── TouchEvents.js ├── image.jpg ├── index.android.js ├── index.ios.js ├── ios ├── SvgExample.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ └── SvgExample.xcscheme ├── SvgExample │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Base.lproj │ │ └── LaunchScreen.xib │ ├── Images.xcassets │ │ └── AppIcon.appiconset │ │ │ └── Contents.json │ ├── Info.plist │ └── main.m └── SvgExampleTests │ ├── Info.plist │ └── SvgExampleTests.m ├── main.js └── package.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | charset = utf-8 9 | end_of_line = lf 10 | indent_style = space 11 | indent_size = 4 12 | trim_trailing_whitespace = true 13 | insert_final_newline = true 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules/ 2 | android/ 3 | Example/android/ 4 | ios/ 5 | Example/ios/ 6 | screenShoots/ 7 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "es6": true, 5 | "node": true 6 | }, 7 | 8 | "ecmaFeatures": { 9 | "modules": true, 10 | "jsx": true, 11 | "flow": true 12 | }, 13 | 14 | "plugins": [ 15 | "react" 16 | ], 17 | 18 | // Map from global var to bool specifying if it can be redefined 19 | "globals": { 20 | "__DEV__": true, 21 | "__dirname": false, 22 | "__fbBatchedBridgeConfig": false, 23 | "cancelAnimationFrame": false, 24 | "clearImmediate": true, 25 | "clearInterval": false, 26 | "clearTimeout": false, 27 | "console": false, 28 | "document": false, 29 | "escape": false, 30 | "exports": false, 31 | "fetch": false, 32 | "global": false, 33 | "jest": false, 34 | "Map": true, 35 | "module": false, 36 | "navigator": false, 37 | "process": false, 38 | "Promise": true, 39 | "requestAnimationFrame": true, 40 | "require": false, 41 | "Set": true, 42 | "setImmediate": true, 43 | "setInterval": false, 44 | "setTimeout": false, 45 | "window": false, 46 | "XMLHttpRequest": false, 47 | "alert": true, 48 | "pit": false 49 | }, 50 | 51 | "rules": { 52 | "comma-dangle": 0, // disallow trailing commas in object literals 53 | "no-cond-assign": 1, // disallow assignment in conditional expressions 54 | "no-console": 0, // disallow use of console (off by default in the node environment) 55 | "no-constant-condition": 0, // disallow use of constant expressions in conditions 56 | "no-control-regex": 1, // disallow control characters in regular expressions 57 | "no-debugger": 1, // disallow use of debugger 58 | "no-dupe-keys": 1, // disallow duplicate keys when creating object literals 59 | "no-empty": 0, // disallow empty statements 60 | "no-ex-assign": 1, // disallow assigning to the exception in a catch block 61 | "no-extra-boolean-cast": 1, // disallow double-negation boolean casts in a boolean context 62 | "no-extra-parens": 0, // disallow unnecessary parentheses (off by default) 63 | "no-extra-semi": 1, // disallow unnecessary semicolons 64 | "no-func-assign": 1, // disallow overwriting functions written as function declarations 65 | "no-inner-declarations": 0, // disallow function or variable declarations in nested blocks 66 | "no-invalid-regexp": 1, // disallow invalid regular expression strings in the RegExp constructor 67 | "no-negated-in-lhs": 1, // disallow negation of the left operand of an in expression 68 | "no-obj-calls": 1, // disallow the use of object properties of the global object (Math and JSON) as functions 69 | "no-regex-spaces": 1, // disallow multiple spaces in a regular expression literal 70 | "no-reserved-keys": 0, // disallow reserved words being used as object literal keys (off by default) 71 | "no-sparse-arrays": 1, // disallow sparse arrays 72 | "no-unreachable": 1, // disallow unreachable statements after a return, throw, continue, or break statement 73 | "use-isnan": 1, // disallow comparisons with the value NaN 74 | "valid-jsdoc": 0, // Ensure JSDoc comments are valid (off by default) 75 | "valid-typeof": 1, // Ensure that the results of typeof are compared against a valid string 76 | 77 | // Best Practices 78 | // These are rules designed to prevent you from making mistakes. They either prescribe a better way of doing something or help you avoid footguns. 79 | 80 | "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default) 81 | "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default) 82 | "consistent-return": 0, // require return statements to either always or never specify values 83 | "curly": 1, // specify curly brace conventions for all control statements 84 | "default-case": 0, // require default case in switch statements (off by default) 85 | "dot-notation": 1, // encourages use of dot notation whenever possible 86 | "eqeqeq": 1, // require the use of === and !== 87 | "guard-for-in": 0, // make sure for-in loops have an if statement (off by default) 88 | "no-alert": 0, // disallow the use of alert, confirm, and prompt 89 | "no-caller": 1, // disallow use of arguments.caller or arguments.callee 90 | "no-div-regex": 1, // disallow division operators explicitly at beginning of regular expression (off by default) 91 | "no-else-return": 0, // disallow else after a return in an if (off by default) 92 | "no-eq-null": 0, // disallow comparisons to null without a type-checking operator (off by default) 93 | "no-eval": 1, // disallow use of eval() 94 | "no-extend-native": 1, // disallow adding to native types 95 | "no-extra-bind": 1, // disallow unnecessary function binding 96 | "no-fallthrough": 1, // disallow fallthrough of case statements 97 | "no-floating-decimal": 1, // disallow the use of leading or trailing decimal points in numeric literals (off by default) 98 | "no-implied-eval": 1, // disallow use of eval()-like methods 99 | "no-labels": 1, // disallow use of labeled statements 100 | "no-iterator": 1, // disallow usage of __iterator__ property 101 | "no-lone-blocks": 1, // disallow unnecessary nested blocks 102 | "no-loop-func": 0, // disallow creation of functions within loops 103 | "no-multi-str": 0, // disallow use of multiline strings 104 | "no-native-reassign": 0, // disallow reassignments of native objects 105 | "no-new": 1, // disallow use of new operator when not part of the assignment or comparison 106 | "no-new-func": 1, // disallow use of new operator for Function object 107 | "no-new-wrappers": 1, // disallows creating new instances of String,Number, and Boolean 108 | "no-octal": 1, // disallow use of octal literals 109 | "no-octal-escape": 1, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251"; 110 | "no-proto": 1, // disallow usage of __proto__ property 111 | "no-redeclare": 0, // disallow declaring the same variable more then once 112 | "no-return-assign": 1, // disallow use of assignment in return statement 113 | "no-script-url": 1, // disallow use of javascript: urls. 114 | "no-self-compare": 1, // disallow comparisons where both sides are exactly the same (off by default) 115 | "no-sequences": 1, // disallow use of comma operator 116 | "no-unused-expressions": 0, // disallow usage of expressions in statement position 117 | "no-void": 1, // disallow use of void operator (off by default) 118 | "no-warning-comments": 0, // disallow usage of configurable warning terms in comments": 1, // e.g. TODO or FIXME (off by default) 119 | "no-with": 1, // disallow use of the with statement 120 | "radix": 1, // require use of the second argument for parseInt() (off by default) 121 | "semi-spacing": 1, // require a space after a semi-colon 122 | "vars-on-top": 0, // requires to declare all vars on top of their containing scope (off by default) 123 | "wrap-iife": 0, // require immediate function invocation to be wrapped in parentheses (off by default) 124 | "yoda": 1, // require or disallow Yoda conditions 125 | 126 | // Strict Mode 127 | // These rules relate to using strict mode. 128 | 129 | //"no-extra-strict": 1, // disallow unnecessary use of "use strict"; when already in strict mode 130 | "strict": 0, // require that all functions are run in strict mode 131 | 132 | // Variables 133 | // These rules have to do with variable declarations. 134 | 135 | "no-catch-shadow": 1, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment) 136 | "no-delete-var": 1, // disallow deletion of variables 137 | "no-label-var": 1, // disallow labels that share a name with a variable 138 | "no-shadow": 1, // disallow declaration of variables already declared in the outer scope 139 | "no-shadow-restricted-names": 1, // disallow shadowing of names such as arguments 140 | "no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block 141 | "no-undefined": 0, // disallow use of undefined variable (off by default) 142 | "no-undef-init": 1, // disallow use of undefined when initializing variables 143 | "no-unused-vars": [1, {"vars": "all", "args": "none"}], // disallow declaration of variables that are not used in the code 144 | "no-use-before-define": 0, // disallow use of variables before they are defined 145 | 146 | // Node.js 147 | // These rules are specific to JavaScript running on Node.js. 148 | 149 | "handle-callback-err": 1, // enforces error handling in callbacks (off by default) (on by default in the node environment) 150 | "no-mixed-requires": 1, // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment) 151 | "no-new-require": 1, // disallow use of new operator with the require function (off by default) (on by default in the node environment) 152 | "no-path-concat": 1, // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment) 153 | "no-process-exit": 0, // disallow process.exit() (on by default in the node environment) 154 | "no-restricted-modules": 1, // restrict usage of specified node modules (off by default) 155 | "no-sync": 0, // disallow use of synchronous methods (off by default) 156 | 157 | // Stylistic Issues 158 | // These rules are purely matters of style and are quite subjective. 159 | 160 | "key-spacing": 0, 161 | "comma-spacing": 0, 162 | "no-multi-spaces": 0, 163 | "brace-style": 0, // enforce one true brace style (off by default) 164 | "camelcase": 0, // require camel case names 165 | "consistent-this": [1, "self"], // enforces consistent naming when capturing the current execution context (off by default) 166 | "eol-last": 1, // enforce newline at the end of file, with no multiple empty lines 167 | "func-names": 0, // require function expressions to have a name (off by default) 168 | "func-style": 0, // enforces use of function declarations or expressions (off by default) 169 | "new-cap": 0, // require a capital letter for constructors 170 | "new-parens": 1, // disallow the omission of parentheses when invoking a constructor with no arguments 171 | "no-nested-ternary": 0, // disallow nested ternary expressions (off by default) 172 | "no-array-constructor": 1, // disallow use of the Array constructor 173 | "no-lonely-if": 0, // disallow if as the only statement in an else block (off by default) 174 | "no-new-object": 1, // disallow use of the Object constructor 175 | "no-spaced-func": 1, // disallow space between function identifier and application 176 | //"no-space-before-semi": 1, // disallow space before semicolon 177 | "no-ternary": 0, // disallow the use of ternary operators (off by default) 178 | "no-trailing-spaces": 0, // disallow trailing whitespace at the end of lines 179 | "no-underscore-dangle": 0, // disallow dangling underscores in identifiers 180 | //"no-wrap-func": 1, // disallow wrapping of non-IIFE statements in parens 181 | "no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation 182 | "quotes": [1, "single", "avoid-escape"], // specify whether double or single quotes should be used 183 | "quote-props": 0, // require quotes around object literal property names (off by default) 184 | "semi": 1, // require or disallow use of semicolons instead of ASI 185 | "sort-vars": 0, // sort variables within the same declaration block (off by default) 186 | "keyword-spacing": 1, // require a space after certain keywords (off by default) 187 | "space-in-brackets": 0, // require or disallow spaces inside brackets (off by default) 188 | "space-in-parens": 0, // require or disallow spaces inside parentheses (off by default) 189 | "space-infix-ops": 1, // require spaces around operators 190 | "space-unary-ops": [1, { "words": true, "nonwords": false }], // require or disallow spaces before/after unary operators (words on by default, nonwords off by default) 191 | "max-nested-callbacks": 0, // specify the maximum depth callbacks can be nested (off by default) 192 | "one-var": 0, // allow just one var statement per function (off by default) 193 | "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default) 194 | 195 | // Legacy 196 | // The following rules are included for compatibility with JSHint and JSLint. While the names of the rules may not match up with the JSHint/JSLint counterpart, the functionality is the same. 197 | 198 | "max-depth": 0, // specify the maximum depth that blocks can be nested (off by default) 199 | "max-len": 0, // specify the maximum length of a line in your program (off by default) 200 | "max-params": 0, // limits the number of parameters that can be used in the function declaration. (off by default) 201 | "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default) 202 | "no-bitwise": 1, // disallow use of bitwise operators (off by default) 203 | "no-plusplus": 0, // disallow use of unary operators, ++ and -- (off by default) 204 | 205 | "react/display-name": 0, 206 | "react/jsx-boolean-value": 0, 207 | "react/jsx-no-undef": 1, 208 | "react/jsx-sort-props": 0, 209 | "react/jsx-uses-react": 1, 210 | "react/jsx-uses-vars": 1, 211 | "react/no-did-mount-set-state": 1, 212 | "react/no-did-update-set-state": 1, 213 | "react/no-multi-comp": 0, 214 | "react/no-unknown-property": 0, 215 | "react/prop-types": 0, 216 | "react/react-in-jsx-scope": 0, 217 | "react/self-closing-comp": 1, 218 | "react/wrap-multilines": 0 219 | } 220 | } 221 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | .*/Libraries/react-native/ReactNative.js 16 | 17 | [include] 18 | 19 | [libs] 20 | node_modules/react-native/Libraries/react-native/react-native-interface.js 21 | node_modules/react-native/flow 22 | flow/ 23 | 24 | [options] 25 | emoji=true 26 | 27 | module.system=haste 28 | 29 | experimental.strict_type_args=true 30 | 31 | munge_underscores=true 32 | 33 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 34 | 35 | suppress_type=$FlowIssue 36 | suppress_type=$FlowFixMe 37 | suppress_type=$FixMe 38 | 39 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-5]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 40 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-5]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 41 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 42 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 43 | 44 | unsafe.enable_getters_and_setters=true 45 | 46 | [version] 47 | ^0.45.0 48 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | gradle 31 | local.properties 32 | *.iml 33 | 34 | 35 | # node.js 36 | # 37 | node_modules/ 38 | npm-debug.log 39 | 40 | # BUCK 41 | buck-out/ 42 | \.buckd/ 43 | android/app/libs 44 | *.keystore 45 | 46 | # fastlane 47 | # 48 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 49 | # screenshots whenever they are needed. 50 | # For more information about the recommended setup visit: 51 | # https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md 52 | 53 | fastlane/report.xml 54 | fastlane/Preview.html 55 | fastlane/screenshots 56 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) [2015-2016] [Horcrux] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/magicismight/react-native-svg-example/5a972149f22e0464152d487e6aab015a368ba02a/README.md -------------------------------------------------------------------------------- /android/app/BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | lib_deps = [] 12 | 13 | for jarfile in glob(['libs/*.jar']): 14 | name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')] 15 | lib_deps.append(':' + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | 21 | for aarfile in glob(['libs/*.aar']): 22 | name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')] 23 | lib_deps.append(':' + name) 24 | android_prebuilt_aar( 25 | name = name, 26 | aar = aarfile, 27 | ) 28 | 29 | android_library( 30 | name = "all-libs", 31 | exported_deps = lib_deps, 32 | ) 33 | 34 | android_library( 35 | name = "app-code", 36 | srcs = glob([ 37 | "src/main/java/**/*.java", 38 | ]), 39 | deps = [ 40 | ":all-libs", 41 | ":build_config", 42 | ":res", 43 | ], 44 | ) 45 | 46 | android_build_config( 47 | name = "build_config", 48 | package = "com.svgexample", 49 | ) 50 | 51 | android_resource( 52 | name = "res", 53 | package = "com.svgexample", 54 | res = "src/main/res", 55 | ) 56 | 57 | android_binary( 58 | name = "app", 59 | keystore = "//android/keystores:debug", 60 | manifest = "src/main/AndroidManifest.xml", 61 | package_type = "debug", 62 | deps = [ 63 | ":app-code", 64 | ], 65 | ) 66 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 37 | * // for example: to disable dev mode in the staging build type (if configured) 38 | * devDisabledInStaging: true, 39 | * // The configuration property can be in the following formats 40 | * // 'devDisabledIn${productFlavor}${buildType}' 41 | * // 'devDisabledIn${buildType}' 42 | * 43 | * // the root of your project, i.e. where "package.json" lives 44 | * root: "../../", 45 | * 46 | * // where to put the JS bundle asset in debug mode 47 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 48 | * 49 | * // where to put the JS bundle asset in release mode 50 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 51 | * 52 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 53 | * // require('./image.png')), in debug mode 54 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 55 | * 56 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 57 | * // require('./image.png')), in release mode 58 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 59 | * 60 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 61 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 62 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 63 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 64 | * // for example, you might want to remove it from here. 65 | * inputExcludes: ["android/**", "ios/**"], 66 | * 67 | * // override which node gets called and with what additional arguments 68 | * nodeExecutableAndArgs: ["node"], 69 | * 70 | * // supply additional arguments to the packager 71 | * extraPackagerArgs: [] 72 | * ] 73 | */ 74 | 75 | apply from: "../../node_modules/react-native/react.gradle" 76 | 77 | /** 78 | * Set this to true to create two separate APKs instead of one: 79 | * - An APK that only works on ARM devices 80 | * - An APK that only works on x86 devices 81 | * The advantage is the size of the APK is reduced by about 4MB. 82 | * Upload all the APKs to the Play Store and people will download 83 | * the correct one based on the CPU architecture of their device. 84 | */ 85 | def enableSeparateBuildPerCPUArchitecture = false 86 | 87 | /** 88 | * Run Proguard to shrink the Java bytecode in release builds. 89 | */ 90 | def enableProguardInReleaseBuilds = false 91 | 92 | android { 93 | compileSdkVersion 24 94 | buildToolsVersion '25.0.0' 95 | 96 | defaultConfig { 97 | applicationId "com.svgexample" 98 | minSdkVersion 16 99 | targetSdkVersion 24 100 | versionCode 1 101 | versionName "1.0" 102 | ndk { 103 | abiFilters "armeabi-v7a", "x86" 104 | } 105 | } 106 | splits { 107 | abi { 108 | reset() 109 | enable enableSeparateBuildPerCPUArchitecture 110 | universalApk false // If true, also generate a universal APK 111 | include "armeabi-v7a", "x86" 112 | } 113 | } 114 | buildTypes { 115 | release { 116 | minifyEnabled enableProguardInReleaseBuilds 117 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 118 | } 119 | } 120 | // applicationVariants are e.g. debug, release 121 | applicationVariants.all { variant -> 122 | variant.outputs.each { output -> 123 | // For each separate APK per architecture, set a unique version code as described here: 124 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 125 | def versionCodes = ["armeabi-v7a":1, "x86":2] 126 | def abi = output.getFilter(OutputFile.ABI) 127 | if (abi != null) { // null for the universal-debug, universal-release variants 128 | output.versionCodeOverride = 129 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 130 | } 131 | } 132 | } 133 | } 134 | 135 | dependencies { 136 | compile project(':react-native-svg') 137 | compile fileTree(dir: "libs", include: ["*.jar"]) 138 | compile "com.android.support:appcompat-v7:24.0.1" 139 | compile "com.facebook.react:react-native:+" // From node_modules 140 | } 141 | 142 | // Run this once to be able to run the application with BUCK 143 | // puts all compile dependencies into folder libs for BUCK to use 144 | task copyDownloadableDepsToLibs(type: Copy) { 145 | from configurations.compile 146 | into 'libs' 147 | } 148 | -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # TextLayoutBuilder uses a non-public Android constructor within StaticLayout. 54 | # See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details. 55 | -dontwarn android.text.StaticLayout 56 | 57 | # okhttp 58 | 59 | -keepattributes Signature 60 | -keepattributes *Annotation* 61 | -keep class okhttp3.** { *; } 62 | -keep interface okhttp3.** { *; } 63 | -dontwarn okhttp3.** 64 | 65 | # okio 66 | 67 | -keep class sun.misc.Unsafe { *; } 68 | -dontwarn java.nio.file.* 69 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 70 | -dontwarn okio.** 71 | -------------------------------------------------------------------------------- /android/app/react.gradle: -------------------------------------------------------------------------------- 1 | import org.apache.tools.ant.taskdefs.condition.Os 2 | 3 | def config = project.hasProperty("react") ? project.react : []; 4 | 5 | def bundleAssetName = config.bundleAssetName ?: "index.android.bundle" 6 | def entryFile = config.entryFile ?: "index.android.js" 7 | 8 | // because elvis operator 9 | def elvisFile(thing) { 10 | return thing ? file(thing) : null; 11 | } 12 | 13 | def reactRoot = elvisFile(config.root) ?: file("../../") 14 | def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"] 15 | 16 | void runBefore(String dependentTaskName, Task task) { 17 | Task dependentTask = tasks.findByPath(dependentTaskName); 18 | if (dependentTask != null) { 19 | dependentTask.dependsOn task 20 | } 21 | } 22 | 23 | gradle.projectsEvaluated { 24 | // Grab all build types and product flavors 25 | def buildTypes = android.buildTypes.collect { type -> type.name } 26 | def productFlavors = android.productFlavors.collect { flavor -> flavor.name } 27 | 28 | // When no product flavors defined, use empty 29 | if (!productFlavors) productFlavors.add('') 30 | 31 | productFlavors.each { productFlavorName -> 32 | buildTypes.each { buildTypeName -> 33 | // Create variant and source names 34 | def sourceName = "${buildTypeName}" 35 | def targetName = "${sourceName.capitalize()}" 36 | if (productFlavorName) { 37 | sourceName = "${productFlavorName}${targetName}" 38 | } 39 | 40 | // React js bundle directories 41 | def jsBundleDirConfigName = "jsBundleDir${targetName}" 42 | def jsBundleDir = elvisFile(config."$jsBundleDirConfigName") ?: 43 | file("$buildDir/intermediates/assets/${sourceName}") 44 | 45 | def resourcesDirConfigName = "jsBundleDir${targetName}" 46 | def resourcesDir = elvisFile(config."${resourcesDirConfigName}") ?: 47 | file("$buildDir/intermediates/res/merged/${sourceName}") 48 | def jsBundleFile = file("$jsBundleDir/$bundleAssetName") 49 | 50 | // Bundle task name for variant 51 | def bundleJsAndAssetsTaskName = "bundle${targetName}JsAndAssets" 52 | 53 | def currentBundleTask = tasks.create( 54 | name: bundleJsAndAssetsTaskName, 55 | type: Exec) { 56 | group = "react" 57 | description = "bundle JS and assets for ${targetName}." 58 | 59 | // Create dirs if they are not there (e.g. the "clean" task just ran) 60 | doFirst { 61 | jsBundleDir.mkdirs() 62 | resourcesDir.mkdirs() 63 | } 64 | 65 | // Set up inputs and outputs so gradle can cache the result 66 | inputs.files fileTree(dir: reactRoot, excludes: inputExcludes) 67 | outputs.dir jsBundleDir 68 | outputs.dir resourcesDir 69 | 70 | // Set up the call to the react-native cli 71 | workingDir reactRoot 72 | 73 | // Set up dev mode 74 | def devEnabled = !targetName.toLowerCase().contains("release") 75 | if (Os.isFamily(Os.FAMILY_WINDOWS)) { 76 | commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}", 77 | "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir 78 | } else { 79 | commandLine "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}", 80 | "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir 81 | } 82 | 83 | enabled config."bundleIn${targetName}" ?: targetName.toLowerCase().contains("release") 84 | } 85 | 86 | // Hook bundle${productFlavor}${buildType}JsAndAssets into the android build process 87 | currentBundleTask.dependsOn("merge${targetName}Resources") 88 | currentBundleTask.dependsOn("merge${targetName}Assets") 89 | 90 | runBefore("processArmeabi-v7a${targetName}Resources", currentBundleTask) 91 | runBefore("processX86${targetName}Resources", currentBundleTask) 92 | runBefore("processUniversal${targetName}Resources", currentBundleTask) 93 | runBefore("process${targetName}Resources", currentBundleTask) 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/svgexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.svgexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "SvgExample"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/svgexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.svgexample; 2 | 3 | import android.app.Application; 4 | 5 | import com.facebook.react.ReactApplication; 6 | import com.horcrux.svg.SvgPackage; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.shell.MainReactPackage; 10 | import com.facebook.soloader.SoLoader; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 18 | @Override 19 | public boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | return Arrays.asList( 26 | new MainReactPackage(), 27 | new SvgPackage() 28 | ); 29 | } 30 | }; 31 | 32 | @Override 33 | public ReactNativeHost getReactNativeHost() { 34 | return mReactNativeHost; 35 | } 36 | 37 | @Override 38 | public void onCreate() { 39 | super.onCreate(); 40 | SoLoader.init(this, /* native exopackage */ false); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/magicismight/react-native-svg-example/5a972149f22e0464152d487e6aab015a368ba02a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/magicismight/react-native-svg-example/5a972149f22e0464152d487e6aab015a368ba02a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/magicismight/react-native-svg-example/5a972149f22e0464152d487e6aab015a368ba02a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/magicismight/react-native-svg-example/5a972149f22e0464152d487e6aab015a368ba02a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | SvgExample 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:2.3.3' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | ## Project-wide Gradle settings. 2 | # 3 | # For more details on how to configure your build environment visit 4 | # http://www.gradle.org/docs/current/userguide/build_environment.html 5 | # 6 | # Specifies the JVM arguments used for the daemon process. 7 | # The setting is particularly useful for tweaking memory settings. 8 | # Default value: -Xmx1024m -XX:MaxPermSize=256m 9 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 10 | # 11 | # When configured, Gradle will run in incubating parallel mode. 12 | # This option should only be used with decoupled projects. More details, visit 13 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 14 | # org.gradle.parallel=true 15 | #Tue Nov 07 14:49:35 CST 2017 16 | systemProp.http.proxyHost=127.0.0.1 17 | systemProp.http.proxyPort=6152 18 | android.useDeprecatedNdk=true 19 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # Attempt to set APP_HOME 46 | # Resolve links: $0 may be a link 47 | PRG="$0" 48 | # Need this for relative symlinks. 49 | while [ -h "$PRG" ] ; do 50 | ls=`ls -ld "$PRG"` 51 | link=`expr "$ls" : '.*-> \(.*\)$'` 52 | if expr "$link" : '/.*' > /dev/null; then 53 | PRG="$link" 54 | else 55 | PRG=`dirname "$PRG"`"/$link" 56 | fi 57 | done 58 | SAVED="`pwd`" 59 | cd "`dirname \"$PRG\"`/" >/dev/null 60 | APP_HOME="`pwd -P`" 61 | cd "$SAVED" >/dev/null 62 | 63 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 64 | 65 | # Determine the Java command to use to start the JVM. 66 | if [ -n "$JAVA_HOME" ] ; then 67 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 68 | # IBM's JDK on AIX uses strange locations for the executables 69 | JAVACMD="$JAVA_HOME/jre/sh/java" 70 | else 71 | JAVACMD="$JAVA_HOME/bin/java" 72 | fi 73 | if [ ! -x "$JAVACMD" ] ; then 74 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 75 | 76 | Please set the JAVA_HOME variable in your environment to match the 77 | location of your Java installation." 78 | fi 79 | else 80 | JAVACMD="java" 81 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 82 | 83 | Please set the JAVA_HOME variable in your environment to match the 84 | location of your Java installation." 85 | fi 86 | 87 | # Increase the maximum file descriptors if we can. 88 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 89 | MAX_FD_LIMIT=`ulimit -H -n` 90 | if [ $? -eq 0 ] ; then 91 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 92 | MAX_FD="$MAX_FD_LIMIT" 93 | fi 94 | ulimit -n $MAX_FD 95 | if [ $? -ne 0 ] ; then 96 | warn "Could not set maximum file descriptor limit: $MAX_FD" 97 | fi 98 | else 99 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 100 | fi 101 | fi 102 | 103 | # For Darwin, add options to specify how the application appears in the dock 104 | if $darwin; then 105 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 106 | fi 107 | 108 | # For Cygwin, switch paths to Windows format before running java 109 | if $cygwin ; then 110 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 111 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 112 | JAVACMD=`cygpath --unix "$JAVACMD"` 113 | 114 | # We build the pattern for arguments to be converted via cygpath 115 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 116 | SEP="" 117 | for dir in $ROOTDIRSRAW ; do 118 | ROOTDIRS="$ROOTDIRS$SEP$dir" 119 | SEP="|" 120 | done 121 | OURCYGPATTERN="(^($ROOTDIRS))" 122 | # Add a user-defined pattern to the cygpath arguments 123 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 124 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 125 | fi 126 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 127 | i=0 128 | for arg in "$@" ; do 129 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 130 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 131 | 132 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 133 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 134 | else 135 | eval `echo args$i`="\"$arg\"" 136 | fi 137 | i=$((i+1)) 138 | done 139 | case $i in 140 | (0) set -- ;; 141 | (1) set -- "$args0" ;; 142 | (2) set -- "$args0" "$args1" ;; 143 | (3) set -- "$args0" "$args1" "$args2" ;; 144 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 145 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 146 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 147 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 148 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 149 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 150 | esac 151 | fi 152 | 153 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 154 | function splitJvmOpts() { 155 | JVM_OPTS=("$@") 156 | } 157 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 158 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 159 | 160 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 161 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = "debug", 3 | properties = "debug.keystore.properties", 4 | store = "debug.keystore", 5 | visibility = [ 6 | "PUBLIC", 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'SvgExample' 2 | include ':react-native-svg' 3 | project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android') 4 | 5 | include ':app' 6 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SvgExample", 3 | "displayName": "SvgExample" 4 | } -------------------------------------------------------------------------------- /examples.js: -------------------------------------------------------------------------------- 1 | import * as Svg from './examples/Svg'; 2 | import * as Rect from './examples/Rect'; 3 | import * as Circle from './examples/Circle'; 4 | import * as Ellipse from './examples/Ellipse'; 5 | import * as Line from './examples/Line'; 6 | import * as Polygon from './examples/Polygon'; 7 | import * as Polyline from './examples/Polyline'; 8 | import * as Path from './examples/Path'; 9 | import * as Text from './examples/Text'; 10 | import * as G from './examples/G'; 11 | import * as Stroking from './examples/Stroking'; 12 | import * as Gradients from './examples/Gradients'; 13 | import * as Clipping from './examples/Clipping'; 14 | import * as Image from './examples/Image'; 15 | import * as Reusable from './examples/Reusable'; 16 | import * as TouchEvents from './examples/TouchEvents'; 17 | import * as PanResponder from './examples/PanResponder'; 18 | 19 | export { 20 | Svg, 21 | Rect, 22 | Circle, 23 | Ellipse, 24 | Line, 25 | Polygon, 26 | Polyline, 27 | Path, 28 | Text, 29 | Stroking, 30 | G, 31 | Gradients, 32 | Clipping, 33 | Image, 34 | TouchEvents, 35 | Reusable, 36 | PanResponder 37 | }; 38 | -------------------------------------------------------------------------------- /examples/Circle.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Circle 7 | } from 'react-native-svg'; 8 | 9 | class CircleExample extends Component{ 10 | static title = 'Circle'; 11 | render() { 12 | 13 | return 17 | 23 | ; 24 | } 25 | } 26 | 27 | class StrokeCircle extends Component{ 28 | static title = 'Stroke Circle'; 29 | render() { 30 | return 34 | 42 | ; 43 | } 44 | } 45 | 46 | class StrokeOpacityCircle extends Component{ 47 | static title = 'Circle with strokeOpacity'; 48 | render() { 49 | return 53 | 62 | ; 63 | } 64 | } 65 | 66 | class PieCircle extends Component{ 67 | static title = 'Draw a Pie shape with circle'; 68 | render() { 69 | return 73 | 79 | 90 | ; 91 | } 92 | } 93 | 94 | const icon = 98 | 106 | ; 107 | 108 | const samples = [ 109 | CircleExample, 110 | StrokeCircle, 111 | StrokeOpacityCircle, 112 | PieCircle 113 | ]; 114 | export { 115 | icon, 116 | samples 117 | }; 118 | -------------------------------------------------------------------------------- /examples/Clipping.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | ClipPath, 7 | Defs, 8 | RadialGradient, 9 | Stop, 10 | Rect, 11 | Text, 12 | Ellipse, 13 | G, 14 | Polygon, 15 | Path, 16 | Circle 17 | } from 'react-native-svg'; 18 | 19 | class ClipPathElement extends Component{ 20 | static title = 'Clip by set clip-path with a path data'; 21 | render() { 22 | return 26 | 27 | 28 | 33 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | Q 53 | 54 | 55 | 56 | 64 | ; 65 | } 66 | } 67 | 68 | class ClipRule extends Component{ 69 | static title = 'Clip a group with clipRule="evenodd"'; 70 | render() { 71 | return 75 | 76 | 77 | 78 | 79 | 80 | 84 | 91 | 98 | 105 | 112 | 113 | ; 114 | } 115 | } 116 | 117 | 118 | class TextClipping extends Component{ 119 | static title = 'Transform the text'; 120 | render() { 121 | return 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | NOT THE FACE 151 | ; 152 | } 153 | } 154 | 155 | const icon = 159 | 160 | 161 | 162 | 163 | 164 | 165 | 170 | 171 | 178 | 185 | 192 | 199 | 200 | 201 | ; 202 | 203 | const samples = [ClipPathElement, ClipRule, TextClipping]; 204 | 205 | export { 206 | icon, 207 | samples 208 | }; 209 | -------------------------------------------------------------------------------- /examples/Ellipse.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Ellipse 7 | } from 'react-native-svg'; 8 | 9 | class EllipseExample extends Component{ 10 | static title = 'Ellipse'; 11 | render() { 12 | return 16 | 25 | ; 26 | } 27 | } 28 | 29 | class PileEllipses extends Component{ 30 | static title = 'The following example creates three ellipses on top of each other'; 31 | render() { 32 | return 36 | 37 | 38 | 39 | ; 40 | } 41 | } 42 | 43 | class CombinedEllipses extends Component{ 44 | static title = 'The following example combines two ellipses (one yellow and one white)'; 45 | render() { 46 | return 50 | 51 | 52 | ; 53 | } 54 | } 55 | 56 | const icon = 60 | 69 | ; 70 | 71 | const samples = [EllipseExample, PileEllipses, CombinedEllipses]; 72 | 73 | export { 74 | icon, 75 | samples 76 | }; 77 | -------------------------------------------------------------------------------- /examples/G.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | G, 7 | Circle, 8 | Line, 9 | Rect, 10 | Text, 11 | Use 12 | } from 'react-native-svg'; 13 | 14 | class GExample extends Component{ 15 | static title = 'G children props inherit'; 16 | 17 | constructor() { 18 | super(...arguments); 19 | this.state = { 20 | fill: 'purple' 21 | }; 22 | } 23 | 24 | componentDidMount = () => { 25 | setTimeout(() => { 26 | if (!this._unmounted) { 27 | this.setState({ 28 | fill: '#856' 29 | }); 30 | } 31 | }, 2000); 32 | }; 33 | 34 | componentWillUnmount = () => { 35 | this._unmounted = true; 36 | }; 37 | 38 | render() { 39 | return 43 | 48 | 49 | 54 | 55 | 61 | 67 | 73 | 78 | 79 | ; 80 | } 81 | } 82 | 83 | class GTransform extends Component{ 84 | static title = 'G transform'; 85 | render() { 86 | return 90 | 95 | 103 | 104 | 113 | 114 | 122 | Text grouped with shapes 123 | 124 | 125 | ; 126 | } 127 | } 128 | 129 | const icon = 133 | 138 | 143 | 148 | 154 | 159 | 164 | 165 | ; 166 | 167 | const samples = [GExample, GTransform]; 168 | 169 | export { 170 | icon, 171 | samples 172 | }; 173 | -------------------------------------------------------------------------------- /examples/Gradients.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | import { 5 | View 6 | } from 'react-native'; 7 | import Svg, { 8 | Defs, 9 | LinearGradient, 10 | RadialGradient, 11 | Stop, 12 | Ellipse, 13 | Circle, 14 | Text, 15 | Rect, 16 | G 17 | } from 'react-native-svg'; 18 | 19 | class LinearGradientHorizontal extends Component{ 20 | static title = 'Define an ellipse with a horizontal linear gradient from yellow to red'; 21 | render() { 22 | return 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | ; 34 | } 35 | } 36 | 37 | class LinearGradientRotated extends Component{ 38 | static title = 'Define an ellipse with a rotated linear gradient from yellow to red'; 39 | render() { 40 | return 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | ; 56 | } 57 | } 58 | 59 | class GradientUnits extends Component{ 60 | static title = 'Compare gradientUnits="userSpaceOnUse" width default'; 61 | render() { 62 | return 63 | 67 | 68 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 83 | 84 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | ; 97 | } 98 | } 99 | 100 | class LinearGradientPercent extends Component{ 101 | static title = 'Define a linear gradient in percent unit'; 102 | render() { 103 | return 107 | 108 | 109 | 110 | 111 | 112 | 113 | x1=0% 114 | x2=100% 115 | 116 | ; 117 | } 118 | } 119 | 120 | class RadialGradientExample extends Component{ 121 | static title = 'Define an ellipse with a radial gradient from yellow to purple'; 122 | render() { 123 | return 127 | 128 | 129 | 134 | 139 | 144 | 149 | 150 | 151 | 152 | ; 153 | } 154 | } 155 | 156 | class RadialGradientPercent extends Component{ 157 | static title = 'Define a radial gradient in percent unit'; 158 | render() { 159 | return 163 | 164 | 165 | 170 | 175 | 176 | 177 | 178 | ; 179 | } 180 | } 181 | 182 | class RadialGradientPart extends Component{ 183 | static title = 'Define another ellipse with a radial gradient from white to blue'; 184 | render() { 185 | return 189 | 190 | 191 | 196 | 201 | 202 | 203 | 204 | ; 205 | } 206 | } 207 | 208 | 209 | class FillGradientWithOpacity extends Component{ 210 | static title = 'Fill a radial gradient with fillOpacity prop'; 211 | render() { 212 | return 216 | 217 | 218 | 223 | 228 | 229 | 230 | 231 | ; 232 | } 233 | } 234 | 235 | class FillGradientInRect extends Component{ 236 | static title = 'Fill a radial gradient inside a rect and stroke it'; 237 | render() { 238 | return 242 | 243 | 244 | 249 | 254 | 255 | 256 | 257 | ; 258 | } 259 | } 260 | 261 | const icon = 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | ; 273 | 274 | 275 | const samples = [ 276 | LinearGradientHorizontal, 277 | LinearGradientRotated, 278 | GradientUnits, 279 | LinearGradientPercent, 280 | RadialGradientExample, 281 | RadialGradientPercent, 282 | RadialGradientPart, 283 | FillGradientWithOpacity, 284 | FillGradientInRect 285 | ]; 286 | 287 | export { 288 | icon, 289 | samples 290 | }; 291 | -------------------------------------------------------------------------------- /examples/Image.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Image, 7 | Defs, 8 | Circle, 9 | ClipPath, 10 | Rect, 11 | Text 12 | } from 'react-native-svg'; 13 | 14 | class ImageExample extends Component{ 15 | static title = 'Draw Image with preserveAspectRatio prop'; 16 | 17 | render() { 18 | return 22 | 23 | 24 | 25 | 26 | 27 | 34 | 40 | 41 | 51 | HOGWARTS 59 | ; 60 | } 61 | } 62 | 63 | class ClipImage extends Component{ 64 | static title = 'Clip Image'; 65 | 66 | render() { 67 | return 71 | 72 | 73 | 74 | 75 | 76 | alert('press on Image')} 78 | x="5%" 79 | y="5%" 80 | width="90%" 81 | height="90%" 82 | href={require('../image.jpg')} 83 | opacity="0.6" 84 | clipPath="url(#clip)" 85 | /> 86 | HOGWARTS 94 | ; 95 | } 96 | } 97 | 98 | class DataURI extends Component{ 99 | static title = 'Data URI'; 100 | 101 | render() { 102 | return 106 | 114 | ; 115 | } 116 | } 117 | 118 | const icon = 122 | 129 | ; 130 | 131 | const samples = [ImageExample, ClipImage, DataURI]; 132 | 133 | export { 134 | icon, 135 | samples 136 | }; 137 | -------------------------------------------------------------------------------- /examples/Line.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Line 7 | } from 'react-native-svg'; 8 | 9 | class LineExample extends Component{ 10 | static title = 'Line'; 11 | 12 | render() { 13 | return 17 | 25 | ; 26 | } 27 | } 28 | 29 | class LineWithStrokeLinecap extends Component{ 30 | static title = 'Line'; 31 | 32 | render() { 33 | return 37 | 46 | 55 | 64 | ; 65 | } 66 | } 67 | 68 | const icon = 72 | 80 | ; 81 | 82 | const samples = [LineExample, LineWithStrokeLinecap]; 83 | 84 | export { 85 | icon, 86 | samples 87 | }; 88 | -------------------------------------------------------------------------------- /examples/PanResponder.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import { 6 | PanResponder 7 | } from 'react-native'; 8 | 9 | import Svg, { 10 | Path, 11 | Text, 12 | G, 13 | Line, 14 | Polyline 15 | } from 'react-native-svg'; 16 | 17 | class PanExample extends Component { 18 | static title = 'Bind PanResponder on the SVG Shape'; 19 | 20 | constructor() { 21 | super(...arguments); 22 | this.state = { 23 | x: 0, 24 | y: 0, 25 | hover: false 26 | }; 27 | } 28 | 29 | componentWillMount = () => { 30 | this._panResponder = PanResponder.create({ 31 | onStartShouldSetPanResponder: this._alwaysTrue, 32 | onMoveShouldSetPanResponder: this._alwaysTrue, 33 | onPanResponderGrant: this._handlePanResponderGrant, 34 | onPanResponderMove: this._handlePanResponderMove, 35 | onPanResponderRelease: this._handlePanResponderEnd, 36 | onPanResponderTerminate: this._handlePanResponderEnd 37 | }); 38 | }; 39 | 40 | _previousLeft = 0; 41 | 42 | _previousTop = 0; 43 | 44 | _alwaysTrue = () => true; 45 | 46 | _handlePanResponderMove = (e, gestureState) => { 47 | this.setState({ 48 | x: this._previousLeft + gestureState.dx, 49 | y: this._previousTop + gestureState.dy 50 | }); 51 | }; 52 | 53 | _handlePanResponderGrant = () => { 54 | this.root.setNativeProps({ 55 | opacity: 0.5 56 | }); 57 | }; 58 | 59 | _handlePanResponderEnd = (e, gestureState) => { 60 | this.root.setNativeProps({ 61 | opacity: 1 62 | }); 63 | this._previousLeft += gestureState.dx; 64 | this._previousTop += gestureState.dy; 65 | }; 66 | 67 | 68 | render () { 69 | return 73 | {this.root = ele;}} 75 | x={this.state.x} 76 | y={this.state.y} 77 | > 78 | 86 | STAR 87 | 88 | ; 89 | } 90 | } 91 | 92 | const icon = 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 109 | ; 110 | 111 | const samples = [ 112 | PanExample 113 | ]; 114 | 115 | const scroll = false; 116 | 117 | export { 118 | icon, 119 | samples, 120 | scroll 121 | }; 122 | -------------------------------------------------------------------------------- /examples/Path.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Path, 7 | G, 8 | Circle, 9 | Text 10 | } from 'react-native-svg'; 11 | 12 | class PathExample extends Component{ 13 | static title = 'Path'; 14 | 15 | render() { 16 | return 20 | 23 | 24 | 25 | 29 | ; 30 | } 31 | } 32 | 33 | class UnclosedPath extends Component{ 34 | static title = 'Unclosed paths'; 35 | render() { 36 | return 40 | 46 | ; 47 | } 48 | } 49 | 50 | class BezierCurve extends Component{ 51 | static title = 'The following example creates a quadratic Bézier curve, where A and C are the start and end points, B is the control point'; 52 | render() { 53 | return 57 | 58 | 64 | 70 | 76 | 82 | 88 | 89 | 90 | 91 | 92 | 98 | A 99 | B 100 | C 101 | 102 | 103 | 104 | ; 105 | } 106 | } 107 | const icon = ( 108 | 109 | 110 | 111 | 112 | 113 | 114 | ); 115 | 116 | const samples = [PathExample, UnclosedPath, BezierCurve]; 117 | 118 | export { 119 | icon, 120 | samples 121 | }; 122 | -------------------------------------------------------------------------------- /examples/Polygon.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Polygon, 7 | G, 8 | Path 9 | } from 'react-native-svg'; 10 | 11 | class PolygonExample extends Component{ 12 | static title = 'The following example creates a polygon with three sides'; 13 | 14 | render() { 15 | return 19 | 25 | ; 26 | } 27 | } 28 | 29 | 30 | class FourSidePolygon extends Component{ 31 | static title = 'The following example creates a polygon with four sides'; 32 | render() { 33 | return 37 | 43 | ; 44 | } 45 | } 46 | 47 | class StarPolygon extends Component{ 48 | static title = 'Use the element to create a star'; 49 | render() { 50 | return 54 | 55 | 61 | 62 | ; 63 | } 64 | } 65 | 66 | class EvenOddPolygon extends Component{ 67 | static title = 'Change the fill-rule property to "evenodd"'; 68 | render() { 69 | return 73 | 77 | 83 | 84 | ; 85 | } 86 | } 87 | 88 | const icon = 92 | 93 | 99 | 100 | ; 101 | 102 | const samples = [PolygonExample, FourSidePolygon, StarPolygon, EvenOddPolygon]; 103 | 104 | export { 105 | icon, 106 | samples 107 | }; 108 | -------------------------------------------------------------------------------- /examples/Polyline.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Polyline 7 | } from 'react-native-svg'; 8 | 9 | class PolylineExample extends Component{ 10 | static title = 'The element is used to create any shape that consists of only straight lines'; 11 | render() { 12 | return 16 | 22 | ; 23 | } 24 | } 25 | 26 | class StraightLines extends Component{ 27 | static title = 'Another example with only straight lines'; 28 | render() { 29 | return 33 | 39 | ; 40 | } 41 | } 42 | 43 | class PolylineFill extends Component{ 44 | static title = 'Fill Polyline'; 45 | render() { 46 | return 50 | 56 | ; 57 | } 58 | } 59 | 60 | class PolylineFillStroke extends Component{ 61 | static title = 'Stroke Polyline with strokeLinecap and strokeLinejoin'; 62 | render() { 63 | return 67 | 75 | ; 76 | } 77 | } 78 | 79 | const icon = 83 | 89 | ; 90 | 91 | const samples = [PolylineExample, StraightLines, PolylineFill, PolylineFillStroke]; 92 | 93 | export { 94 | icon, 95 | samples 96 | }; 97 | -------------------------------------------------------------------------------- /examples/Rect.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Rect 7 | } from 'react-native-svg'; 8 | 9 | class RectExample extends Component{ 10 | static title = 'Rect'; 11 | render() { 12 | return 16 | 26 | ; 27 | } 28 | } 29 | 30 | class RectStrokeFill extends Component{ 31 | static title = '`stroke` and `fill` Rect'; 32 | render() { 33 | return 37 | 48 | ; 49 | } 50 | } 51 | 52 | class RoundedRect extends Component{ 53 | static title = 'A rectangle with rounded corners'; 54 | render() { 55 | return 59 | 70 | ; 71 | } 72 | } 73 | 74 | class EllipseRect extends Component{ 75 | static title = 'Rect with different `rx` and `ry`'; 76 | render() { 77 | return 81 | 92 | ; 93 | } 94 | } 95 | 96 | class RoundOverflowRect extends Component{ 97 | static title = 'Rect with `rx` or `ry` overflowed'; 98 | render() { 99 | return 103 | 113 | ; 114 | } 115 | } 116 | 117 | const icon = 121 | 130 | ; 131 | 132 | const samples = [RectExample, RectStrokeFill, RoundedRect, EllipseRect, RoundOverflowRect]; 133 | 134 | export { 135 | icon, 136 | samples 137 | }; 138 | 139 | 140 | -------------------------------------------------------------------------------- /examples/Reusable.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Defs, 7 | G, 8 | Path, 9 | Use, 10 | Symbol, 11 | Circle, 12 | ClipPath, 13 | LinearGradient, 14 | RadialGradient, 15 | Stop, 16 | Rect 17 | } from 'react-native-svg'; 18 | 19 | class UseExample extends Component{ 20 | static title = 'Reuse svg code'; 21 | render() { 22 | return 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ; 38 | } 39 | } 40 | 41 | class UseShapes extends Component{ 42 | static title = 'Using Shapes Outside of a Defs Element'; 43 | render() { 44 | return 48 | 49 | 50 | 51 | 52 | 53 | 54 | ; 55 | } 56 | } 57 | 58 | 59 | class DefsExample extends Component{ 60 | static title = 'Basic Defs usage'; 61 | 62 | render() { 63 | return 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | ; 90 | } 91 | } 92 | 93 | class SymbolExample extends Component{ 94 | static title = 'Symbol example, reuse elements with viewBox prop'; 95 | render() { 96 | return 100 | 101 | 102 | 103 | 104 | 105 | 112 | 119 | 126 | ; 127 | } 128 | } 129 | 130 | const icon = 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | ; 145 | 146 | const samples = [UseExample, UseShapes, DefsExample, SymbolExample]; 147 | 148 | export { 149 | icon, 150 | samples 151 | }; 152 | -------------------------------------------------------------------------------- /examples/Stroking.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Path, 7 | Rect, 8 | G, 9 | Defs, 10 | Stop, 11 | RadialGradient, 12 | Polyline, 13 | ClipPath, 14 | Circle, 15 | Text 16 | } from 'react-native-svg'; 17 | 18 | class StrokeExample extends Component{ 19 | static title = 'The stroke property defines the color of a line, text or outline of an element'; 20 | render() { 21 | return 22 | 23 | 24 | 25 | 26 | 27 | ; 28 | } 29 | } 30 | 31 | class StrokeLinecap extends Component{ 32 | static title = 'The strokeLinecap property defines different types of endings to an open path'; 33 | render() { 34 | return 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ; 43 | } 44 | } 45 | 46 | class StrokeDasharray extends Component{ 47 | static title = 'strokeDasharray'; 48 | render() { 49 | return 50 | 51 | 52 | 53 | 54 | 55 | ; 56 | } 57 | } 58 | 59 | class StrokeDashoffset extends Component{ 60 | static title = 'the strokeDashoffset attribute specifies the distance into the dash pattern to start the dash.'; 61 | render() { 62 | return 63 | 73 | STROKE 85 | ; 86 | } 87 | } 88 | 89 | class StrokePattern extends Component{ 90 | static title = 'Advanced stroke example.'; 91 | render() { 92 | return 93 | 94 | 95 | 100 | 105 | 106 | 107 | 108 | 109 | 110 | 121 | 122 | 130 | ; 131 | } 132 | } 133 | 134 | 135 | const icon = 139 | 140 | 141 | 142 | 143 | 144 | ; 145 | 146 | const samples = [StrokeExample, StrokeLinecap, StrokeDasharray, StrokeDashoffset, StrokePattern]; 147 | export { 148 | icon, 149 | samples 150 | }; 151 | -------------------------------------------------------------------------------- /examples/Svg.js: -------------------------------------------------------------------------------- 1 | import { 2 | StyleSheet, 3 | View, 4 | Image 5 | } from 'react-native'; 6 | 7 | import React, { 8 | Component 9 | } from 'react'; 10 | 11 | const styles = StyleSheet.create({ 12 | container: { 13 | flex: 1, 14 | height: 100, 15 | width: 200 16 | }, 17 | svg: { 18 | flex: 1, 19 | alignSelf: 'stretch' 20 | } 21 | }); 22 | 23 | import Svg, { 24 | Circle, 25 | Rect, 26 | Path, 27 | Line, 28 | G 29 | } from 'react-native-svg'; 30 | 31 | class SvgExample extends Component{ 32 | static title = 'SVG'; 33 | render() { 34 | return 38 | 46 | 55 | ; 56 | } 57 | } 58 | 59 | class SvgOpacity extends Component{ 60 | static title = 'SVG with `opacity` prop'; 61 | render() { 62 | return 67 | 75 | 84 | ; 85 | } 86 | } 87 | 88 | class SvgViewbox extends Component{ 89 | static title = 'SVG with `viewBox="40 20 100 40" and preserveAspectRatio="none"`'; 90 | render() { 91 | return 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | ; 105 | } 106 | } 107 | 108 | class NullComponent extends Component { 109 | render() { 110 | return null; 111 | } 112 | } 113 | 114 | class SvgLayout extends Component{ 115 | static title = 'SVG with flex layout'; 116 | render() { 117 | return 118 | 119 | 120 | 121 | 122 | 123 | 132 | 140 | 148 | 149 | ; 150 | } 151 | } 152 | 153 | class SvgNativeMethods extends Component { 154 | static title = 'Tap the shapes to render the Image below based on the base64-data of the Svg'; 155 | constructor() { 156 | super(...arguments); 157 | this.state = { 158 | base64: null 159 | }; 160 | } 161 | 162 | alert = function () { 163 | this.root.toDataURL(base64 => { 164 | this.setState({ 165 | base64 166 | }); 167 | }); 168 | }; 169 | render() { 170 | return 171 | {this.root = ele;}}> 172 | 173 | 174 | 175 | 176 | 177 | 178 | {this.state.base64 && } 182 | 183 | ; 184 | } 185 | } 186 | 187 | const icon = 191 | 199 | 208 | ; 209 | 210 | const samples = [ 211 | SvgExample, 212 | SvgOpacity, 213 | SvgViewbox, 214 | SvgLayout, 215 | SvgNativeMethods 216 | ]; 217 | 218 | export { 219 | icon, 220 | samples 221 | }; 222 | -------------------------------------------------------------------------------- /examples/Text.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Text, 7 | LinearGradient, 8 | Stop, 9 | Defs, 10 | Path, 11 | G, 12 | TSpan, 13 | TextPath 14 | } from 'react-native-svg'; 15 | 16 | class TextExample extends Component{ 17 | static title = 'Text'; 18 | 19 | render() { 20 | return 24 | I love SVG! 30 | ; 31 | } 32 | } 33 | 34 | class TextRotate extends Component{ 35 | static title = 'Transform the text'; 36 | 37 | render() { 38 | return 42 | I love SVG 49 | I love SVG 56 | I love SVG 64 | ; 65 | } 66 | } 67 | 68 | class TextStroke extends Component{ 69 | static title = 'Stroke the text'; 70 | render() { 71 | return 75 | 76 | 77 | 78 | 79 | 80 | 81 | {['STROKE TEXT']} 91 | ; 92 | } 93 | } 94 | 95 | class TextFill extends Component{ 96 | static title = 'Fill the text with LinearGradient'; 97 | render() { 98 | return 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | FILL TEXT 120 | ; 121 | } 122 | } 123 | 124 | 125 | class TextPathExample extends Component{ 126 | static title = 'Draw text along path'; 127 | 128 | render() { 129 | const path = ` 130 | M 10 20 131 | C 40 10 60 0 80 10 132 | C 100 20 120 30 140 20 133 | C 160 10 180 10 180 10 134 | `; 135 | 136 | return 140 | 141 | 145 | 146 | 147 | 151 | 152 | We go up and down, 153 | then up again 154 | 155 | 156 | 162 | 163 | ; 164 | } 165 | } 166 | 167 | class TSpanExample extends Component{ 168 | static title = 'TSpan nest'; 169 | 170 | render() { 171 | 172 | 173 | return 177 | 178 | tspan line 1 179 | tspan line 2 180 | tspan line 3 181 | 182 | 183 | 12345 184 | 185 | 6 186 | 7 187 | 188 | 89a 189 | 190 | delta on text 191 | ; 192 | } 193 | } 194 | 195 | 196 | const icon = 200 | 字 211 | ; 212 | 213 | const samples = [ 214 | TextExample, 215 | TextRotate, 216 | TextStroke, 217 | TextFill, 218 | TextPathExample, 219 | TSpanExample 220 | ]; 221 | 222 | export { 223 | icon, 224 | samples 225 | }; 226 | -------------------------------------------------------------------------------- /examples/TouchEvents.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | 5 | import Svg, { 6 | Circle, 7 | Path, 8 | Rect, 9 | G, 10 | Text, 11 | ClipPath, 12 | Defs 13 | } from 'react-native-svg'; 14 | 15 | class PressExample extends Component { 16 | static title = 'Press on the red circle or long press on the blue rectangle to trigger the events'; 17 | 18 | render () { 19 | return 23 | alert('Press on Circle')} 29 | /> 30 | alert('Long press on Rect')} 37 | /> 38 | 42 | ; 43 | } 44 | } 45 | 46 | class HoverExample extends Component { 47 | static title = 'Hover the svg path'; 48 | constructor () { 49 | super(...arguments); 50 | this.state = { 51 | hover: false 52 | }; 53 | } 54 | 55 | toggle = () => { 56 | this.setState({hover: !this.state.hover}); 57 | }; 58 | 59 | render () { 60 | return 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 81 | 82 | 83 | ; 84 | } 85 | } 86 | 87 | class GroupExample extends Component { 88 | static title = 'Bind touch events callback on Group element with viewBox'; 89 | 90 | render () { 91 | return 96 | alert('Pressed on G')}> 97 | 98 | 99 | 100 | alert('Pressed on Text')}>H 101 | 102 | 103 | 104 | 105 | ; 106 | } 107 | 108 | } 109 | 110 | const icon = 114 | 115 | 121 | ; 122 | 123 | const samples = [ 124 | PressExample, 125 | HoverExample, 126 | GroupExample 127 | ]; 128 | 129 | export { 130 | icon, 131 | samples 132 | }; 133 | -------------------------------------------------------------------------------- /image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/magicismight/react-native-svg-example/5a972149f22e0464152d487e6aab015a368ba02a/image.jpg -------------------------------------------------------------------------------- /index.android.js: -------------------------------------------------------------------------------- 1 | import './main'; 2 | -------------------------------------------------------------------------------- /index.ios.js: -------------------------------------------------------------------------------- 1 | import './main'; 2 | -------------------------------------------------------------------------------- /ios/SvgExample.xcodeproj/xcshareddata/xcschemes/SvgExample.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /ios/SvgExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /ios/SvgExample/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import 13 | #import 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"SvgExample" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /ios/SvgExample/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /ios/SvgExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /ios/SvgExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | SvgExample 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | UILaunchStoryboardName 28 | LaunchScreen 29 | UIRequiredDeviceCapabilities 30 | 31 | armv7 32 | 33 | UISupportedInterfaceOrientations 34 | 35 | UIInterfaceOrientationPortrait 36 | UIInterfaceOrientationLandscapeLeft 37 | UIInterfaceOrientationLandscapeRight 38 | 39 | UIViewControllerBasedStatusBarAppearance 40 | 41 | NSLocationWhenInUseUsageDescription 42 | 43 | NSAppTransportSecurity 44 | 45 | 46 | NSExceptionDomains 47 | 48 | localhost 49 | 50 | NSExceptionAllowsInsecureHTTPLoads 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /ios/SvgExample/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /ios/SvgExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/SvgExampleTests/SvgExampleTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import 14 | #import 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface SvgExampleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation SvgExampleTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App for react-native-svg library 3 | * https://github.com/magicismight/react-native-svg/tree/master/Example 4 | */ 5 | 'use strict'; 6 | 7 | import React, {Component} from 'react'; 8 | import {Dimensions} from 'react-native'; 9 | 10 | import { 11 | AppRegistry, 12 | StyleSheet, 13 | Text, 14 | View, 15 | ScrollView, 16 | TouchableHighlight, 17 | TouchableOpacity, 18 | Animated, 19 | Easing 20 | } from 'react-native'; 21 | 22 | import { 23 | Svg, 24 | Circle, 25 | Line 26 | } from 'react-native-svg'; 27 | 28 | import * as examples from './examples'; 29 | import 'react-native-root-modal'; 30 | 31 | const hairline = StyleSheet.hairlineWidth; 32 | 33 | const styles = StyleSheet.create({ 34 | container: { 35 | flex: 1, 36 | paddingTop: 20, 37 | alignItems: 'center', 38 | overflow: 'hidden' 39 | }, 40 | content: { 41 | flex: 1, 42 | alignSelf: 'stretch' 43 | }, 44 | contentContainer: { 45 | alignSelf: 'stretch', 46 | borderTopWidth: hairline, 47 | borderTopColor: '#ccc', 48 | borderBottomWidth: hairline, 49 | borderBottomColor: '#ccc', 50 | flexWrap: 'wrap', 51 | flexDirection: 'row', 52 | marginHorizontal: 10 53 | }, 54 | welcome: { 55 | padding: 10, 56 | color: '#f60', 57 | fontSize: 18, 58 | fontWeight: 'bold' 59 | }, 60 | link: { 61 | height: 40, 62 | alignSelf: 'stretch', 63 | width: Dimensions.get('window').width / 2 - 10 64 | }, 65 | title: { 66 | marginLeft: 10 67 | }, 68 | cell: { 69 | height: 40, 70 | paddingHorizontal: 10, 71 | alignSelf: 'stretch', 72 | alignItems: 'center', 73 | flexDirection: 'row', 74 | borderTopWidth: hairline, 75 | borderTopColor: '#ccc', 76 | marginTop: -hairline, 77 | backgroundColor: 'transparent' 78 | }, 79 | modal: { 80 | top: 0, 81 | right: 0, 82 | bottom: 0, 83 | left: 0, 84 | backgroundColor: 'rgba(0, 0, 0, 0.2)' 85 | }, 86 | close: { 87 | position: 'absolute', 88 | right: 20, 89 | top: 40 90 | }, 91 | scroll: { 92 | position: 'absolute', 93 | top: 30, 94 | right: 10, 95 | bottom: 20, 96 | left: 10, 97 | backgroundColor: '#fff' 98 | }, 99 | scrollContent: { 100 | borderTopWidth: hairline, 101 | borderTopColor: '#ccc' 102 | }, 103 | example: { 104 | paddingVertical: 25, 105 | alignSelf: 'stretch', 106 | alignItems: 'center', 107 | borderBottomWidth: hairline, 108 | borderBottomColor: '#ccc' 109 | }, 110 | sampleTitle: { 111 | marginHorizontal: 15, 112 | fontSize: 16, 113 | color: '#666' 114 | } 115 | }); 116 | 117 | const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Gradients', 'Clipping', 'Image', 'TouchEvents', 'PanResponder', 'Reusable']; 118 | 119 | class SvgExample extends Component { 120 | constructor() { 121 | super(...arguments); 122 | this.state = { 123 | modal: false, 124 | scale: new Animated.Value(0) 125 | }; 126 | } 127 | 128 | getSamples = (samples) => { 129 | return samples.map((Sample, i) => 133 | 134 | {Sample.title} 135 | 136 | 137 | ); 138 | }; 139 | 140 | show = (name) => { 141 | if (this.state.modal) { 142 | return; 143 | } 144 | 145 | let example = examples[name]; 146 | if (example) { 147 | let samples = example.samples; 148 | this.state.scale.setValue(0); 149 | Animated.spring(this.state.scale, { 150 | toValue: 1, 151 | useNativeDriver: false 152 | }).start(); 153 | 154 | this.setState({ 155 | modal: true, 156 | content: 157 | {this.getSamples(samples)} 158 | , 159 | scroll: example.scroll !== false 160 | }); 161 | } 162 | }; 163 | 164 | hide = () => { 165 | this.state.scale.setValue(1); 166 | Animated.timing(this.state.scale, { 167 | toValue: 0, 168 | useNativeDriver: false, 169 | easing: Easing.in(Easing.back(2)) 170 | }).start(({finished}) => finished && this.setState({ 171 | modal: false, 172 | content: null 173 | })); 174 | }; 175 | 176 | getExamples = () => { 177 | return names.map(name => { 178 | var icon; 179 | let example = examples[name]; 180 | if (example) { 181 | icon = example.icon; 182 | } 183 | return this.show(name)} 188 | > 189 | 192 | {icon} 193 | {name} 194 | 195 | ; 196 | }); 197 | }; 198 | 199 | render() { 200 | return 203 | 209 | 214 | {this.state.content} 215 | 216 | 219 | 223 | 227 | 233 | 241 | 249 | 250 | 251 | 252 | 253 | 254 | SVG library for React Native 255 | 256 | 259 | {this.getExamples()} 260 | 261 | ; 262 | } 263 | } 264 | 265 | AppRegistry.registerComponent('SvgExample', () => SvgExample); 266 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SvgExample", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "react-native start" 7 | }, 8 | "dependencies": { 9 | "prop-types": "^15.5.10", 10 | "react": "^16.0.0", 11 | "react-native": "^0.50.0", 12 | "react-native-root-modal": "^1.0.4", 13 | "react-native-svg": "^6.0.0-rc12" 14 | } 15 | } 16 | --------------------------------------------------------------------------------