### Start Example App (iOS)

Source: https://github.com/software-mansion/react-native-svg/blob/main/CONTRIBUTING.md

Launches the example application on an iOS simulator or device. Ensure the Metro server is running.

```bash
yarn ios
```

--------------------------------

### Start Example App (Android)

Source: https://github.com/software-mansion/react-native-svg/blob/main/CONTRIBUTING.md

Launches the example application on an Android device or emulator. Ensure the Metro server is running.

```bash
yarn android
```

--------------------------------

### Line Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/shape-elements.md

Render a straight line with start and end coordinates, stroke color, and stroke width.

```jsx
import { Line } from 'react-native-svg';

<Line x1="10" y1="10" x2="90" y2="90" stroke="black" strokeWidth="2" />
```

--------------------------------

### Complete SVG Configuration Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/configuration.md

A comprehensive example demonstrating the setup of a React Native SVG component, including rendering size, default styling, transforms, accessibility, touch handling, and nested elements with gradients.

```jsx
import React from 'react';
import { Svg, Rect, Circle, Defs, LinearGradient, Stop } from 'react-native-svg';

export const ConfiguredSvg = () => (
  <Svg
    // Rendering size
    width={300}
    height={400}
    viewBox="0 0 300 400"
    preserveAspectRatio="xMidYMid meet"
    
    // Default styling (inherited by all children)
    fill="blue"
    stroke="black"
    strokeWidth="2"
    
    // Transform
    transform="translate(10, 10)"
    
    // Accessibility
    accessibilityLabel="Sample SVG graphic"
    
    // Touch handling
    onPress={() => console.log('SVG pressed')}
  >
    <Defs>
      <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <Stop offset="0%" stopColor="red" stopOpacity="1" />
        <Stop offset="100%" stopColor="blue" stopOpacity="0.5" />
      </LinearGradient>
    </Defs>
    
    <Rect
      x="10"
      y="10"
      width="100"
      height="100"
      fill="url(#grad)"
      strokeWidth="3"
      rx="10"
    />
    
    <Circle
      cx="200"
      cy="100"
      r="50"
      fill="yellow"
      fillOpacity="0.8"
      stroke="orange"
      strokeWidth="2"
    />
  </Svg>
);
```

--------------------------------

### Using FillRule Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/types.md

Example of setting the fillRule attribute for a Path component, using 'evenodd' to determine how the inside of a shape is determined.

```jsx
<Path d="..." fillRule="evenodd" />
```

--------------------------------

### Using Transform Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/types.md

Example of applying a 2D transformation to a G (group) element using an array representing the transformation matrix.

```jsx
<G transform={[1, 0, 0, 1, 10, 20]} />
```

--------------------------------

### Basic SVG with Shapes Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/svg-root.md

A basic example demonstrating how to create an SVG element and render shapes like Rect, Circle, and Line within it.

```jsx
import React from 'react';
import { View } from 'react-native';
import Svg, { Circle, Rect, Line } from 'react-native-svg';

export const BasicSvg = () => (
  <Svg width={200} height={200} viewBox="0 0 100 100">
    <Rect x="10" y="10" width="30" height="30" fill="red" />
    <Circle cx="70" cy="25" r="15" fill="blue" />
    <Line x1="10" y1="80" x2="90" y2="80" stroke="green" strokeWidth="2" />
  </Svg>
);
```

--------------------------------

### Line Element Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

Shows how to draw a line connecting two points using the Line element. Properties x1, y1, x2, y2 define the start and end points, while stroke and strokeWidth style the line.

```jsx
<Svg height="100" width="100">
  <Line x1="0" y1="0" x2="100" y2="100" stroke="red" strokeWidth="2" />
</Svg>
```

--------------------------------

### Rect Examples

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/shape-elements.md

Render a basic rectangle with position, dimensions, and fill, or a rectangle with rounded corners.

```jsx
import { Rect } from 'react-native-svg';

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

// Rectangle with rounded corners
<Rect x="10" y="10" width="80" height="60" rx="10" ry="10" fill="purple" />
```

--------------------------------

### Install react-native-svg with yarn

Source: https://github.com/software-mansion/react-native-svg/blob/main/README.md

Install the react-native-svg library using yarn. This command is used for projects managed with yarn.

```bash
yarn add react-native-svg
```

--------------------------------

### Responsive SVG with ViewBox Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/svg-root.md

Demonstrates creating a responsive SVG that adjusts its size based on the window dimensions and uses viewBox and preserveAspectRatio for scaling.

```jsx
import React from 'react';
import { Dimensions } from 'react-native';
import Svg, { Circle } from 'react-native-svg';

export const ResponsiveSvg = () => {
  const { width } = Dimensions.get('window');
  const size = Math.min(width, 300);
  
  return (
    <Svg 
      width={size} 
      height={size}
      viewBox="0 0 100 100"
      preserveAspectRatio="xMidYMid meet"
    >
      <Circle cx="50" cy="50" r="40" fill="blue" />
    </Svg>
  );
};

```

--------------------------------

### Circle Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/shape-elements.md

Render a basic circle with specified center coordinates, radius, fill, stroke, and stroke width.

```jsx
import { Circle } from 'react-native-svg';

<Circle cx="50" cy="50" r="40" fill="blue" stroke="black" strokeWidth="2" />
```

--------------------------------

### Rendering Multiple Markers on a Path

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

This example demonstrates applying different markers (start, mid, and end) to a single path element. It uses SvgXml to render an SVG string containing multiple marker definitions and a path utilizing them.

```jsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { SvgXml } from 'react-native-svg';

const markerRendering = `<svg xmlns="http://www.w3.org/2000/svg"
     width="275" height="200" viewBox="0 0 100 30">
  <defs>
    <marker id="m1" viewBox="0 0 10 10" refX="5" refY="5"
     markerWidth="8" markerHeight="8">
      <circle cx="5" cy="5" r="5" fill="green"/>
    </marker>
    <marker id="m2" viewBox="0 0 10 10" refX="5" refY="5"
     markerWidth="6.5" markerHeight="6.5">
      <circle cx="5" cy="5" r="5" fill="skyblue" opacity="0.9"/>
    </marker>
    <marker id="m3" viewBox="0 0 10 10" refX="5" refY="5"
     markerWidth="5" markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="maroon" opacity="0.85"/>
    </marker>
  </defs>

  <path d="M10,10 h10 v10 z m20,0 h10 v10 z m20,0 h10 v10 z"
  fill="none" stroke="black"
  marker-start="url(#m1)"
  marker-mid="url(#m2)"
  marker-end="url(#m3)"
  />
</svg>`;

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <SvgXml xml={markerRendering} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
});
```

--------------------------------

### Polyline Examples

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/shape-elements.md

Render an open polyline using points defined as a string or an array, with stroke and fill properties.

```jsx
import { Polyline } from 'react-native-svg';

// As string
<Polyline points="10,10 20,20 30,30 40,20 50,10" stroke="red" strokeWidth="2" fill="none" />

// As array
<Polyline points={[10, 10, 20, 20, 30, 30, 40, 20, 50, 10]} stroke="blue" strokeWidth="3" />
```

--------------------------------

### Install react-native-svg with npm

Source: https://github.com/software-mansion/react-native-svg/blob/main/README.md

Install the react-native-svg library using npm. This is a common step for projects managed with npm.

```bash
npm install react-native-svg
```

--------------------------------

### FeMerge Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/filter-elements.md

Combines multiple filter primitive results into a single output. This example applies a blur and then merges it with the original graphic.

```jsx
<Filter id="shadow-effect">
  <FeGaussianBlur in="SourceGraphic" stdDeviation="5" result="coloredBlur" />
  <FeMerge>
    <FeMergeNode in="coloredBlur" />
    <FeMergeNode in="SourceGraphic" />
  </FeMerge>
</Filter>
```

--------------------------------

### Complete Filter Example with Drop Shadow

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/filter-elements.md

This example demonstrates how to define and apply a drop shadow filter to multiple shapes within an SVG. It includes setting up the filter in Defs and applying it using the filter prop.

```jsx
import React from 'react';
import { Svg, Defs, Filter, FeGaussianBlur, FeMerge, FeOffset, 
         FeMergeNode, Rect, Circle } from 'react-native-svg';

export const FilterExample = () => (
  <Svg width={300} height={200}>
    <Defs>
      {/* Drop shadow filter */}
      <Filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
        <FeGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
        <FeOffset in="blur" dx="3" dy="3" result="offset" />
        <FeMerge>
          <FeMergeNode in="offset" />
          <FeMergeNode in="SourceGraphic" />
        </FeMerge>
      </Filter>
    </Defs>
    
    <Rect width="300" height="200" fill="white" />
    <Circle cx="75" cy="100" r="40" fill="red" filter="url(#shadow)" />
    <Rect x="150" y="60" width="80" height="80" fill="blue" 
           filter="url(#shadow)" />
  </Svg>
);
```

--------------------------------

### Using FontWeight Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/types.md

Demonstrates setting the fontWeight property for a Text component using either a keyword like 'bold' or a numeric string like '600'.

```jsx
<Text fontSize={20} fontWeight="bold" />
<Text fontSize={20} fontWeight="600" />
```

--------------------------------

### Link native code for iOS

Source: https://github.com/software-mansion/react-native-svg/blob/main/README.md

After installing the library, run this command in the 'ios' directory to link the native code for iOS projects.

```bash
cd ios && pod install
```

--------------------------------

### FeBlend Element Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/filter-elements.md

Shows how to use FeBlend to combine two inputs with a specified blend mode. The 'mode' prop determines the blending operation.

```jsx
<Filter id="blend">
  <FeBlend in="SourceGraphic" in2="BackgroundImage" mode="multiply" />
</Filter>
```

--------------------------------

### FeTurbulence Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/filter-elements.md

Generates a fractal noise texture. This example creates a marble-like effect using fractal noise with specified frequency and octaves.

```jsx
<Filter id="marble">
  <FeTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="5" />
</Filter>
```

--------------------------------

### Using NumberProp Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/types.md

Example of using NumberProp for numeric or percentage-based values in SVG attributes like cx, cy, and r.

```jsx
<Circle cx={50} cy="50%" r={40} />
```

--------------------------------

### SVG Export to Data URL Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/svg-root.md

An example showing how to export an SVG to a base64 data URL using the `toDataURL` method and a ref. This is useful for saving or sharing the SVG.

```jsx
import React, { useRef } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import Svg, { Path } from 'react-native-svg';

export const ExportableSvg = () => {
  const svgRef = useRef(null);

  const exportImage = () => {
    svgRef.current?.toDataURL((base64) => {
      // Use base64 string to save file, share, etc.
      console.log(base64);
    });
  };

  return (
    <TouchableOpacity onPress={exportImage}>
      <Svg
        ref={svgRef}
        width={150}
        height={150}
        viewBox="0 0 150 150"
      >
        <Path
          d="M 75 20 L 100 80 L 160 80 L 110 120 L 135 180 L 75 140 L 15 180 L 40 120 L -10 80 L 50 80 Z"
          fill="gold"
        />
      </Svg>
      <Text>Tap to Export</Text>
    </TouchableOpacity>
  );
};

```

--------------------------------

### Run E2E Tests

Source: https://github.com/software-mansion/react-native-svg/blob/main/CONTRIBUTING.md

Executes the end-to-end tests for the project. Ensure you have followed the setup instructions for E2E testing.

```bash
yarn e2e
```

--------------------------------

### Rect Element Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

Shows how to create a rectangle using the Rect element. Properties like x, y, width, height, fill, strokeWidth, and stroke are demonstrated.

```jsx
<Svg width="200" height="60">
  <Rect
    x="25"
    y="5"
    width="150"
    height="50"
    fill="rgb(0,0,255)"
    strokeWidth="3"
    stroke="rgb(0,0,0)"
  />
</Svg>
```

--------------------------------

### Svg toDataURL Method Usage Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/svg-root.md

Example of using the `toDataURL` method on an SVG component's ref to get its base64 representation. This is typically used within a component that handles exporting or saving the SVG.

```jsx
const svgRef = useRef(null);

const handleExport = () => {
  svgRef.current?.toDataURL((base64) => {
    console.log('SVG as data URL:', base64);
  });
};

return (
  <>
    <Svg ref={svgRef} width={200} height={200} viewBox="0 0 100 100">
      <Circle cx="50" cy="50" r="40" fill="blue" />
    </Svg>
    <TouchableOpacity onPress={handleExport}>
      <Text>Export</Text>
    </TouchableOpacity>
  </>
);
```

--------------------------------

### FeComponentTransfer Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/filter-elements.md

Remaps color components (Red, Green, Blue, Alpha) using transfer functions. This example increases brightness by scaling RGB channels.

```jsx
<Filter id="brightness">
  <FeComponentTransfer>
    <FeFuncR type="linear" slope="1.5" />
    <FeFuncG type="linear" slope="1.5" />
    <FeFuncB type="linear" slope="1.5" />
  </FeComponentTransfer>
</Filter>
```

--------------------------------

### Polygon Element Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

Demonstrates creating a polygon with at least three sides using the Polygon element. The 'points' prop defines the coordinates of each corner.

```jsx
<Svg height="100" width="100">
  <Polygon
    points="40,5 70,80 25,95"
    fill="lime"
    stroke="purple"
    strokeWidth="1"
  />
</Svg>
```

--------------------------------

### Install react-native-svg with Expo

Source: https://github.com/software-mansion/react-native-svg/blob/main/README.md

Use this command to install react-native-svg when working with Expo. The Expo client app includes the necessary native code.

```bash
npx expo install react-native-svg
```

--------------------------------

### Using NumberArray Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/types.md

Example of using NumberArray for attributes like x and y in the Text component, accepting an array of numbers or a percentage string.

```jsx
<Text x={[10, 20, 30]} y="50">A B C</Text>
```

--------------------------------

### FeOffset Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/filter-elements.md

Applies a horizontal and vertical offset to an input graphic, commonly used for creating drop shadows.

```jsx
<Filter id="shadow">
  <FeOffset in="SourceGraphic" dx="5" dy="5" />
</Filter>
```

--------------------------------

### Circle Element Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

Demonstrates the creation of a circle using the Circle element. Key properties include cx, cy for the center coordinates, r for the radius, and fill for the color.

```jsx
<Svg height="100" width="100">
  <Circle cx="50" cy="50" r="50" fill="pink" />
</Svg>
```

--------------------------------

### Polygon Examples

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/shape-elements.md

Render a closed polygon using points defined as a string or an array, with fill and stroke properties.

```jsx
import { Polygon } from 'react-native-svg';

// As string
<Polygon points="50,10 90,90 10,90" fill="blue" />

// As array
<Polygon points={[50, 10, 90, 90, 10, 90]} fill="yellow" stroke="black" strokeWidth="2" />
```

--------------------------------

### Ellipse Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/shape-elements.md

Render an ellipse with specified center coordinates, horizontal and vertical radii, and fill color.

```jsx
import { Ellipse } from 'react-native-svg';

<Ellipse cx="50" cy="50" rx="60" ry="30" fill="red" />
```

--------------------------------

### Svg Component with ViewBox Examples

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/configuration.md

Demonstrates different configurations for the viewBox attribute to define the SVG coordinate system. Use these to set the origin and scale of your SVG content.

```jsx
// Standard square (origin at 0,0, 100x100 units)
<Svg viewBox="0 0 100 100" width={200} height={200}>

```

```jsx
// Offset origin (start at 50,50)
<Svg viewBox="50 50 100 100" width={200} height={200}>

```

```jsx
// High-resolution coordinates
<Svg viewBox="0 0 1000 1000" width={200} height={200}>

```

--------------------------------

### Linear Gradient with Percentage Props

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

Demonstrates using percentage values for gradient start and end points, and color stops. While functional, using exact numbers is recommended for performance.

```jsx
<LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
  <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
  <Stop offset="100%" stopColor="red" stopOpacity="1" />
</LinearGradient>
```

--------------------------------

### SVG Pattern Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

Illustrates how to create a pattern using a Path element and apply it to an Ellipse. The pattern consists of red triangles with blue strokes, tiled to fill the ellipse.

```jsx
<Svg width="100%" height="100%" viewBox="0 0 800 400">
  <Defs>
    <Pattern
      id="TrianglePattern"
      patternUnits="userSpaceOnUse"
      x="0"
      y="0"
      width="100"
      height="100"
      viewBox="0 0 10 10">
      <Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
    </Pattern>
  </Defs>
  <Rect fill="none" stroke="blue" x="1" y="1" width="798" height="398" />
  <Ellipse
    fill="url(#TrianglePattern)"
    stroke="black"
    strokeWidth="5"
    cx="400"
    cy="200"
    rx="350"
    ry="150"
  />
</Svg>
```

--------------------------------

### LinearGradient Example: Diagonal with Opacity

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/gradient-elements.md

Creates a diagonal gradient with varying opacity using multiple Stop elements.

```jsx
import { Svg, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';

// Diagonal gradient with opacity
<Svg width={200} height={200}>
  <Defs>
    <LinearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
      <Stop offset="0%" stopColor="purple" stopOpacity="1" />
      <Stop offset="50%" stopColor="cyan" stopOpacity="0.5" />
      <Stop offset="100%" stopColor="orange" stopOpacity="0" />
    </LinearGradient>
  </Defs>
  <Rect x="10" y="10" width="180" height="180" fill="url(#grad3)" />
</Svg>
```

--------------------------------

### LinearGradient Example: Multiple Stops (Rainbow)

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/gradient-elements.md

Demonstrates a linear gradient with multiple color stops to create a rainbow effect.

```jsx
import { Svg, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';

// Multiple gradient stops
<Svg width={300} height={100}>
  <Defs>
    <LinearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
      <Stop offset="0%" stopColor="red" />
      <Stop offset="17%" stopColor="orange" />
      <Stop offset="33%" stopColor="yellow" />
      <Stop offset="50%" stopColor="green" />
      <Stop offset="67%" stopColor="blue" />
      <Stop offset="83%" stopColor="indigo" />
      <Stop offset="100%" stopColor="violet" />
    </LinearGradient>
  </Defs>
  <Rect width="300" height="100" fill="url(#rainbow)" />
</Svg>
```

--------------------------------

### Basic SVG Rendering Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

Renders a Circle and a Rect within an SVG component. Ensure all necessary components from 'react-native-svg' are imported.

```jsx
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';

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

--------------------------------

### Example Usage of Defs with LinearGradient and ClipPath

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/definition-container-elements.md

Demonstrates how to use the Defs element to define a LinearGradient and a ClipPath, which are then applied to a Rect element. Ensure that the 'id' attributes match the 'url(#id)' references.

```jsx
import { Svg, Defs, LinearGradient, Stop, ClipPath, Rect } from 'react-native-svg';

<Svg width={200} height={200}>
  <Defs>
    <LinearGradient id="grad1">
      <Stop offset="0%" stopColor="red" />
      <Stop offset="100%" stopColor="blue" />
    </LinearGradient>
    <ClipPath id="clip1">
      <Circle cx="50" cy="50" r="40" />
    </ClipPath>
  </Defs>
  <Rect width="200" height="200" fill="url(#grad1)" clipPath="url(#clip1)" />
</Svg>
```

--------------------------------

### FeFlood Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/filter-elements.md

Fills a filter region with a solid color and opacity. Useful for creating colored backgrounds or overlays within filters.

```jsx
<Filter id="red-fill">
  <FeFlood floodColor="red" floodOpacity="0.5" />
</Filter>
```

--------------------------------

### TextPath Usage

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/text-elements.md

Shows how to render text along a specified path using the TextPath component, with examples for curved and arc paths.

```APIDOC
## TextPath

### Description

Renders text that follows a specified path, enabling curved or non-linear text placement. It requires a reference to a `Path` element with an `id`.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `href` | `string` | — | Reference to a Path element (e.g., "#pathId") |
| `xlinkHref` | `string` | — | Deprecated: use `href` instead |
| `startOffset` | `NumberProp` | `0` | Offset along the path (0-100% or absolute units) |
| `method` | `TextPathMethod` | — | Positioning method (align, stretch) |
| `spacing` | `TextPathSpacing` | — | Spacing style (auto, exact) |
| `midLine` | `TextPathMidLine` | — | Midline rendering (sharp, smooth) |
| `side` | `string` | — | Which side of path to place text |
| `fontSize` | `NumberProp` | — | Font size |
| `fontFamily` | `string` | — | Font family |
| `fontWeight` | `FontWeight` | — | Font weight |
| `fill` | `ColorValue` | — | Text color |
| `children` | `TextChild` | — | Text content |
| ... | ... | — | Inherits TextSpecificProps |

### Requirements

- Must reference a valid Path element using `href` or `xlinkHref`.
- The referenced path must have an `id` attribute.
- Falls back to rendering as TSpan if href is invalid.

### Example

```jsx
import { Svg, Path, Text, TextPath, Defs } from 'react-native-svg';

// Text following a curved path
<Svg width={400} height={200}>
  <Defs>
    <Path
      id="curve"
      d="M 50 50 Q 200 10 350 50"
      fill="none"
    />
  </Defs>
  <Path
    d="M 50 50 Q 200 10 350 50"
    stroke="black"
    strokeWidth="1"
    fill="none"
  />
  <Text fontSize="18" fill="blue">
    <TextPath href="#curve" startOffset="50%" textAnchor="middle">
      Text on curved path
    </TextPath>
  </Text>
</Svg>

// Text following an arc
<Svg width={300} height={300}>
  <Defs>
    <Path
      id="arcPath"
      d="M 150 50 A 100 100 0 0 1 250 250"
      fill="none"
    />
  </Defs>
  <Text fontSize="16" fill="darkgreen">
    <TextPath href="#arcPath" spacing="auto">
      Following an arc
    </TextPath>
  </Text>
</Svg>

// Multiple text paths on different paths
<Svg width={400} height={300}>
  <Defs>
    <Path id="curve1" d="M 50 50 Q 150 10 250 50" fill="none" />
    <Path id="curve2" d="M 50 100 Q 150 150 250 100" fill="none" />
  </Defs>
  <Text fontSize="14" fill="navy">
    <TextPath href="#curve1">Top curve</TextPath>
  </Text>
  <Text fontSize="14" fill="purple">
    <TextPath href="#curve2">Bottom curve</TextPath>
  </Text>
</Svg>
```
```

--------------------------------

### FeDropShadow Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/filter-elements.md

Use FeDropShadow to create a drop shadow effect for an element. Specify offsets, blur, color, and opacity for the shadow.

```jsx
<Filter id="drop-shadow">
  <FeDropShadow dx="2" dy="2" stdDeviation="3" floodColor="black" />
</Filter>
```

--------------------------------

### Ellipse Element Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

Illustrates how to create an ellipse using the Ellipse element. Properties like cx, cy for the center, rx for the horizontal radius, ry for the vertical radius, and fill/stroke are shown.

```jsx
<Svg height="100" width="110">
  <Ellipse
    cx="55"
    cy="55"
    rx="50"
    ry="30"
    stroke="purple"
    strokeWidth="2"
    fill="yellow"
  />
</Svg>
```

--------------------------------

### Complete Gradient Example with Multiple Gradients

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/gradient-elements.md

Demonstrates the use of multiple linear and radial gradients within a single SVG, applied to different shapes. This shows how to combine various gradient types for complex visuals.

```jsx
import React from 'react';
import { Svg, Defs, LinearGradient, RadialGradient, Stop, Rect, Circle, G } from 'react-native-svg';

export const GradientExample = () => (
  <Svg width={400} height={200}>
    <Defs>
      {/* Linear gradient for background */}
      <LinearGradient id="background" x1="0%" y1="0%" x2="100%" y2="100%">
        <Stop offset="0%" stopColor="#1e3c72" />
        <Stop offset="100%" stopColor="#2a5298" />
      </LinearGradient>
      
      {/* Radial gradient for spotlight effect */}
      <RadialGradient id="spotlight" cx="50%" cy="50%" r="50%">
        <Stop offset="0%" stopColor="yellow" stopOpacity="1" />
        <Stop offset="100%" stopColor="orange" stopOpacity="0" />
      </RadialGradient>
      
      {/* Linear gradient for shape */}
      <LinearGradient id="shape" x1="0%" y1="0%" x2="100%" y2="100%">
        <Stop offset="0%" stopColor="magenta" />
        <Stop offset="50%" stopColor="cyan" />
        <Stop offset="100%" stopColor="lime" />
      </LinearGradient>
    </Defs>
    
    {/* Background */}
    <Rect width="400" height="200" fill="url(#background)" />
    
    {/* Spotlight effect */}
    <Circle cx="100" cy="50" r="80" fill="url(#spotlight)" opacity="0.6" />
    
    {/* Shape with gradient */}
    <Rect x="150" y="50" width="150" height="100" fill="url(#shape)" rx="10" />
  </Svg>
);

```

--------------------------------

### Applying Markers to Multiple Paths with Shared Definitions

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

This example shows how to define a marker once and apply it to multiple path elements within a group. The 'marker-end' property is used on both the group and individual paths.

```jsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { SvgXml } from 'react-native-svg';

const markerRendering = `<svg xmlns="http://www.w3.org/2000/svg"
     width="275" height="200" viewBox="0 0 275 200">
  <defs>
    <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
            markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
            orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke" />
    </marker>
  </defs>

  <g fill="none" stroke-width="10" marker-end="url(#Triangle)">
    <path stroke="crimson" d="M 100,75 C 125,50 150,50 175,75" marker-end="url(#Triangle)"/>
    <path stroke="olivedrab" d="M 175,125 C 150,150 125,150 100,125" marker-end="url(#Triangle)"/>
  </g>
</svg>`;

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <SvgXml xml={markerRendering} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
});
```

--------------------------------

### SVG Component Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/xml-parsing.md

A complete React Native component demonstrating the usage of `SvgXml`, `SvgUri`, and `SvgFromXml` for rendering SVGs from inline XML, URLs, and with class component control.

```jsx
import React, { useState, useRef } from 'react';
import {
  View,
  Text,
  ScrollView,
  ActivityIndicator,
  TouchableOpacity,
} from 'react-native';
import { SvgXml, SvgUri, SvgFromXml, parse } from 'react-native-svg';

const sampleSvg = `
  <svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="grad">
        <stop offset="0%" stopColor="red" />
        <stop offset="100%" stopColor="blue" />
      </linearGradient>
    </defs>
    <circle cx="50" cy="50" r="40" fill="url(#grad)" />
  </svg>
`;

export const ParseExample = () => {
  const [selectedTab, setSelectedTab] = useState('xml');
  const fromXmlRef = useRef(null);

  return (
    <ScrollView>
      {/* SvgXml - Simple inline parsing */}
      {selectedTab === 'xml' && (
        <View>
          <Text>Using SvgXml:</Text>
          <SvgXml
            xml={sampleSvg}
            width={200}
            height={200}
            onError={(e) => console.log('Error:', e)}
            fallback={<Text>Parse failed</Text>}
          />
        </View>
      )}

      {/* SvgUri - Load from URL */}
      {selectedTab === 'uri' && (
        <View>
          <Text>Using SvgUri:</Text>
          <SvgUri
            uri="https://example.com/icon.svg"
            width={200}
            height={200}
            fallback={<ActivityIndicator />}
          />
        </View>
      )}

      {/* SvgFromXml - Class component with control */}
      {selectedTab === 'class' && (
        <View>
          <Text>Using SvgFromXml:</Text>
          <SvgFromXml
            ref={fromXmlRef}
            xml={sampleSvg}
            width={200}
            height={200}
          />
          <TouchableOpacity
            onPress={() => fromXmlRef.current?.parse(sampleSvg)}
          >
            <Text>Re-parse</Text>
          </TouchableOpacity>
        </View>
      )}
    </ScrollView>
  );
};
```

--------------------------------

### Example Usage of Symbol and Use for Reusable Shapes

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/definition-container-elements.md

Shows how to define a reusable 'star' symbol using the Symbol element within Defs, and then instantiate it multiple times using the Use element with different positions and sizes. The 'viewBox' prop on Symbol is crucial for defining its internal coordinate system.

```jsx
import { Svg, Defs, Symbol, Path, Use } from 'react-native-svg';

<Svg width={300} height={100}>
  <Defs>
    <Symbol id="star" viewBox="0 0 100 100">
      <Path 
        d="M 50 20 L 61 40 L 83 40 L 65 55 L 75 80 L 50 65 L 25 80 L 35 55 L 17 40 L 39 40 Z"
        fill="gold"
      />
    </Symbol>
  </Defs>
  <Use href="#star" x="0" y="0" width="100" height="100" />
  <Use href="#star" x="100" y="0" width="100" height="100" />
  <Use href="#star" x="200" y="0" width="100" height="100" />
</Svg>
```

--------------------------------

### Complex Clip Path Example with Image

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/definition-container-elements.md

Uses a ClipPath with a rounded rectangle to mask an Image element. This demonstrates applying clipping to more complex shapes and external resources.

```jsx
import { Svg, Defs, ClipPath, Rect, Image } from 'react-native-svg';

// Complex clip path
<Svg width={300} height={200}>
  <Defs>
    <ClipPath id="complexClip">
      <Rect x="50" y="30" width="200" height="140" rx="20" />
    </ClipPath>
  </Defs>
  <Image href={require('./image.png')} x="0" y="0" width="300" height="200"
         clipPath="url(#complexClip)" />
</Svg>
```

--------------------------------

### Apply Filters Prop to FilterImage

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

This example shows how to apply filters to a FilterImage component using the 'filters' prop. It accepts an array of filter objects, each specifying the filter name, type, and values.

```tsx
import React from 'react';
import { StyleSheet } from 'react-native';
import { FilterImage } from 'react-native-svg/filter-image';

const myImage = require('./myImage.jpg');

export default () => {
  return (
    <FilterImage
      style={styles.image}
      source={myImage}
      filters={[
        { name: 'feColorMatrix', type: 'saturate', values: 0.2 },
        {
          name: 'feColorMatrix',
          type: 'matrix',
          values: [
            0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0,
            0, 1, 0,
          ],
        },
      ]}
    />
  );
};

const styles = StyleSheet.create({
  image: {
    width: 200,
    height: 200,
  },
});
```

--------------------------------

### Simple Repeating Pattern Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/definition-container-elements.md

Shows how to create a simple repeating pattern using the Pattern element in React Native SVG. The pattern is defined in Defs and applied to a Rect element.

```jsx
import { Svg, Defs, Pattern, Rect, Circle } from 'react-native-svg';

// Simple repeating pattern
<Svg width={200} height={200}>
  <Defs>
    <Pattern id="dots" x="0" y="0" width="20" height="20" 
             patternUnits="userSpaceOnUse">
      <Circle cx="10" cy="10" r="5" fill="red" />
    </Pattern>
  </Defs>
  <Rect width="200" height="200" fill="url(#dots)" />
</Svg>
```

--------------------------------

### SVG Mask Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md

Demonstrates how to use a LinearGradient to create a mask for text. The mask is applied to a blue text element, revealing it only where the gradient is opaque. A fallback text with a black stroke is also shown.

```jsx
<Svg width="100%" height="100%" viewBox="0 0 800 300">
  <Defs>
    <LinearGradient
      id="Gradient"
      gradientUnits="userSpaceOnUse"
      x1="0"
      y1="0"
      x2="800"
      y2="0">
      <Stop offset="0" stopColor="white" stopOpacity="0" />
      <Stop offset="1" stopColor="white" stopOpacity="1" />
    </LinearGradient>
    <Mask
      id="Mask"
      maskUnits="userSpaceOnUse"
      x="0"
      y="0"
      width="800"
      height="300">
      <Rect x="0" y="0" width="800" height="300" fill="url(#Gradient)" />
    </Mask>
    <Text
      id="Text"
      x="400"
      y="200"
      fontFamily="Verdana"
      fontSize="100"
      textAnchor="middle">
      Masked text
    </Text>
  </Defs>
  <Rect x="0" y="0" width="800" height="300" fill="#FF8080" />
  <Use href="#Text" fill="blue" mask="url(#Mask)" />
  <Use href="#Text" fill="none" stroke="black" stroke-width="2" />
</Svg>
```

--------------------------------

### Add Windows support to React Native project

Source: https://github.com/software-mansion/react-native-svg/blob/main/README.md

Initialize Windows support for your React Native project using this command, then run the application on Windows.

```bash
npx react-native-windows-init --overwrite
react-native run-windows
```

--------------------------------

### Circular Clip Path Example

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/definition-container-elements.md

Applies a circular clipping path to a red rectangle, revealing only the portion within the circle. The 'clipPath' prop on the Rect element references the ClipPath defined in Defs by its 'id'.

```jsx
import { Svg, Defs, ClipPath, Circle, Rect } from 'react-native-svg';

// Circular clip mask
<Svg width={200} height={200}>
  <Defs>
    <ClipPath id="circleClip">
      <Circle cx="100" cy="100" r="80" />
    </ClipPath>
  </Defs>
  <Rect width="200" height="200" fill="blue" />
  <Rect x="0" y="0" width="200" height="200" fill="red" 
        clipPath="url(#circleClip)" />
</Svg>
```

--------------------------------

### Run project on iOS and Android

Source: https://github.com/software-mansion/react-native-svg/blob/main/README.md

After setting up a clean project, use these commands to run your application on iOS and Android simulators or devices.

```bash
react-native run-ios
react-native run-android
```

--------------------------------

### Basic Text Rendering

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/text-elements.md

Renders a simple 'Hello World' text string with specified position, font size, and fill color.

```jsx
import { Svg, Text } from 'react-native-svg';

// Basic text
<Svg width={200} height={100}>
  <Text x="10" y="30" fontSize="20" fill="black">
    Hello World
  </Text>
</Svg>
```

--------------------------------

### LinearGradient Example: Vertical

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/gradient-elements.md

Defines a vertical linear gradient from yellow to green, applied to a rectangle.

```jsx
import { Svg, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';

// Vertical gradient (top to bottom)
<Svg width={200} height={200}>
  <Defs>
    <LinearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <Stop offset="0%" stopColor="yellow" />
      <Stop offset="100%" stopColor="green" />
    </LinearGradient>
  </Defs>
  <Rect x="10" y="10" width="180" height="180" fill="url(#grad2)" />
</Svg>
```

--------------------------------

### TextAnchor Type Alias

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/types.md

Defines the horizontal alignment of text. Options are 'start', 'middle', or 'end'.

```typescript
type TextAnchor = 'start' | 'middle' | 'end';
```

--------------------------------

### Create a clean project for troubleshooting

Source: https://github.com/software-mansion/react-native-svg/blob/main/README.md

To troubleshoot unexpected behavior, create a new React Native project and add react-native-svg to isolate the issue. This ensures a clean environment for testing.

```bash
react-native init CleanProject
cd CleanProject/
yarn add react-native-svg
cd ios && pod install && cd ..
```

--------------------------------

### Main Entry Point Imports

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/README.md

This section shows the main components and utilities that can be imported directly from the 'react-native-svg' package.

```APIDOC
## Main Entry Point

### Imports

```typescript
import {
  // Root SVG
  Svg,
  
  // Shape Elements
  Circle,
  Ellipse,
  Rect,
  Line,
  Polygon,
  Polyline,
  Path,
  
  // Text Elements
  Text,
  TSpan,
  TextPath,
  
  // Container Elements
  G,
  Symbol,
  Use,
  ForeignObject,
  Image,
  
  // Definition Elements
  Defs,
  ClipPath,
  Mask,
  Pattern,
  
  // Gradient Elements
  LinearGradient,
  RadialGradient,
  Stop,
  
  // Marker Element
  Marker,
  
  // Filter Elements
  Filter,
  FeBlend,
  FeGaussianBlur,
  FeColorMatrix,
  FeComposite,
  FeOffset,
  FeMerge,
  FeFlood,
  FeImage,
  FeComponentTransfer,
  FeFuncR,
  FeFuncG,
  FeFuncB,
  FeFuncA,
  FeConvolveMatrix,
  FeDiffuseLighting,
  FeDisplacementMap,
  FeDistantLight,
  FeDropShadow,
  FePointLight,
  FeSpecularLighting,
  FeSpotLight,
  FeMorphology,
  FeTurbulence,
  FeTile,
  
  // Shape base class
  Shape,
  
  // XML Parsing
  SvgXml,
  SvgUri,
  SvgFromXml,
  SvgFromUri,
  SvgAst,
  parse,
  camelCase,
  fetchText,
  
  // Types
  AstProps,
  JsxAST,
  Middleware,
  Styles,
  UriProps,
  UriState,
  XmlAST,
  XmlProps,
  XmlState,
} from 'react-native-svg';
```
```

--------------------------------

### LinearGradient Example: Horizontal

Source: https://github.com/software-mansion/react-native-svg/blob/main/_autodocs/api-reference/gradient-elements.md

Defines a simple horizontal linear gradient from red to blue, used to fill a rectangle.

```jsx
import { Svg, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';

// Simple horizontal gradient (left to right)
<Svg width={200} height={200}>
  <Defs>
    <LinearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <Stop offset="0%" stopColor="red" />
      <Stop offset="100%" stopColor="blue" />
    </LinearGradient>
  </Defs>
  <Rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
</Svg>
```