tessl/npm-react-native-svg

SVG library for React Native applications with comprehensive element support and cross-platform compatibility

—

Pending

Overview

Eval results

Files

Paths and Complex Shapes

Name: tessl/npm-react-native-svg
Author: tessl

Advanced shape elements for creating complex geometries using SVG path data, polygons, and polylines.

Capabilities

Path

Renders complex shapes using SVG path data commands for precise control over geometry.

/**
 * Renders an SVG path element using path data commands
 * @param d - SVG path data string (move, line, curve commands)
 * @param opacity - Opacity of the path
 */
interface PathProps extends CommonPathProps {
  d?: string;
  opacity?: NumberProp;
}

declare const Path: React.ComponentType<PathProps>;

Usage Examples:

import Svg, { Path } from "react-native-svg";

// Simple path - triangle
<Svg height="100" width="100">
  <Path
    d="M 10 80 L 50 20 L 90 80 Z"
    fill="none"
    stroke="red"
    strokeWidth="2"
  />
</Svg>

// Complex curved path
<Svg height="100" width="100">
  <Path
    d="M 10 50 Q 50 10 90 50 Q 50 90 10 50"
    fill="lightblue"
    stroke="blue"
    strokeWidth="1"
  />
</Svg>

// Heart shape
<Svg height="100" width="100">
  <Path
    d="M 50 85 C 20 60, 20 40, 40 30 C 45 25, 55 25, 60 30 C 80 40, 80 60, 50 85 Z"
    fill="red"
  />
</Svg>

Path Data Commands:

M x y - Move to point
L x y - Line to point
C x1 y1 x2 y2 x y - Cubic Bezier curve
Q x1 y1 x y - Quadratic Bezier curve
A rx ry rotation large-arc sweep x y - Arc
Z - Close path

Polygon

Renders a closed shape with straight sides defined by a series of points.

/**
 * Renders an SVG polygon element
 * @param points - String of coordinate pairs defining the polygon vertices
 * @param opacity - Opacity of the polygon
 */
interface PolygonProps extends CommonPathProps {
  points?: string;
  opacity?: NumberProp;
}

declare const Polygon: React.ComponentType<PolygonProps>;

Usage Examples:

import Svg, { Polygon } from "react-native-svg";

// Triangle
<Svg height="100" width="100">
  <Polygon
    points="50,10 90,90 10,90"
    fill="green"
    stroke="darkgreen"
    strokeWidth="2"
  />
</Svg>

// Pentagon
<Svg height="100" width="100">
  <Polygon
    points="50,5 85,30 75,75 25,75 15,30"
    fill="yellow"
    stroke="orange"
    strokeWidth="2"
  />
</Svg>

// Star shape
<Svg height="100" width="100">
  <Polygon
    points="50,5 60,35 95,35 70,55 80,85 50,65 20,85 30,55 5,35 40,35"
    fill="gold"
    stroke="orange"
    strokeWidth="1"
  />
</Svg>

Polyline

Renders an open shape with straight line segments connecting a series of points.

/**
 * Renders an SVG polyline element
 * @param points - String of coordinate pairs defining the line segments
 * @param opacity - Opacity of the polyline
 */
interface PolylineProps extends CommonPathProps {
  points?: string;
  opacity?: NumberProp;
}

declare const Polyline: React.ComponentType<PolylineProps>;

Usage Examples:

import Svg, { Polyline } from "react-native-svg";

// Simple zigzag line
<Svg height="100" width="100">
  <Polyline
    points="10,40 30,20 50,40 70,20 90,40"
    fill="none"
    stroke="blue"
    strokeWidth="3"
  />
</Svg>

// Mountain silhouette
<Svg height="100" width="200">
  <Polyline
    points="0,80 20,60 40,70 60,40 80,50 100,30 120,45 140,25 160,35 180,20 200,30"
    fill="none"
    stroke="darkgreen"
    strokeWidth="2"
  />
</Svg>

// Data visualization line chart
<Svg height="100" width="200">
  <Polyline
    points="10,80 30,60 50,40 70,45 90,30 110,50 130,25 150,35 170,20 190,40"
    fill="none"
    stroke="purple"
    strokeWidth="2"
    strokeDasharray="3,3"
  />
</Svg>

Advanced Path Techniques

Combining Multiple Path Commands

// Complex shape with multiple commands
<Path
  d="M 20 20 L 80 20 L 80 40 Q 80 50 70 50 L 30 50 Q 20 50 20 40 Z"
  fill="lightcoral"
  stroke="darkred"
  strokeWidth="2"
/>

Relative vs Absolute Commands

// Absolute commands (uppercase)
<Path d="M 10 10 L 50 10 L 50 50 Z" />

// Relative commands (lowercase) 
<Path d="M 10 10 l 40 0 l 0 40 z" />

Smooth Curves

// Smooth cubic Bezier curves
<Path
  d="M 10 50 C 30 10, 70 10, 90 50 S 130 90, 150 50"
  fill="none"
  stroke="blue"
  strokeWidth="2"
/>

// Smooth quadratic Bezier curves  
<Path
  d="M 10 50 Q 50 10, 90 50 T 150 50"
  fill="none"
  stroke="red"
  strokeWidth="2"
/>

Point Format

For Polygon and Polyline components, points are specified as a string of coordinate pairs:

// Format: "x1,y1 x2,y2 x3,y3 ..."
points="10,20 30,40 50,10"

// Spaces and commas are interchangeable
points="10 20 30 40 50 10"
points="10,20,30,40,50,10"

Install with Tessl CLI