software-mansion / react-native-svg Goto Github PK

SVG library for React Native, React Native Web, and plain React web projects.

License: MIT License

JavaScript 5.79% Java 30.25% Objective-C 3.76% C 0.28% Ruby 0.43% TypeScript 23.72% C++ 16.14% Objective-C++ 18.73% Shell 0.01% CMake 0.10% Kotlin 0.39% PEG.js 0.41%

react-native-svg's People

Contributors

Stargazers

Watchers

Forkers

iamjagan svajoklis-1 abejfehr gilesbradshaw duhduhdan lucoyzhj chunghe sungjinoh derayga reactjs-alex-alex2006hw jberendes su27 tuckerconnelly liuhong1happy jaydenxu ptmt playing moriadamri laukey nilswloka fujiwaranosai tom-s silverspace sarjuhansaliya suclike 534591395 ryd0rz pz789as pfeiffer steveliles gijoehosaphat underscopeio slycoder aixinshe calvium gorangajic expo kanerogers sammosampson jlala zjfjiayou eubotas weixingsun phplet vzaramel fly486 ghengeveld azerothian robclouth ice-mt king6cong bettle-app mejackreed chengyin eki-ramdhani ptzagk digideskio jeffreycrow jevakallio flatio simchashats albertbrand pixell seacloud9 admmasters rgerd janicduplessis connected-mgosbee connected-io poberwong haki9 shenliqing wonsikin wangcchun roselind chelseazhai dieface gpminsuk liuliangsir anuchito clozr jorge8989 shreditstudio krmao just-me-cy der-kua zhengdianfang chenyongduan maxgraey bamlab dmx-io fotografiska-international davidshore huhuanming bellentuck lucasbento thalescm noilpaw zhiyuanfan anandbhardwaj

react-native-svg's Issues

Text alignment not working

On both iOS and Android, alignment='center' seems to have no effect at all. Text is always left-aligned.

JSON value '<null>' of type NSNULL canot be converted to NSNumber (iOS)

Example

<Svg height="100" width="100"> 
    <Path 
        fill='red' 
        d="M6.5 1C7.9 1 9 2.1 9 3.5c0 .8-.4 1.6-1.1 2.1-.4.2-.9.4-1.4.4s-1-.2-1.4-.4C4.4 5.1 4 4.3 4 3.5 4 2.1       5.1 1 6.5 1m0-1C4.6 0 3 1.6 3 3.5c0 1.2.6 2.2 1.5 2.9.6.4 1.3.6 2 .6s1.4-.2 2-.6c.9-.7 1.5-1.7 1.5-2.9C10 1.6 8.4 0 6.5 0zm3.6 8.9c.6.8.9 1.7.9 2.6v.5H2v-.5c0-1 .3-1.9.9-2.6 1 .7 2.3 1.1 3.6 1.1s2.6-.4 3.6-1.1m.2-1.4C9.3 8.4 8 9 6.5 9s-2.8-.6-3.8-1.5c-1.1 1-1.7 2.4-1.7 4 0 .5.1 1.5.2 1.5h10.6c.1 0 .2-1 .2-1.5 0-1.6-.7-3-1.7-4z"
    /> 
</Svg>

Mostly I am having issues at SerializablePath.curve method which appears to not parse the values correctly in most cases. x + (+c1x) and y + (+c1y) evaluate to NaN often. You check for isNil, but what are you doing for cases in which it is not a number? And are you relying on implicit conversion for floats, ints etc?

Question:Will it be an good solutions for icons SVG Sprites ?

I have tried svg sprites on my web.I am so excited to find **react-native-art-svg.**We can move it to my react-native app 😊

support on Text fill=url(#..)

do we have a schedule to support url fill in Text?
ex:
http://codepen.io/anon/pen/reLGqq

Gradients not rendering in Android React Native 0.20.0

Hi,

I cannot seem to render the gradients in react Native 0.20.0

The screenshot is taken from your example. Any ideas?

Regards

Crashing on Android

Anyone else experiencing crashing on Android?

Details here:
facebook/react-native#6760

Update issues

Hi, I tried updating but i always get this warning ,
Warning: Native component for "RNSVGSvgView" does not exist

Text Support

Hi, this is a fantastically helpful component! I was wondering when you anticipated adding more text features.

Thanks!

strokeCap / strokeLinecap

Hi!

I'm trying to get strokeCap working with Android on this package's version 1.1.1.

Any idea if it's an issue with ART not supporting this yet?

Unable to find this module

Unable to resolve module ./patternReg from node_modules/react-native-svg/lib/extract/extractClipping.js

Dashed paths not working in Android

Paths that have "strokeDasharray" specified show up as solid. The same prop works fine on iOS.

Does origin/originX/originY affect Scale?

It works perfectly when I use it for rotate, but the origin doesn't seem to be affecting the scale. I'm just doing this:

<G origin={'20, 28'} scale={.5}>

Am I missing something?

When I do:

<G origin={'20, 28'} rotate={90}>

it works.

iOS and Android have different support for supporting non string attributes

The below construction works on both iOS and Android.
iOS also works without the (...)toString().
I would suggest to make this consistent.
With preference to have android support numbers as property value.

render()
...
    const cx = 55;
    const cy = 55;
    const rDot = 2;
...
      <LinearGradient id="dotDownGr" x1={(cx - rDot).toString()} y1={(cy).toString()} x2={(cx + rDot).toString()} y2={(cy).toString()}>
          <Stop offset="0.2" stopColor="#1a1a1a" stopOpacity="0.3" />
          <Stop offset="1" stopColor="#ccc" stopOpacity="0.8" />
      </LinearGradient>

Question: Does SVG only have height and width arguments?

Does it have any other properties that can be set?

Documentation for Touchable Elements

Could you please add some docs and examples about Touchable Elements?
Thanks in advance.

Symbol.js TransformError with react native v0.20

react-native-art-svn Symbol.js won't compile with latest react version. Seems like a babel syntax issue.

TransformError: ..../node_modules/react-native-art-svg/elements/Symbol.js: ..../node_modules/react-native-art-svg/elements/Symbol.js: Property left of AssignmentExpression expected node to be of a type ["LVal"] but instead got "ConditionalExpression"

Circle not drawing

I can't seem to render Circles, either fill or stroke. I am using react-native-svg 1.2.2 installed according to the README. When I try the first example combining a Circle and a Rect, I see the yellow Rect with a red border but I don't see any Circle.

[Q] Why it NO LONGER rely on ReactNativeART?

Just want to know reason

react-native 0.26.0

can not run on 0.26.0

Package doesn't work for babel-core 6.8.0+

The entire package does not work with babel-core 6.8.0+.

The reason is because the "this" context does not get passed into almost all of the written code.

i.e.

getChldren() = () => { ... }

this context is not available inside the above code because this is incorrect. It should be...

getChildren() { ... }

The same issue is prevalent pretty much in all of the package.

Element not rendering if it's a component

If you have something like:

<Svg>
   <Rect .../>
   <Text .../>
  <MyComponent .../>
</Svg>

And MyComponent renders an element, for instance Circle, the render method is called but you can't see the new component if the state is updated.

Can`t stroke Text with gradients on iOS

Can`t stroke Text with gradients on iOS.
Failed to find a way to implement this feature right now.

NativeProps on iOs

Trying to run it on ios and getting undefined is not an object

Tried to use same createNativeComponent as for android but got only red borders there, without content.

Animation

Thanks for the great component!

I'm trying to implement some animation with my SVGs. I can't get the built in library to work. I've been playing with react-motion and that kind of works, but the looping is messy and I don't only want to do springs.

Any ideas?

Does Linear Gradient Work with Path fill attribute?

I am trying to use this code and I am not seeing the anything:

<Svg height="36" width="36" viewbox="0 0 24 24" style={{left:6, top:6}}>
        <Defs>
          <LinearGradient id="grad" x1="1" y1="12" x2="23" y2="12">           
            <Stop  offset="0" stopColor="#C4C6C8"/>                           
            <Stop  offset="0.3595" stopColor="#939598"/>                      
            <Stop  offset="0.5867" stopColor="#A2A4A7"/>                      
            <Stop  offset="0.6517" stopColor="#A7A9AC"/>                      
            <Stop  offset="0.8652" stopColor="#A9ABAE"/>                      
            <Stop  offset="1" stopColor="#A7A9AC"/>                           
            <Stop  offset="1" stopColor="#D1D3D4"/>                           
          </LinearGradient>                                                   
        </Defs>                                                               
        <G>
          <Path fill="url(#grad)" d="M18,19H6c-2.8,0-5-2.2-5-4.8c0-2.2,1.5-4.1,3.7-4.6C4.8,8,6.2,6.8,7.9,6.8c0.5,0,1,0.1,1.4,0.3
            C10.2,5.8,11.7,5,13.4,5c2.6,0,4.8,1.9,5,4.4C21,9.6,23,11.7,23,14.2C23,16.8,20.7,19,18,19z M7.9,7.6c-1.3,0-2.3,1-2.3,2.2
            c0,0.2-0.1,0.5-0.4,0.5c-1.9,0.4-3.3,2-3.3,3.9c0,2.2,1.9,3.9,4.1,3.9H18c2.3,0,4.1-1.8,4.1-3.9s-1.9-3.9-4.1-3.9
            c-0.3,0-0.5-0.2-0.5-0.4c0-2.2-1.9-3.9-4.1-3.9c-1.5,0-2.8,0.8-3.6,2C9.8,8,9.6,8,9.5,8.1c-0.1,0-0.3,0-0.4-0.1
            C8.8,7.8,8.3,7.6,7.9,7.6z"/>                                      

        </G>                                                                  
      </Svg>

My illustrator-exported path doesn't work: JSON value '<null>' of type NSNULL canot be converted to NSNumber (iOS)

Here's my code:

<Svg height="100" width="100">
   <Path fill='red' d="M38.459,1.66A0.884,0.884,0,0,1,39,2.5a0.7,0.7,0,0,1-.3.575L23.235,16.092,27.58,26.1a1.4,1.4,0,0,1,.148.3,1.3,1.3,0,0,1,0,.377,1.266,1.266,0,0,1-2.078.991L15.526,20.6l-7.58,4.35a1.255,1.255,0,0,1-.485,0,1.267,1.267,0,0,1-1.277-1.258q0-.01,0-0.02a1.429,1.429,0,0,1,0-.446C7.243,20.253,8.6,16.369,8.6,16.29L3.433,13.545A0.743,0.743,0,0,1,2.9,12.822a0.822,0.822,0,0,1,.623-0.773l8.164-2.972,3.018-8.5A0.822,0.822,0,0,1,15.427,0a0.752,0.752,0,0,1,.752.555l2.563,6.936S37.65,1.727,37.792,1.685A1.15,1.15,0,0,1,38.459,1.66Z"/>
</Svg>

The path is exported from illustrator. I've tried transforming it with svgo, I've tried every export option. Simpler paths work, but this path of a rounded star shape does not. The path works when exported to a browser and in react-mt-svg-lines for the browser, but not in iOS using React Native and this package.

It just feels like it's getting overloaded with the amount of directions in the path since easier paths are working. Any ideas?

Double quoted arguments

Is there a way to enter variables as parameter ? I keep getting an error if the parameter is not in double quotes.

Is there an way to convert the Svg to png stuff

I've test this component in my app to replace all the font icons to svg ones, and it's so great that it works perfectly both on iOS and Android.
but on Android, it force closed if i use the svg icon in ListView, i'think perhaps it's not a good way because the icon will be render in every renderRow method, and it will cause perf issue(?)
so i'm wondering is there an way to render the icon just once( export to a Image source for example) and then be used in the ListView as they are all the same

Touch Events

Is it possible for an SVG to have shapes bound to touch events? I have an svg of a vehicle and I want to be able to tap sections of it to highlight certain areas.

Group makes Defs not working

This works ios and android:

            <Defs>
              <LinearGradient id="outerGr" x1="0" y1="0" x2="110" y2="0">
                <Stop offset="0" stopColor="black" stopOpacity="1" />
                <Stop offset="1" stopColor="#4d4d4d" stopOpacity="1" />
              </LinearGradient>
            </Defs>
            <Circle id="outerCircle" cx="50" "cy"=50 "r"=50 fill="url(#outerGr)" />

This does not work:

             <Defs>
               <LinearGradient id="outerGr" x1="0" y1="0" x2="110" y2="0">
                <Stop offset="0" stopColor="black" stopOpacity="1" />
                <Stop offset="1" stopColor="#4d4d4d" stopOpacity="1" />
               </LinearGradient>
            </Defs> 
            <G> 
              <Circle id="outerCircle" cx="50" "cy"=50 "r"=50 fill="url(#outerGr)" />
            </G>

Circle used as example, other like f.e. Polygon also behave the same.

I'm using react-native 0.24 and react-native-svg 1.2.6

React-native 0.25 is available, could the code be updated to use this version

Hello,

how is the migration to newer released (like 0.25) planned?

strokeDasharray not used on Android

Using the strokeDasharray on android is not creating an appropriate line dash like it does on iOS.

  <Path
    d='M0 0 L0 100'
    fill='none'
    stroke={this.props.primaryColor}
    strokeDasharray='3,3'
    strokeLinecap='butt'
    opacity='0.5'
  />

iOS and Android have different support for supporting non string attributes

render()
...
    const cx = 55;
    const cy = 55;
    const rDot = 2;
...
      <LinearGradient id="dotDownGr" x1={(cx - rDot).toString()} y1={(cy).toString()} x2={(cx + rDot).toString()} y2={(cy).toString()}>
          <Stop offset="0.2" stopColor="#1a1a1a" stopOpacity="0.3" />
          <Stop offset="1" stopColor="#ccc" stopOpacity="0.8" />
      </LinearGradient>

Android: SvgView should have explicit width and height set

I have an SvgView that is being super-imposed over a View, but the view has variable width and height. On iOS, I had no problem specifying <Svg style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}> ... </Svg>, but on Android, I get the following error:

Is this some sort of restriction on android, or a bug?

Renders blank on 0.29.0-rc.0

Might be related to flex layout changes, nothing is rendered, no errors/issues in the console. Tested on iOS. Same code works w/o a single warning on 0.26/0.27 (haven't tested 0.28)

'Gradient' can only receive 'Stop' elements as children

Coming from this issue, I find that the same "SVG" I pasted in that issue gives me an error in react-native-svg. For some reason, my Stop elements must not have the 'Stop' type. Is this a bug?

In the meantime I'm also going to try upgrading my react-native version to see if that solves the issue

LinearGradient fill on Polygons

When I attempt to fill a polygon with a linear gradient, I just get the following error:

The examples only use Ellipse, so I don't know if this is only supported on non-polygon elements, or if this is a bug.

My code is as follows:

import React, { View } from 'react-native'
import { Svg, Defs, LinearGradient, Stop, G, Polygon } from 'react-native-svg'

export function BlueShard (props) {
  return (
    <View style={props.style}>
      <Svg width="15" height="71">
        <Defs>
          <LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="blue-gradient">
            <Stop stopColor="#6ABAD5" stopOpacity="1" offset="0%" />
            <Stop stopColor="#1E9FD6" stopOpacity="1" offset="100%" />
          </LinearGradient>
        </Defs>
        <Polygon fill="url(#blue-gradient)" points='0,0 15,0 0,71' />
      </Svg>
    </View>
  )
}

Scaling SVG with height/width/viewBox?

I'm trying to scale my SVG, which has viewBox='0 0 24 23', down to 16 x 16. However, when I change the width/height properties, the icon does not scale down, it just gets clipped off outside of the 16x16 box.

Icon with viewBox='0 0 24 23' andwidth=24andheight=23`:

Icon with viewBox='0 0 24 23' andwidth=16andheight=16`:

Am I missing something here? Here is my code.

import React from 'react'
import Svg, {
  Path
} from 'react-native-svg'

const AlarmIcon = ({width, height, fill, stroke, viewBox, style}) => {
  return (
    <Svg width={width} height={height} viewBox={viewBox} style={style}>
      <Path stroke={stroke} fill={fill} strokeCap='round' strokeJoin='round' d='M20.5,16.5V11A8.5,8.5,0,0,0,15,3,3,3,0,0,0,9,3,8.49,8.49,0,0,0,3.5,11v5.5a3,3,0,0,1-3,3h23A3,3,0,0,1,20.5,16.5Z'/>
      <Path stroke={stroke} fill={fill} strokeCap='round' strokeJoin='round' d='M15,19.5a3,3,0,0,1-6,0'/>
    </Svg>
  )
}

AlarmIcon.defaultProps = {
  width: 24,
  height: 23,
  stroke: '#fff',
  fill: '#fff',
  viewBox: '0 0 24 23'
}

export default AlarmIcon

Import broken in master

in 4af7dc6 you have changed how you include createReactNativeComponentClass and now that is broken

import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';

cannot read property children of undefined

with

import React, {
  AppRegistry,
  Component,
  Image,
  StyleSheet,
  View,
  ListView,
  Navigator
} from 'react-native';

import Svg,{
    Circle,
    Ellipse,
    G,
    LinearGradient,
    RadialGradient,
    Line,
    Path,
    Polygon,
    Polyline,
    Rect,
    Symbol,
    Text,
    Use,
    Defs,
    Stop
} from 'react-native-art-svg';


var styles = StyleSheet.create({
  container: {
    flex: 1

  }
});

export default class MyApp extends Component {
  render() {

    // Just imagine we're getting loggedInUserID from some other part of the app.
    return(
      <View style={styles.container}>
        <Svg
                height="100"
                width="100"
            >
                <Circle
                    cx="50"
                    cy="50"
                    r="45"
                    stroke="blue"
                    strokeWidth="2.5"
                    fill="green"
                />
                <Rect
                    x="15"
                    y="15"
                    width="70"
                    height="70"
                    stroke="red"
                    strokeWidth="2"
                    fill="yellow"
                />
            </Svg>
          </View>);

  }
}

I get cannot read property children of undefined Svg.js @66:0

Style attribute on SVG makes it not render

Not sure why, but since updating versions an SVG that has a style prop breaks.

e.g an empty object like this means the Circle will no longer show.

<Svg style={{}} >
    <Circle />
</Svg>

Circle not visible in iOS, ok for Android, Ellipse ok on both

I tried the Readme example SVG on android and ios.
The strange effect is that the below Ellipse works on both,
but the Circle is only displayed on android.

<Svg height="100" width="100">
  <Ellipse cx="50" cy="50" rx="45" ry="45" fill="yellow" />
</Svg>

<Svg height="100" width="100">
  <Circle cx="50" cy="50" r="45" fill="yellow" />
</Svg>

Any hints on why this is the case?

i am using "react-native-svg": "^1.2.2",

Unable to use LinearGradient as the stroke of a Path

I'm trying to create a circle with a beautiful gradient, for use as a colour picker.

I found this magnificent solution on StackOverflow done in pure SVG (quite cleverly) but I'm unable to get it to work using this library.

I keep getting an error which states:

Unable to parse color from string "url(#linearA)"

My code is as follows:

<Svg width="300" height="300">
    <Defs>
        <LinearGradient id="linearA" x1="0" y1="0" x2="1" y2="1">
           <Stop offset="0%" stop-color="#01E400"></Stop>
           <Stop offset="100%" stop-color="#FEFF01"></Stop>
        </LinearGradient>
        <LinearGradient id="linearB" x1="0.5" y1="0" x2="0.5" y2="1">
           <Stop offset="0%" stop-color="#FEFF01"></Stop>
           <Stop offset="100%" stop-color="#FF7E00"></Stop>
        </LinearGradient>
        <LinearGradient id="linearC" x1="1" y1="0" x2="0" y2="1">
           <Stop offset="0%" stop-color="#FF7E00"></Stop>
           <Stop offset="100%" stop-color="#FB0300"></Stop>
        </LinearGradient>
        <LinearGradient id="linearD" x1="1" y1="1" x2="0" y2="0">
           <Stop offset="0%" stop-color="#FB0300"></Stop>
           <Stop offset="100%" stop-color="#9B004A"></Stop>
        </LinearGradient>
        <LinearGradient id="linearE" x1="0.5" y1="1" x2="0.5" y2="0">
           <Stop offset="0%" stop-color="#9B004A"></Stop>
           <Stop offset="100%" stop-color="#7D0022"></Stop>
        </LinearGradient>
        <LinearGradient id="linearF" x1="0" y1="1" x2="1" y2="0">
           <Stop offset="0%" stop-color="#7D0022"></Stop>
           <Stop offset="100%" stop-color="#01E400"></Stop>
        </LinearGradient>
    </Defs>
   <Path d="M150 10 a120 120 0 0 1 103.9230 60"
        fill="none" stroke="url(#linearA)" stroke-width="5" />
   <Path d="M253.9230 70 a120 120 0 0 1 0 120"
        fill="none" stroke="url(#linearB)" stroke-width="5" />
   <Path d="M253.9230 190 a120 120 0 0 1 -103.9230 60"
        fill="none" stroke="url(#linearC)" stroke-width="5" />
   <Path d="M150 250 a120 120 0 0 1 -103.9230 -60"
        fill="none" stroke="url(#linearD)" stroke-width="5" />
   <Path d="M46.077 190 a120 120 0 0 1 0 -120"
        fill="none" stroke="url(#linearE)" stroke-width="5" />
   <Path d="M46.077 70 a120 120 0 0 1 103.9230 -60"
        fill="none" stroke="url(#linearF)" stroke-width="5" />
</Svg>

I haven't put very much effort into finding the problem, but could it be because ART is using extractColor instead of extractBrush for strokes?