import React from 'react';
import { View } from 'react-native';
import * as Svg from 'react-native-svg';
import Example from './Example';
const { Defs, LinearGradient, RadialGradient, Stop, Ellipse, Circle, Text, Rect, G } = Svg;
class LinearGradientHorizontal extends React.Component {
static title = 'Define an ellipse with a horizontal linear gradient from yellow to red';
render() {
return (
);
}
}
class LinearGradientRotated extends React.Component {
static title = 'Define an ellipse with a rotated linear gradient from yellow to red';
render() {
return (
);
}
}
class GradientUnits extends React.Component {
static title = 'Compare gradientUnits="userSpaceOnUse" width default';
render() {
return (
);
}
}
class LinearGradientPercent extends React.Component {
static title = 'Define a linear gradient in percent unit';
render() {
return (
x1=0%
x2=100%
);
}
}
class RadialGradientExample extends React.Component {
static title = 'Define an ellipse with a radial gradient from yellow to purple';
render() {
return (
);
}
}
class RadialGradientPercent extends React.Component {
static title = 'Define a radial gradient in percent unit';
render() {
return (
);
}
}
class RadialGradientPart extends React.Component {
static title = 'Define another ellipse with a radial gradient from white to blue';
render() {
return (
);
}
}
class FillGradientWithOpacity extends React.Component {
static title = 'Fill a radial gradient with fillOpacity prop';
render() {
return (
);
}
}
class FillGradientInRect extends React.Component {
static title = 'Fill a radial gradient inside a rect and stroke it';
render() {
return (
);
}
}
const icon = (
);
const Gradients: Example = {
icon,
samples: [
LinearGradientHorizontal,
LinearGradientRotated,
GradientUnits,
LinearGradientPercent,
RadialGradientExample,
RadialGradientPercent,
RadialGradientPart,
FillGradientWithOpacity,
FillGradientInRect,
],
};
export default Gradients;