tessl/npm-react-native-svg

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

—

Pending

Overview

Eval results

Files

Basic Shapes

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

Core geometric shapes for creating fundamental SVG elements including circles, rectangles, ellipses, and lines.

Capabilities

Circle

Renders a circular shape with specified center point and radius.

/**
 * Renders an SVG circle element
 * @param cx - X coordinate of center (default: 0)
 * @param cy - Y coordinate of center (default: 0)
 * @param r - Radius of the circle (default: 0)
 * @param opacity - Opacity of the circle
 */
interface CircleProps extends CommonPathProps {
  cx?: NumberProp;
  cy?: NumberProp;
  r?: NumberProp;
  opacity?: NumberProp;
}

declare const Circle: React.ComponentType<CircleProps>;

Usage Examples:

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

// Basic circle
<Svg height="100" width="100">
  <Circle cx="50" cy="50" r="40" fill="red" />
</Svg>

// Circle with stroke
<Svg height="100" width="100">
  <Circle
    cx="50"
    cy="50"
    r="40"
    fill="none"
    stroke="blue"
    strokeWidth="3"
  />
</Svg>

Rectangle

Renders a rectangular shape with optional rounded corners.

/**
 * Renders an SVG rectangle element
 * @param x - X coordinate of top-left corner
 * @param y - Y coordinate of top-left corner  
 * @param width - Width of the rectangle
 * @param height - Height of the rectangle
 * @param rx - X-axis radius for rounded corners
 * @param ry - Y-axis radius for rounded corners
 * @param opacity - Opacity of the rectangle
 */
interface RectProps extends CommonPathProps {
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
  rx?: NumberProp;
  ry?: NumberProp;
  opacity?: NumberProp;
}

declare const Rect: React.ComponentType<RectProps>;

Usage Examples:

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

// Basic rectangle
<Svg height="100" width="100">
  <Rect x="10" y="10" width="80" height="60" fill="green" />
</Svg>

// Rounded rectangle
<Svg height="100" width="100">
  <Rect
    x="10"
    y="10"
    width="80"
    height="60"
    rx="10"
    ry="10"
    fill="blue"
  />
</Svg>

Ellipse

Renders an elliptical shape with specified center point and radii.

/**
 * Renders an SVG ellipse element
 * @param cx - X coordinate of center
 * @param cy - Y coordinate of center
 * @param rx - X-axis radius
 * @param ry - Y-axis radius
 * @param opacity - Opacity of the ellipse
 */
interface EllipseProps extends CommonPathProps {
  cx?: NumberProp;
  cy?: NumberProp;
  rx?: NumberProp;
  ry?: NumberProp;
  opacity?: NumberProp;
}

declare const Ellipse: React.ComponentType<EllipseProps>;

Usage Examples:

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

// Basic ellipse
<Svg height="100" width="100">
  <Ellipse cx="50" cy="50" rx="40" ry="25" fill="purple" />
</Svg>

Line

Renders a straight line between two points.

/**
 * Renders an SVG line element
 * @param x1 - X coordinate of start point
 * @param y1 - Y coordinate of start point
 * @param x2 - X coordinate of end point
 * @param y2 - Y coordinate of end point
 * @param opacity - Opacity of the line
 */
interface LineProps extends CommonPathProps {
  x1?: NumberProp;
  y1?: NumberProp;
  x2?: NumberProp;
  y2?: NumberProp;
  opacity?: NumberProp;
}

declare const Line: React.ComponentType<LineProps>;

Usage Examples:

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

// Basic line
<Svg height="100" width="100">
  <Line x1="10" y1="10" x2="90" y2="90" stroke="black" strokeWidth="2" />
</Svg>

// Dashed line
<Svg height="100" width="100">
  <Line
    x1="10"
    y1="50"
    x2="90"
    y2="50"
    stroke="red"
    strokeWidth="3"
    strokeDasharray="5,5"
  />
</Svg>

Polygon

Renders a closed polygon shape defined by a series of points.

/**
 * Renders an SVG polygon element
 * @param points - Series of x,y coordinate pairs defining the polygon vertices
 * @param opacity - Opacity of the polygon
 */
interface PolygonProps extends CommonPathProps {
  points?: string | ReadonlyArray<NumberProp>;
  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="lime"
    stroke="purple"
    strokeWidth="1"
  />
</Svg>

// Star shape
<Svg height="100" width="100">
  <Polygon
    points="50,5 61,35 96,35 69,57 79,91 50,70 21,91 31,57 4,35 39,35"
    fill="gold"
    stroke="orange"
    strokeWidth="2"
  />
</Svg>

// Using array format
<Svg height="100" width="100">
  <Polygon
    points={[50, 10, 90, 90, 10, 90]}
    fill="cyan"
  />
</Svg>

Polyline

Renders an open polyline (multi-segment line) defined by a series of points.

/**
 * Renders an SVG polyline element  
 * @param points - Series of x,y coordinate pairs defining the line segments
 * @param opacity - Opacity of the polyline
 */
interface PolylineProps extends CommonPathProps {
  points?: string | ReadonlyArray<NumberProp>;
  opacity?: NumberProp;
}

declare const Polyline: React.ComponentType<PolylineProps>;

Usage Examples:

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

// Zigzag line
<Svg height="100" width="100">
  <Polyline
    points="10,10 50,90 90,10"
    fill="none"
    stroke="black"
    strokeWidth="3"
  />
</Svg>

// Complex path
<Svg height="100" width="100">
  <Polyline
    points="10,50 30,20 50,80 70,30 90,60"
    fill="none"
    stroke="blue"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  />
</Svg>

// Using array format
<Svg height="100" width="100">
  <Polyline
    points={[10, 50, 30, 20, 50, 80, 70, 30, 90, 60]}
    fill="none"
    stroke="red"
    strokeWidth="2"
  />
</Svg>

Common Properties

All basic shapes inherit from CommonPathProps which includes:

interface CommonPathProps {
  // Fill properties
  fill?: ColorValue;
  fillOpacity?: NumberProp;
  fillRule?: FillRule;
  
  // Stroke properties  
  stroke?: ColorValue;
  strokeWidth?: NumberProp;
  strokeOpacity?: NumberProp;
  strokeDasharray?: ReadonlyArray<NumberProp> | NumberProp;
  strokeDashoffset?: NumberProp;
  strokeLinecap?: Linecap;
  strokeLinejoin?: Linejoin;
  strokeMiterlimit?: NumberProp;
  
  // Transform properties
  transform?: ColumnMajorTransformMatrix | string | TransformsStyle['transform'];
  
  // Interaction properties
  onPress?: (event: GestureResponderEvent) => void;
  onPressIn?: (event: GestureResponderEvent) => void;
  onPressOut?: (event: GestureResponderEvent) => void;
  onLongPress?: (event: GestureResponderEvent) => void;
  
  // Accessibility
  accessibilityLabel?: string;
  accessible?: boolean;
  testID?: string;
  
  // Other properties
  id?: string;
  opacity?: NumberProp;
  clipPath?: string;
  mask?: string;
  filter?: string;
}

Install with Tessl CLI