1import React from 'react';
2import { View } from 'react-native';
3import * as Svg from 'react-native-svg';
4
5import Example from './Example';
6
7const { Defs, LinearGradient, RadialGradient, Stop, Ellipse, Circle, Text, Rect, G } = Svg;
8
9class LinearGradientHorizontal extends React.Component {
10  static title = 'Define an ellipse with a horizontal linear gradient from yellow to red';
11  render() {
12    return (
13      <Svg.Svg height="150" width="300">
14        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
15        <Defs>
16          <LinearGradient id="grad" x1="65" y1="0" x2="235" y2="0" gradientUnits="userSpaceOnUse">
17            <Stop offset="0" stopColor="rgb(255,255,0)" stopOpacity="0" />
18            <Stop offset="1" stopColor="red" />
19          </LinearGradient>
20        </Defs>
21      </Svg.Svg>
22    );
23  }
24}
25
26class LinearGradientRotated extends React.Component {
27  static title = 'Define an ellipse with a rotated linear gradient from yellow to red';
28  render() {
29    return (
30      <Svg.Svg height="150" width="300">
31        <Defs>
32          <LinearGradient id="grad" x1={0} y1={0} x2="0%" y2="100%">
33            <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
34            <Stop offset="100%" stopColor="red" stopOpacity="1" />
35          </LinearGradient>
36        </Defs>
37        <G>
38          <G>
39            <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
40          </G>
41        </G>
42      </Svg.Svg>
43    );
44  }
45}
46
47class GradientUnits extends React.Component {
48  static title = 'Compare gradientUnits="userSpaceOnUse" width default';
49  render() {
50    return (
51      <View
52        style={{ width: 300, height: 150, flexDirection: 'row', justifyContent: 'space-around' }}>
53        <Svg.Svg height="150" width="90">
54          <Defs>
55            <LinearGradient id="defaultUnits" x1="0%" y1="0%" x2="0%" y2="100%">
56              <Stop offset="0%" stopColor="#000" stopOpacity="1" />
57              <Stop offset="100%" stopColor="#ff0" stopOpacity="1" />
58            </LinearGradient>
59          </Defs>
60          <Rect fill="url(#defaultUnits)" x="10" y="10" width="70" height="70" rx="10" ry="10" />
61        </Svg.Svg>
62        <Svg.Svg height="150" width="90">
63          <Defs>
64            <LinearGradient
65              id="userSpaceOnUse"
66              x1="0%"
67              y1="0%"
68              x2="0%"
69              y2="100%"
70              gradientUnits="userSpaceOnUse">
71              <Stop offset="0%" stopColor="#000" stopOpacity="1" />
72              <Stop offset="100%" stopColor="#ff0" stopOpacity="1" />
73            </LinearGradient>
74          </Defs>
75          <Rect fill="url(#userSpaceOnUse)" x="10" y="10" width="70" height="70" rx="10" ry="10" />
76        </Svg.Svg>
77      </View>
78    );
79  }
80}
81
82class LinearGradientPercent extends React.Component {
83  static title = 'Define a linear gradient in percent unit';
84  render() {
85    return (
86      <Svg.Svg height="150" width="300">
87        <Defs>
88          <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
89            <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
90            <Stop offset="100%" stopColor="red" stopOpacity="1" />
91          </LinearGradient>
92        </Defs>
93        <Text x="25" y="70" fill="#333">
94          x1=0%
95        </Text>
96        <Text x="235" y="70" fill="#333">
97          x2=100%
98        </Text>
99        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
100      </Svg.Svg>
101    );
102  }
103}
104
105class RadialGradientExample extends React.Component {
106  static title = 'Define an ellipse with a radial gradient from yellow to purple';
107  render() {
108    return (
109      <Svg.Svg height="150" width="300">
110        <Defs>
111          <RadialGradient
112            id="grad"
113            cx="150"
114            cy="75"
115            r="85"
116            fx="150"
117            fy="75"
118            gradientUnits="userSpaceOnUse">
119            <Stop offset="0" stopColor="#ff0" stopOpacity="1" />
120            <Stop offset="0.3" stopColor="#000" stopOpacity="1" />
121            <Stop offset="0.7" stopColor="#0f0" stopOpacity="1" />
122            <Stop offset="1" stopColor="#83a" stopOpacity="1" />
123          </RadialGradient>
124        </Defs>
125        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
126      </Svg.Svg>
127    );
128  }
129}
130
131class RadialGradientPercent extends React.Component {
132  static title = 'Define a radial gradient in percent unit';
133  render() {
134    return (
135      <Svg.Svg height="150" width="300">
136        <Defs>
137          <RadialGradient id="grad" cx="50%" cy="50%" rx="50%" ry="50%" fx="50%" fy="50%">
138            <Stop offset="0%" stopColor="#fff" stopOpacity="1" />
139            <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
140          </RadialGradient>
141        </Defs>
142        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
143      </Svg.Svg>
144    );
145  }
146}
147
148class RadialGradientPart extends React.Component {
149  static title = 'Define another ellipse with a radial gradient from white to blue';
150  render() {
151    return (
152      <Svg.Svg height="150" width="300">
153        <Defs>
154          <RadialGradient id="grad" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
155            <Stop offset="0%" stopColor="#fff" stopOpacity="0" />
156            <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
157          </RadialGradient>
158        </Defs>
159        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
160      </Svg.Svg>
161    );
162  }
163}
164
165class FillGradientWithOpacity extends React.Component {
166  static title = 'Fill a radial gradient with fillOpacity prop';
167  render() {
168    return (
169      <Svg.Svg height="150" width="300">
170        <Defs>
171          <RadialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
172            <Stop offset="0%" stopColor="#fff" stopOpacity="1" />
173            <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
174          </RadialGradient>
175        </Defs>
176        <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" fillOpacity="0.2" />
177      </Svg.Svg>
178    );
179  }
180}
181
182class FillGradientInRect extends React.Component {
183  static title = 'Fill a radial gradient inside a rect and stroke it';
184  render() {
185    return (
186      <Svg.Svg height="150" width="300">
187        <Defs>
188          <RadialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
189            <Stop offset="0%" stopColor="#fff" stopOpacity="1" />
190            <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
191          </RadialGradient>
192        </Defs>
193        <Rect
194          x="5"
195          y="5"
196          width="290"
197          height="130"
198          fill="url(#grad)"
199          stroke="pink"
200          strokeWidth="5"
201        />
202      </Svg.Svg>
203    );
204  }
205}
206
207const icon = (
208  <Svg.Svg height="20" width="20">
209    <Defs>
210      <LinearGradient id="grad" x1="0" y1="0" x2="0" y2="20">
211        <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0" />
212        <Stop offset="100%" stopColor="red" stopOpacity="1" />
213      </LinearGradient>
214    </Defs>
215    <Circle cx="10" cy="10" r="10" fill="url(#grad)" />
216  </Svg.Svg>
217);
218
219const Gradients: Example = {
220  icon,
221  samples: [
222    LinearGradientHorizontal,
223    LinearGradientRotated,
224    GradientUnits,
225    LinearGradientPercent,
226    RadialGradientExample,
227    RadialGradientPercent,
228    RadialGradientPart,
229    FillGradientWithOpacity,
230    FillGradientInRect,
231  ],
232};
233
234export default Gradients;
235