kandi background
Explore Kits

react-native-svg | SVG library for React Native, React Native Web | Animation library

 by   react-native-community Java Version: v12.1.0 License: MIT

 by   react-native-community Java Version: v12.1.0 License: MIT

Download this library from

kandi X-RAY | react-native-svg Summary

react-native-svg is a Java library typically used in User Interface, Animation, React Native, React applications. react-native-svg has no bugs, it has no vulnerabilities, it has a Permissive License and it has high support. However react-native-svg build file is not available. You can install using 'npm i react-native-svg' or download it from GitHub, npm.
SVG library for React Native, React Native Web, and plain React web projects.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • react-native-svg has a highly active ecosystem.
  • It has 4820 star(s) with 653 fork(s). There are 89 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 112 open issues and 1020 have been closed. On average issues are closed in 69 days. There are 23 open pull requests and 0 closed requests.
  • It has a positive sentiment in the developer community.
  • The latest version of react-native-svg is v12.1.0
react-native-svg Support
Best in #Animation
Average in #Animation
react-native-svg Support
Best in #Animation
Average in #Animation

quality kandi Quality

  • react-native-svg has 0 bugs and 0 code smells.
react-native-svg Quality
Best in #Animation
Average in #Animation
react-native-svg Quality
Best in #Animation
Average in #Animation

securitySecurity

  • react-native-svg has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • react-native-svg code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
react-native-svg Security
Best in #Animation
Average in #Animation
react-native-svg Security
Best in #Animation
Average in #Animation

license License

  • react-native-svg is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
react-native-svg License
Best in #Animation
Average in #Animation
react-native-svg License
Best in #Animation
Average in #Animation

buildReuse

  • react-native-svg releases are available to install and integrate.
  • Deployable package is available in npm.
  • react-native-svg has no build file. You will be need to create the build yourself to build the component from source.
  • Installation instructions, examples and code snippets are available.
  • It has 7750 lines of code, 655 functions and 95 files.
  • It has high code complexity. Code complexity directly impacts maintainability of the code.
react-native-svg Reuse
Best in #Animation
Average in #Animation
react-native-svg Reuse
Best in #Animation
Average in #Animation
Top functions reviewed by kandi - BETA

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

react-native-svg Key Features

Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...).

Easy to convert SVG code to react-native-svg.

Installation Automatically Manually Android iOS

Troubleshooting

Opening issues

Usage Use with content loaded from uri Use with svg files Use with xml strings

Common props

Supported elements Svg Rect Circle Ellipse Line Polygon Polyline Path Text TSpan TextPath G Use Symbol Defs Image ClipPath LinearGradient RadialGradient Mask Pattern Marker ForeignObject

Touch Events

Serialize

Run example

TODO

Known issues

Installation

copy iconCopydownload iconDownload
yarn add react-native-svg

NOTICE:

copy iconCopydownload iconDownload
include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')

Troubleshooting

copy iconCopydownload iconDownload
-keep public class com.horcrux.svg.** {*;}

Opening issues

copy iconCopydownload iconDownload
react-native info

Usage

copy iconCopydownload iconDownload
import Svg, {
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import * as Svg from 'react-native-svg';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import { View, StyleSheet } from 'react-native';

export default class SvgExample extends React.Component {
  render() {
    return (
      <View
        style={[
          StyleSheet.absoluteFill,
          { alignItems: 'center', justifyContent: 'center' },
        ]}
      >
        <Svg height="50%" width="50%" viewBox="0 0 100 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>
    );
  }
}

Use with content loaded from uri

copy iconCopydownload iconDownload
import * as React from 'react';
import { SvgUri } from 'react-native-svg';

export default () => (
  <SvgUri
    width="100%"
    height="100%"
    uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
  />
);

Use with svg files

copy iconCopydownload iconDownload
const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

Use with xml strings

copy iconCopydownload iconDownload
import * as React from 'react';
import { SvgXml } from 'react-native-svg';

const xml = `
  <svg width="32" height="32" viewBox="0 0 32 32">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      fill="url(#gradient)"
      d="M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0H4ZM17 6C17 5.44772 17.4477 5 18 5H20C20.5523 5 21 5.44772 21 6V25C21 25.5523 20.5523 26 20 26H18C17.4477 26 17 25.5523 17 25V6ZM12 11C11.4477 11 11 11.4477 11 12V25C11 25.5523 11.4477 26 12 26H14C14.5523 26 15 25.5523 15 25V12C15 11.4477 14.5523 11 14 11H12ZM6 18C5.44772 18 5 18.4477 5 19V25C5 25.5523 5.44772 26 6 26H8C8.55228 26 9 25.5523 9 25V19C9 18.4477 8.55228 18 8 18H6ZM24 14C23.4477 14 23 14.4477 23 15V25C23 25.5523 23.4477 26 24 26H26C26.5523 26 27 25.5523 27 25V15C27 14.4477 26.5523 14 26 14H24Z"
    />
    <defs>
      <linearGradient
        id="gradient"
        x1="0"
        y1="0"
        x2="8.46631"
        y2="37.3364"
        gradient-units="userSpaceOnUse">
        <stop offset="0" stop-color="#FEA267" />
        <stop offset="1" stop-color="#E75A4C" />
      </linearGradient>
    </defs>
  </svg>
`;

export default () => <SvgXml xml={xml} width="100%" height="100%" />;

Supported elements:

copy iconCopydownload iconDownload
<Svg height="100" width="100">
  <Rect x="0" y="0" width="100" height="100" fill="black" />
  <Circle cx="50" cy="50" r="30" fill="yellow" />
  <Circle cx="40" cy="40" r="4" fill="black" />
  <Circle cx="60" cy="40" r="4" fill="black" />
  <Path d="M 40 60 A 10 10 0 0 0 60 60" stroke="black" />
</Svg>

Serialize

copy iconCopydownload iconDownload
import * as React from 'react';
import { Platform, StyleSheet, TouchableOpacity } from 'react-native';
import { Svg, Rect } from 'react-native-svg';
import ReactDOMServer from 'react-dom/server';

const isWeb = Platform.OS === 'web';

const childToWeb = child => {
  const { type, props } = child;
  const name = type && type.displayName;
  const webName = name && name[0].toLowerCase() + name.slice(1);
  const Tag = webName ? webName : type;
  return <Tag {...props}>{toWeb(props.children)}</Tag>;
};

const toWeb = children => React.Children.map(children, childToWeb);

export default class App extends React.Component {
  renderSvg() {
    return (
      <Svg height="100%" width="100%" style={{ backgroundColor: '#33AAFF' }}>
        <Rect
          x="50"
          y="50"
          width="50"
          height="50"
          fill="#3399ff"
          strokeWidth="3"
          stroke="rgb(0,0,0)"
        />
      </Svg>
    );
  }
  serialize = () => {
    const element = this.renderSvg();
    const webJsx = isWeb ? element : toWeb(element);
    const svgString = ReactDOMServer.renderToStaticMarkup(webJsx);
    console.log(svgString);
  };
  render() {
    return (
      <TouchableOpacity style={styles.container} onPress={this.serialize}>
        {this.renderSvg()}
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Run example:

copy iconCopydownload iconDownload

git clone https://github.com/magicismight/react-native-svg-example.git
cd react-native-svg-example
yarn

# run Android: react-native run-android
# run iOS: react-native run-ios

react-native-svg - Fill overlapped area of two ellipses

copy iconCopydownload iconDownload
<svg fill="none" viewBox="140 100 170 170" width="200">
  
      <ellipse cx="192" cy="190" rx="50" ry="80" stroke="red" strokeWidth="2" id="a"/>
      <ellipse cx="250" cy="150" rx="60" ry="30" stroke="green" strokeWidth="2" id="b"/>
  
  <use xlink:href="#a" clip-path="url(#cp)" fill="gold"/>
  
  <clipPath id="cp">
    <use xlink:href="#b"/>
  </clipPath>
  
<svg>

`useTheme` must be used within `NativeBaseConfigProvider`

copy iconCopydownload iconDownload
import { NativeBaseProvider } from 'native-base';

return (
<NativeBaseProvider>
  <View style={styles.container}>

    <Header />

    <ProductContainer />

  </View>
</NativeBaseProvider>
);

Drawer Navigation position right

copy iconCopydownload iconDownload
screenOptions={{drawerPosition:'right',headerShown:false,drawerStyle:{right:0}}}

java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;

copy iconCopydownload iconDownload
implementation 'com.facebook.android:facebook-marketing:[4,5)'
implementation 'com.facebook.android:facebook-marketing:latest.release'
-----------------------
implementation 'com.facebook.android:facebook-marketing:[4,5)'
implementation 'com.facebook.android:facebook-marketing:latest.release'

How to overcome ERESOLVE errors within EAS build for native-base and Expo?

copy iconCopydownload iconDownload
        "react-dom": "17.0.1",
        "react-native-safe-area-context": "3.1.9",
        "react-native-svg": "12.1.0",

Expo SDK 44 upgrade ERROR - App.js: [BABEL]: Unexpected token '.'

copy iconCopydownload iconDownload
expo update 43.0.0
-----------------------
"babel-preset-expo": "9.0.2",

How to create a border radius based off props in react native

copy iconCopydownload iconDownload
<svg width="16" height="16">
  <circle r="8" cx="8" cy="8" fill="red" />
  <path d="M14.2 0L5.882 8.986 2 4.821 0 6.904 5.682 13 16 1.931 14.2 0z" fill="#fff" />
</svg>

this permision (android.permission.QUERY_ALL_PACKAGES) was automatically added to Manifest

copy iconCopydownload iconDownload
<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"
        tools:node="remove" tools:ignore="QueryAllPackagesPermission" />

eas build -p android fails

copy iconCopydownload iconDownload
com.facebook.yoga:proguard-annotations:1.14.1
com.facebook.fbjni:fbjni-java-only:0.0.3
com.facebook.flipper:flipper:0.54.0
com.facebook.flipper:flipper-network-plugin:0.54.0
com.facebook.flipper:flipper-fresco-plugin:0.54.0

Issue with Auth Flow using react-navigation v6 in React Native. Error: Invalid hook call. Invariant Violation: &quot;main&quot; has not been registered

copy iconCopydownload iconDownload
const LoginScreen = () => {
  const { state, dispatch } = React.useContext(AuthContext);

 // here you can use a function to login or something, and dispatch it.

  return (
    <View>
      <Text>Login Screen</Text>
    </View>
  );
};

Community Discussions

Trending Discussions on react-native-svg
  • react-native-svg - Fill overlapped area of two ellipses
  • `useTheme` must be used within `NativeBaseConfigProvider`
  • Cannot Read Property Show of Undefined When Using DocumentPicker.show() in React Native
  • Drawer Navigation position right
  • QR code generated but it is not scannable - React Native
  • java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;
  • Could not find com.google.android:flexbox:1.0.0 react-native-intercom
  • How to overcome ERESOLVE errors within EAS build for native-base and Expo?
  • react-native &quot;Export statement may only appear at top level&quot; was working fine until cleaning project how do I find out the issue?
  • Expo SDK 44 upgrade ERROR - App.js: [BABEL]: Unexpected token '.'
Trending Discussions on react-native-svg

QUESTION

react-native-svg - Fill overlapped area of two ellipses

Asked 2022-Apr-07 at 17:53

We are using react-native-svg library to draw ellipses having following code

<Svg>
      <Ellipse cx={192} cy={190} rx={50} ry={80} stroke={"red"} strokeWidth="2"/>
      <Ellipse cx={250} cy={150} rx={60} ry={30} stroke={"green"} strokeWidth="2"/>
<Svg>

Which looks like the image below

enter image description here

Our requirement is to fill up the area which gets overlapped by two ellipses.

If anyone can put some light on it, how can it be achieved using the SVG library for react-native? or if anything else we have will be very helpful

Thanks.

ANSWER

Answered 2022-Apr-07 at 17:53

The main idea is creating a clipPath with one of the ellipses and reusing the other one clipped by the clipPath.

Please observe that I am giving an id to both ellipses so that I can reuse them with use.

<svg fill="none" viewBox="140 100 170 170" width="200">
  
      <ellipse cx="192" cy="190" rx="50" ry="80" stroke="red" strokeWidth="2" id="a"/>
      <ellipse cx="250" cy="150" rx="60" ry="30" stroke="green" strokeWidth="2" id="b"/>
  
  <use xlink:href="#a" clip-path="url(#cp)" fill="gold"/>
  
  <clipPath id="cp">
    <use xlink:href="#b"/>
  </clipPath>
  
<svg>

Source https://stackoverflow.com/questions/71783657

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install react-native-svg

With Expo, you'll need to run expo install react-native-svg to install this library. Please refer to Expo docs for more information or jump ahead to Usage.
Install library from npm yarn add react-native-svg
Link native code With autolinking (react-native 0.60+) cd ios && pod install Pre 0.60 react-native link react-native-svg

Support

When Proguard is enabled (which it is by default for Android release builds), it causes runtine error To avoid this, add an exception to android/app/proguard-rules.pro:.

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Share this Page

share link
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.