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

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

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>
  )
}

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",

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>

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.

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?

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

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?

Hey, i try use Your module, but LinearGradient work only on IOS.
Can You help me?

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

I have a bunch of SVG files that I'd like to render in my app. Is there a way to render them with this module? I could imagine a parser that outputs a React render tree.

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

can not run on 0.26.0

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>

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?

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'
  />

It would be great to be able to use this in my Podfile so I don't have to mess with project settings in xcode every time I use this in a project.

Not a huge priority, but it would help alleviate simple issues.

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>

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>

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.

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"

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

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.

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

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

This error occured when I updated to new version 1.1
Property 'strokeDash' not found on object of type 'RNSVGPath

Does it have any other properties that can be set?

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

import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass';

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

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

Hi,

I cannot seem to render the gradients in react Native 0.20.0

The screenshot is taken from your example. Any ideas?

Regards

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 😊

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.

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

Just want to know reason

Trying to use this module in an existing RN app but I can't get any SVGs to show — they just don't render at all (my own or copying from the examples in the README).

I'm on RN 0.19. I can upgrade but it always makes me nervous due to other modules.

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?

Anyone else experiencing crashing on Android?

Details here:
facebook/react-native#6760

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?

Hello,

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

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.

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?

Hi! Is there way to set width for e.g to 100%?

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

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

Documentation and examples aren't consistent. Some files refer to this package as 'react-native-art-svg' while others as 'react-native-svg'.

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

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.

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)

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

Thanks!