Skip to content

Commit c6af6b4

Browse files
authored
docs: add Empty screen as playground (#2517)
# Summary Create Empty screen with blank svg in example app as playground Additionally add FeDropShadow icon as i forgot about it.
1 parent fd9397c commit c6af6b4

File tree

3 files changed

+29
-24
lines changed

3 files changed

+29
-24
lines changed
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import {Rect, Svg} from 'react-native-svg';
3+
4+
function EmptyExample() {
5+
return <Svg height="400" width="400"></Svg>;
6+
}
7+
EmptyExample.title = '';
8+
9+
const icon = (
10+
<Svg height="30" width="30" viewBox="0 0 20 20">
11+
<Rect x="0" y="0" width="20" height="20" fill="none" stroke="black" />
12+
</Svg>
13+
);
14+
const samples = [EmptyExample];
15+
16+
export {icon, samples};

apps/common/example/examples/Filters/FeDropShadow.tsx

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import React from 'react';
2-
import {
3-
Circle,
4-
FeDropShadow,
5-
FeFlood,
6-
Filter,
7-
Rect,
8-
Svg,
9-
} from 'react-native-svg';
2+
import {Circle, FeDropShadow, Filter, Svg} from 'react-native-svg';
103

114
BasicMDN.title = 'Basic MDN example';
125
function BasicMDN() {
@@ -35,23 +28,17 @@ function BasicMDN() {
3528
}
3629

3730
const icon = (
38-
<Svg height="30" width="30" viewBox="0 0 140 140">
39-
<Filter
40-
id="floodFilterIcon"
41-
x="50%"
42-
filterUnits="userSpaceOnUse"
43-
primitiveUnits="userSpaceOnUse">
44-
<FeFlood
45-
y="-10%"
46-
x="10%"
47-
width="50%"
48-
height="50%"
49-
floodColor="yellow"
50-
floodOpacity="0.5"
51-
/>
31+
<Svg height="30" width="30" viewBox="0 0 100 100">
32+
<Filter id="dropShadowIcon" x="-1" width="3" y="-1" height="3">
33+
<FeDropShadow dx="3" dy="3" stdDeviation="2" floodOpacity="0.7" />
5234
</Filter>
53-
<Rect x="0" y="0" width="100" height="100" fill="blue" />
54-
<Circle cx="50" cy="50" r="40" filter="url(#floodFilterIcon)" />
35+
<Circle
36+
cx="50"
37+
cy="50"
38+
r="30"
39+
fill="lightblue"
40+
filter="url(#dropShadowIcon)"
41+
/>
5542
</Svg>
5643
);
5744
const samples = [BasicMDN];

apps/common/example/examples/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as Circle from './Circle';
22
import * as Clipping from './Clipping';
3+
import * as Empty from './Empty';
34
import * as Ellipse from './Ellipse';
45
import * as G from './G';
56
import * as Gradients from './Gradients';
@@ -21,6 +22,7 @@ import * as TouchEvents from './TouchEvents';
2122
import * as Transforms from './Transforms';
2223

2324
export const examples = {
25+
Empty,
2426
Svg,
2527
Rect,
2628
Circle,

0 commit comments

Comments
 (0)