1import React from 'react';
2import * as Svg from 'react-native-svg';
3
4import Example from './Example';
5
6const { LinearGradient, Stop, Defs, Path, G, TSpan } = Svg;
7
8class TextExample extends React.Component {
9  static title = 'Text';
10
11  render() {
12    return (
13      <Svg.Svg height="30" width="100">
14        <Svg.Text x="50" y="9" fill="red" textAnchor="middle">
15          I love SVG!
16        </Svg.Text>
17      </Svg.Svg>
18    );
19  }
20}
21
22class TextRotate extends React.Component {
23  static title = 'Transform the text';
24
25  render() {
26    return (
27      <Svg.Svg height="60" width="200">
28        <Svg.Text x="0" y="15" fill="red" rotate="30" origin="20,40">
29          I love SVG
30        </Svg.Text>
31        <Svg.Text x="95" y="47" fill="blue" rotate="-25" origin="95, 20">
32          I love SVG
33        </Svg.Text>
34        <Svg.Text x="126" y="5" fill="#f60" rotate="106" scale="1.36" origin="140, 0">
35          I love SVG
36        </Svg.Text>
37      </Svg.Svg>
38    );
39  }
40}
41
42class TextStroke extends React.Component {
43  static title = 'Stroke the text';
44  render() {
45    return (
46      <Svg.Svg height="60" width="200">
47        <Defs>
48          <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
49            <Stop offset="100%" stopColor="red" stopOpacity="0" />
50            <Stop offset="0%" stopColor="blue" stopOpacity="0.5" />
51          </LinearGradient>
52        </Defs>
53        <Svg.Text
54          stroke="url(#grad)"
55          strokeWidth="2"
56          fill="none"
57          fontSize="30"
58          fontWeight="bold"
59          x="100"
60          y="40">
61          <TSpan textAnchor="middle">{['STROKE TEXT']}</TSpan>
62        </Svg.Text>
63      </Svg.Svg>
64    );
65  }
66}
67
68class TextFill extends React.Component {
69  static title = 'Fill the text with LinearGradient';
70  render() {
71    return (
72      <Svg.Svg height="60" width="200">
73        <Defs>
74          <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
75            <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0.5" />
76            <Stop offset="100%" stopColor="red" stopOpacity="1" />
77          </LinearGradient>
78        </Defs>
79
80        <Svg.Text
81          fill="url(#grad)"
82          stroke="purple"
83          strokeWidth="1"
84          fontSize="30"
85          fontWeight="bold"
86          fontStyle="italic"
87          x="100"
88          y="40"
89          textAnchor="middle">
90          FILL TEXT
91        </Svg.Text>
92      </Svg.Svg>
93    );
94  }
95}
96
97class TextPathExample extends React.Component {
98  static title = 'Draw text along path';
99
100  render() {
101    const path = `
102M 10 20
103C 40 10 60  0 80 10
104C 100 20 120 30 140 20
105C 160 10 180 10 180 10
106`;
107
108    return (
109      <Svg.Svg height="100" width="200">
110        <Defs>
111          <Path id="path" d={path} />
112        </Defs>
113        <G y="20">
114          <Svg.Text fill="blue">
115            <Svg.TextPath href="#path" startOffset="-10%" midLine="sharp">
116              We go up and down,
117              <TSpan fill="red" dy="5,5,5">
118                then up again
119              </TSpan>
120            </Svg.TextPath>
121          </Svg.Text>
122          <Path d={path} fill="none" stroke="red" strokeWidth="1" />
123        </G>
124      </Svg.Svg>
125    );
126  }
127}
128
129class TSpanExample extends React.Component {
130  static title = 'TSpan nest';
131
132  render() {
133    return (
134      <Svg.Svg height="160" width="200">
135        <Svg.Text y="20" dx="5 5">
136          <TSpan x="10">tspan line 1</TSpan>
137          <TSpan x="10" dy="15">
138            tspan line 2
139          </TSpan>
140          <TSpan x="10" dx="10" dy="15">
141            tspan line 3
142          </TSpan>
143        </Svg.Text>
144        <Svg.Text x="10" y="60" fill="red" fontSize="14">
145          <TSpan dy="5 10 20">12345</TSpan>
146          <TSpan fill="blue" dy="15" dx="0 5 5">
147            <TSpan>6</TSpan>
148            <TSpan>7</TSpan>
149          </TSpan>
150          <TSpan dx="0 10 20" dy="0 20" fontWeight="bold" fontSize="12">
151            89a
152          </TSpan>
153        </Svg.Text>
154        <Svg.Text y="140" dx="0 5 5" dy="0 -5 -5">
155          delta on text
156        </Svg.Text>
157      </Svg.Svg>
158    );
159  }
160}
161
162const icon = (
163  <Svg.Svg height="20" width="20">
164    <Svg.Text
165      x="10"
166      y="15"
167      fontSize="14"
168      fontWeight="bold"
169      fontFamily="PingFang HK"
170      textAnchor="middle"
171      fill="none"
172      stroke="blue"
173      strokeWidth="1">
174      字
175    </Svg.Text>
176  </Svg.Svg>
177);
178
179const Text: Example = {
180  icon,
181  samples: [TextExample, TextRotate, TextStroke, TextFill, TextPathExample, TSpanExample],
182};
183
184export default Text;
185