or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

basic-shapes.mdclipping-masking.mdcontainer-elements.mdfilter-effects.mdgradients-patterns.mdindex.mdpaths-complex-shapes.mdtext-elements.mdxml-processing.md
tile.json

tessl/npm-react-native-svg

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-svg@15.12.x

To install, run

npx @tessl/cli install tessl/npm-react-native-svg@15.12.0

index.mddocs/

React Native SVG

React Native SVG is a comprehensive SVG library that brings full SVG support to React Native applications. It provides React components for all major SVG elements including shapes, paths, gradients, filters, and text, with native implementations for optimal performance across iOS, Android, macOS, Windows, and web platforms.

Package Information

  • Package Name: react-native-svg
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-native-svg
  • Peer Dependencies: react, react-native

Core Imports

import Svg, { Circle, Rect, Path, Text, G } from "react-native-svg";

For CommonJS:

const Svg = require("react-native-svg").default;
const { Circle, Rect, Path, Text, G } = require("react-native-svg");

Basic Usage

import React from "react";
import Svg, { Circle, Rect, Text, G } from "react-native-svg";

function MyComponent() {
  return (
    <Svg height="100" width="100" 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"
      />
      <Text
        x="50"
        y="50"
        fontSize="16"
        fill="black"
        textAnchor="middle"
      >
        SVG
      </Text>
    </Svg>
  );
}

Architecture

React Native SVG is built around several key components:

  • SVG Elements: React components that map directly to SVG elements (Circle, Rect, Path, etc.)
  • Native Implementation: Platform-specific native code for high-performance rendering
  • Fabric Architecture: Modern React Native architecture support with native components
  • Shape Base Class: Common functionality shared across all SVG elements
  • XML Processing: Utilities for parsing and rendering SVG from XML strings and URIs
  • Type System: Complete TypeScript definitions for all SVG properties and elements

Capabilities

Basic Shapes

Core geometric shapes including circles, rectangles, ellipses, lines, polygons, and polylines.

// Circle component
interface CircleProps extends CommonPathProps {
  cx?: NumberProp;
  cy?: NumberProp;
  r?: NumberProp;
  opacity?: NumberProp;
}

// Rectangle component  
interface RectProps extends CommonPathProps {
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
  rx?: NumberProp;
  ry?: NumberProp;
  opacity?: NumberProp;
}

// Ellipse component
interface EllipseProps extends CommonPathProps {
  cx?: NumberProp;
  cy?: NumberProp;
  rx?: NumberProp;
  ry?: NumberProp;
  opacity?: NumberProp;
}

// Line component
interface LineProps extends CommonPathProps {
  x1?: NumberProp;
  y1?: NumberProp;
  x2?: NumberProp;
  y2?: NumberProp;
  opacity?: NumberProp;
}

// Polygon component
interface PolygonProps extends CommonPathProps {
  points?: string | ReadonlyArray<NumberProp>;
  opacity?: NumberProp;
}

// Polyline component
interface PolylineProps extends CommonPathProps {
  points?: string | ReadonlyArray<NumberProp>;
  opacity?: NumberProp;
}

Basic Shapes

Paths and Complex Shapes

Path elements for drawing complex shapes using SVG path data, plus polygon and polyline elements.

interface PathProps extends CommonPathProps {
  d?: string;
  opacity?: NumberProp;
}

Paths and Complex Shapes

Text Elements

Text rendering with support for spans, text along paths, and comprehensive typography options.

interface TextProps extends TextSpecificProps {
  children?: ReactNode;
  x?: NumberArray;
  y?: NumberArray;
  dx?: NumberArray;
  dy?: NumberArray;
  rotate?: NumberArray;
  opacity?: NumberProp;
  inlineSize?: NumberProp;
}

Text Elements

Container Elements

Container elements for organizing and structuring SVG content including groups, definitions, and symbols.

interface SvgProps extends GProps, ViewProps, HitSlop {
  width?: NumberProp;
  height?: NumberProp;
  viewBox?: string;
  preserveAspectRatio?: string;
  color?: ColorValue;
  title?: string;
}

interface GProps extends CommonPathProps {
  opacity?: NumberProp;
}

interface ImageProps extends CommonPathProps {
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
  href?: ImageSource | string;
  preserveAspectRatio?: string;
  opacity?: NumberProp;
}

Container Elements

Gradients and Patterns

Linear and radial gradients plus pattern definitions for advanced fill and stroke effects.

interface LinearGradientProps extends CommonPathProps {
  x1?: NumberProp;
  y1?: NumberProp;
  x2?: NumberProp;
  y2?: NumberProp;
  gradientUnits?: Units;
}

interface RadialGradientProps extends CommonPathProps {
  cx?: NumberProp;
  cy?: NumberProp;
  fx?: NumberProp;
  fy?: NumberProp;
  r?: NumberProp;
  gradientUnits?: Units;
}

Gradients and Patterns

Clipping and Masking

Clipping paths and masks for advanced visual effects and content clipping.

interface ClipPathProps extends CommonPathProps {}

interface MaskProps extends CommonPathProps {
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
  maskUnits?: Units;
  maskContentUnits?: Units;
}

Clipping and Masking

Filter Effects

Comprehensive filter system with primitives for blur, color manipulation, compositing, and advanced visual effects.

interface FilterProps extends CommonPathProps {
  x?: NumberProp;
  y?: NumberProp;
  width?: NumberProp;
  height?: NumberProp;
  filterUnits?: Units;
  primitiveUnits?: Units;
}

Filter Effects

XML Processing

Utilities for loading and rendering SVG content from XML strings and remote URIs.

function SvgXml(props: XmlProps): JSX.Element;
function SvgUri(props: UriProps): JSX.Element; 
function parse(xml: string): JsxAST | null;

XML Processing

Core Types

type NumberProp = string | number;
type NumberArray = NumberProp[] | NumberProp;
type BooleanProp = boolean | 'true' | 'false';

type FillRule = 'evenodd' | 'nonzero';
type Units = 'userSpaceOnUse' | 'objectBoundingBox';
type Linecap = 'butt' | 'square' | 'round';
type Linejoin = 'miter' | 'bevel' | 'round';

type ColumnMajorTransformMatrix = [number, number, number, number, number, number];

interface CommonPathProps extends 
  ColorProps,
  FillProps,
  StrokeProps,
  ClipProps,
  TransformProps,
  VectorEffectProps,
  ResponderProps,
  TouchableProps,
  DefinitionProps,
  CommonMarkerProps,
  CommonMaskProps,
  CommonFilterProps,
  NativeProps,
  AccessibilityProps {}

interface FillProps {
  fill?: ColorValue;
  fillOpacity?: NumberProp;
  fillRule?: FillRule;
}

interface StrokeProps {
  stroke?: ColorValue;
  strokeWidth?: NumberProp;
  strokeOpacity?: NumberProp;
  strokeDasharray?: ReadonlyArray<NumberProp> | NumberProp;
  strokeDashoffset?: NumberProp;
  strokeLinecap?: Linecap;
  strokeLinejoin?: Linejoin;
  strokeMiterlimit?: NumberProp;
  vectorEffect?: VectorEffect;
}

interface ColorProps {
  color?: ColorValue;
}

interface ClipProps {
  clipRule?: FillRule;
  clipPath?: string;
}

interface TransformProps {
  transform?: ColumnMajorTransformMatrix | string | TransformsStyle['transform'];
}

interface VectorEffectProps {
  vectorEffect?: VectorEffect;
}

interface ResponderProps extends GestureResponderHandlers {
  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
}

interface TouchableProps {
  disabled?: boolean;
  onPress?: (event: GestureResponderEvent) => void;
  onPressIn?: (event: GestureResponderEvent) => void;
  onPressOut?: (event: GestureResponderEvent) => void;
  onLongPress?: (event: GestureResponderEvent) => void;
  delayPressIn?: number;
  delayPressOut?: number;
  delayLongPress?: number;
}

interface DefinitionProps {
  id?: string;
}

interface CommonMarkerProps {
  marker?: string;
  markerStart?: string;
  markerMid?: string;
  markerEnd?: string;
}

interface CommonMaskProps {
  mask?: string;
}

interface CommonFilterProps {
  filter?: string;
}

interface NativeProps {
  onLayout?: (event: LayoutChangeEvent) => void;
}

interface AccessibilityProps {
  accessibilityLabel?: string;
  accessible?: boolean;
  testID?: string;
}

interface FontObject {
  fontStyle?: FontStyle;
  fontVariant?: FontVariant;
  fontWeight?: FontWeight;
  fontStretch?: FontStretch;
  fontSize?: NumberProp;
  fontFamily?: string;
  textAnchor?: TextAnchor;
  textDecoration?: TextDecoration;
  letterSpacing?: NumberProp;
  wordSpacing?: NumberProp;
  kerning?: NumberProp;
  fontFeatureSettings?: string;
  fontVariantLigatures?: FontVariantLigatures;
  fontVariationSettings?: string;
}

interface FontProps extends FontObject {
  font?: FontObject;
}

interface TextSpecificProps extends CommonPathProps, FontProps {
  alignmentBaseline?: AlignmentBaseline;
  baselineShift?: BaselineShift;
  verticalAlign?: NumberProp;
  lengthAdjust?: LengthAdjust;
  textLength?: NumberProp;
  fontData?: null | { [name: string]: unknown };
  fontFeatureSettings?: string;
}

type VectorEffect = 'none' | 'non-scaling-stroke' | 'nonScalingStroke' | 'default' | 'inherit' | 'uri';
type FontStyle = 'normal' | 'italic' | 'oblique';
type FontVariant = 'normal' | 'small-caps';
type FontWeight = NumberProp | 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
type FontStretch = 'normal' | 'wider' | 'narrower' | 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded';
type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'blink';
type FontVariantLigatures = 'normal' | 'none';
type TextAnchor = 'start' | 'middle' | 'end';
type AlignmentBaseline = 'baseline' | 'text-bottom' | 'alphabetic' | 'ideographic' | 'middle' | 'central' | 'mathematical' | 'text-top' | 'bottom' | 'center' | 'top' | 'text-before-edge' | 'text-after-edge' | 'before-edge' | 'after-edge' | 'hanging';
type BaselineShift = 'sub' | 'super' | 'baseline' | ReadonlyArray<NumberProp> | NumberProp;
type LengthAdjust = 'spacing' | 'spacingAndGlyphs';