Text Elements

/**
 * Renders SVG text element with full typography control
 * @param children - Text content or TSpan elements
 * @param x - X coordinate(s) for text positioning
 * @param y - Y coordinate(s) for text positioning  
 * @param dx - Relative X offset(s)
 * @param dy - Relative Y offset(s)
 * @param rotate - Rotation angle(s) for characters
 * @param opacity - Text opacity
 * @param inlineSize - Maximum line length for text wrapping
 */
interface TextProps extends TextSpecificProps {
  children?: ReactNode;
  x?: NumberArray;
  y?: NumberArray;
  dx?: NumberArray;
  dy?: NumberArray;
  rotate?: NumberArray;
  opacity?: NumberProp;
  inlineSize?: NumberProp;
}

declare const Text: React.ComponentType<TextProps>;

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

// Basic text
<Svg height="100" width="200">
  <Text x="10" y="30" fontSize="16" fill="black">
    Hello SVG
  </Text>
</Svg>

// Styled text
<Svg height="100" width="200">
  <Text
    x="10"
    y="50"
    fontSize="20"
    fontWeight="bold"
    fill="blue"
    textAnchor="start"
  >
    Bold Blue Text
  </Text>
</Svg>

// Multiple positioning
<Svg height="100" width="200">
  <Text x={[10, 50, 90]} y="30" fontSize="14" fill="red">
    A B C
  </Text>
</Svg>

/**
 * Text span element for styling portions of text
 * @param x - X coordinate(s) for span positioning
 * @param y - Y coordinate(s) for span positioning
 * @param dx - Relative X offset(s)
 * @param dy - Relative Y offset(s)
 * @param rotate - Rotation angle(s) for characters
 */
interface TSpanProps extends TextSpecificProps {
  children?: ReactNode;
  x?: NumberArray;
  y?: NumberArray;
  dx?: NumberArray;
  dy?: NumberArray;
  rotate?: NumberArray;
}

declare const TSpan: React.ComponentType<TSpanProps>;

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

// Mixed styling within text
<Svg height="100" width="300">
  <Text x="10" y="30" fontSize="16" fill="black">
    This is <TSpan fill="red" fontWeight="bold">red bold</TSpan> text
  </Text>
</Svg>

// Multiline text with different styles
<Svg height="100" width="200">
  <Text x="10" y="30" fontSize="14" fill="blue">
    <TSpan x="10" dy="0">First line</TSpan>
    <TSpan x="10" dy="20" fill="green">Second line</TSpan>
    <TSpan x="10" dy="20" fontSize="12" fill="gray">Third line</TSpan>
  </Text>
</Svg>

/**
 * Text that follows an SVG path
 * @param href - Reference to a path element (e.g., "#myPath")
 * @param startOffset - Offset along the path where text starts
 * @param method - How text should be fitted to path
 * @param spacing - Character spacing method
 * @param side - Which side of path to place text
 */
interface TextPathProps extends TextSpecificProps {
  children?: ReactNode;
  href?: string;
  startOffset?: NumberProp;
  method?: TextPathMethod;
  spacing?: TextPathSpacing;
  side?: 'left' | 'right';
}

declare const TextPath: React.ComponentType<TextPathProps>;

type TextPathMethod = 'align' | 'stretch';
type TextPathSpacing = 'auto' | 'exact';

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

// Text following a curved path
<Svg height="100" width="200">
  <Defs>
    <Path
      id="textPath"
      d="M 20 50 Q 100 20 180 50"
    />
  </Defs>
  <Text fontSize="14" fill="purple">
    <TextPath href="#textPath">
      Text following a curved path
    </TextPath>
  </Text>
</Svg>

// Text on a circle
<Svg height="200" width="200">
  <Defs>
    <Path
      id="circle"
      d="M 100 20 A 80 80 0 1 1 99 20"
    />
  </Defs>
  <Text fontSize="12" fill="darkblue">
    <TextPath href="#circle" startOffset="25%">
      Circular text goes around and around
    </TextPath>
  </Text>
</Svg>

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

interface FontProps extends FontObject {
  font?: FontObject;
}

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

type TextAnchor = 'start' | 'middle' | 'end';
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 TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'blink';
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';

// Left-aligned text (default)
<Text x="50" y="30" textAnchor="start">Left aligned</Text>

// Center-aligned text
<Text x="100" y="50" textAnchor="middle">Center aligned</Text>

// Right-aligned text  
<Text x="150" y="70" textAnchor="end">Right aligned</Text>

// Different baseline alignments
<Text x="50" y="50" alignmentBaseline="hanging">Hanging</Text>
<Text x="50" y="50" alignmentBaseline="middle">Middle</Text>
<Text x="50" y="50" alignmentBaseline="baseline">Baseline</Text>

// Outlined text
<Text
  x="50"
  y="50"
  fontSize="24"
  fill="white"
  stroke="black"
  strokeWidth="1"
>
  Outlined Text
</Text>

// Text with opacity
<Text x="50" y="50" fontSize="20" fill="blue" opacity="0.7">
  Semi-transparent
</Text>