mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-05 22:56:11 +00:00
b3b175a7fb
# Summary Due to the large number of example apps in the repository, I decided to change the structure and move all applications into an "apps" folder to maintain a clear structure.
112 lines
3.0 KiB
TypeScript
112 lines
3.0 KiB
TypeScript
import React, {useState} from 'react';
|
|
import {Alert} from 'react-native';
|
|
import {
|
|
Circle,
|
|
ClipPath,
|
|
Defs,
|
|
G,
|
|
Path,
|
|
Rect,
|
|
Svg,
|
|
Text,
|
|
} from 'react-native-svg';
|
|
|
|
function PressExample() {
|
|
return (
|
|
<Svg height="100" width="100">
|
|
<Circle
|
|
cx="50%"
|
|
cy="50%"
|
|
r="38%"
|
|
fill="red"
|
|
onPress={() => Alert.alert('Press on Circle')}
|
|
/>
|
|
<Rect
|
|
x="20%"
|
|
y="20%"
|
|
width="60%"
|
|
height="60%"
|
|
fill="blue"
|
|
onLongPress={() => Alert.alert('Long press on Rect')}
|
|
/>
|
|
<Path d="M50,5L20,99L95,39L5,39L80,99z" fill="pink" />
|
|
</Svg>
|
|
);
|
|
}
|
|
PressExample.title =
|
|
'Press on the red circle or long press on the blue rectangle to trigger the events';
|
|
|
|
function HoverExample() {
|
|
const [hover, setHover] = useState(false);
|
|
|
|
const toggle = () => {
|
|
setHover(!hover);
|
|
};
|
|
|
|
return (
|
|
<Svg height="120" width="120" delayPressIn={0}>
|
|
<Defs>
|
|
<ClipPath id="hover-clip">
|
|
<Circle r="30" cx="50%" cy="50%" />
|
|
</ClipPath>
|
|
</Defs>
|
|
<Path
|
|
onPressIn={toggle}
|
|
onPressOut={toggle}
|
|
d="M50,5L20,99L95,39L5,39L80,99z"
|
|
stroke={hover ? 'rgba(10, 10, 10, 0.5)' : 'black'}
|
|
fill={hover ? 'pink' : 'red'}
|
|
clipPath="url(#hover-clip)"
|
|
strokeWidth="6"
|
|
x="0"
|
|
y="0"
|
|
/>
|
|
</Svg>
|
|
);
|
|
}
|
|
|
|
HoverExample.title = 'Hover the svg path';
|
|
|
|
function GroupExample() {
|
|
return (
|
|
<Svg height="120" width="120" viewBox="0 0 240 240">
|
|
<G onPress={() => Alert.alert('Pressed on G')} scale="1.4">
|
|
<Circle cx="80" cy="80" r="30" fill="green" x="20" scale="1.2" />
|
|
<Text
|
|
fill="black"
|
|
fontWeight="bold"
|
|
fontSize="40"
|
|
x="100"
|
|
y="40"
|
|
onPress={() => Alert.alert('Pressed on Text')}>
|
|
H
|
|
</Text>
|
|
<Rect x="20" y="20" width="40" height="40" fill="yellow" />
|
|
</G>
|
|
</Svg>
|
|
);
|
|
}
|
|
GroupExample.title = 'Bind touch events callback on Group element with viewBox';
|
|
|
|
const icon = (
|
|
<Svg height="30" width="30" viewBox="0 0 20 20">
|
|
<Circle fill="#ccc" stroke="#000" cx="11.1" cy="4.4" r="2.6" />
|
|
<Path
|
|
fill="#fff"
|
|
stroke="#000"
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d={`M6.2,9.4
|
|
c0,0,0-0.1,0-0.2c0-0.2,0.1-0.3,0.1-0.4c0.2-0.4,0.5-0.7,1-0.7c0.3,0,0.5,0,0.6,0h0.1v0.7V10 M8.1,8.8c0,0,0-0.1,0-0.2
|
|
c0-0.2,0.1-0.3,0.1-0.4c0.2-0.4,0.5-0.7,1-0.7c0.3,0,0.5,0,0.6,0h0.1v1.9 M10.1,7.5v-2c0,0,0-0.1,0-0.2c0-0.2,0.1-0.3,0.1-0.4
|
|
c0.2-0.4,0.5-0.6,0.9-0.7c0.4,0,0.7,0.2,0.9,0.7C12,5,12,5.2,12,5.4c0,0.1,0,0.1,0,0.2v6c1.4-1.8,2.4-1.8,2.8,0.1
|
|
c-1.7,1.5-2.9,3.7-3.4,6.4l-5.8,0c-0.2-0.6-0.5-1.4-0.7-2.5c-0.3-1-0.5-2.5-0.6-4.5l0-0.8c0-0.1,0-0.1,0-0.2c0-0.2,0.1-0.3,0.1-0.4
|
|
c0.2-0.4,0.5-0.7,1-0.7c0.3,0,0.5,0,0.6,0l0.1,0v0.5c0,0,0,0,0,0l0,1.1l0,0.2 M6.2,10.9l0-0.4`}
|
|
/>
|
|
</Svg>
|
|
);
|
|
const samples = [PressExample, HoverExample, GroupExample];
|
|
|
|
export {icon, samples};
|