Skip to content

Commit

Permalink
docs: add Empty screen as playground (#2517)
Browse files Browse the repository at this point in the history
# Summary

Create Empty screen with blank svg in example app as playground
Additionally add FeDropShadow icon as i forgot about it.
  • Loading branch information
jakex7 authored Oct 28, 2024
1 parent fd9397c commit c6af6b4
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 24 deletions.
16 changes: 16 additions & 0 deletions apps/common/example/examples/Empty.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react';
import {Rect, Svg} from 'react-native-svg';

function EmptyExample() {
return <Svg height="400" width="400"></Svg>;
}
EmptyExample.title = '';

const icon = (
<Svg height="30" width="30" viewBox="0 0 20 20">
<Rect x="0" y="0" width="20" height="20" fill="none" stroke="black" />
</Svg>
);
const samples = [EmptyExample];

export {icon, samples};
35 changes: 11 additions & 24 deletions apps/common/example/examples/Filters/FeDropShadow.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
import React from 'react';
import {
Circle,
FeDropShadow,
FeFlood,
Filter,
Rect,
Svg,
} from 'react-native-svg';
import {Circle, FeDropShadow, Filter, Svg} from 'react-native-svg';

BasicMDN.title = 'Basic MDN example';
function BasicMDN() {
Expand Down Expand Up @@ -35,23 +28,17 @@ function BasicMDN() {
}

const icon = (
<Svg height="30" width="30" viewBox="0 0 140 140">
<Filter
id="floodFilterIcon"
x="50%"
filterUnits="userSpaceOnUse"
primitiveUnits="userSpaceOnUse">
<FeFlood
y="-10%"
x="10%"
width="50%"
height="50%"
floodColor="yellow"
floodOpacity="0.5"
/>
<Svg height="30" width="30" viewBox="0 0 100 100">
<Filter id="dropShadowIcon" x="-1" width="3" y="-1" height="3">
<FeDropShadow dx="3" dy="3" stdDeviation="2" floodOpacity="0.7" />
</Filter>
<Rect x="0" y="0" width="100" height="100" fill="blue" />
<Circle cx="50" cy="50" r="40" filter="url(#floodFilterIcon)" />
<Circle
cx="50"
cy="50"
r="30"
fill="lightblue"
filter="url(#dropShadowIcon)"
/>
</Svg>
);
const samples = [BasicMDN];
Expand Down
2 changes: 2 additions & 0 deletions apps/common/example/examples/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as Circle from './Circle';
import * as Clipping from './Clipping';
import * as Empty from './Empty';
import * as Ellipse from './Ellipse';
import * as G from './G';
import * as Gradients from './Gradients';
Expand All @@ -21,6 +22,7 @@ import * as TouchEvents from './TouchEvents';
import * as Transforms from './Transforms';

export const examples = {
Empty,
Svg,
Rect,
Circle,
Expand Down

0 comments on commit c6af6b4

Please sign in to comment.