Skip to content

Commit 6e78b50

Browse files
Alex ThomasAlex Thomas
Alex Thomas
authored and
Alex Thomas
committed
chore: remove animated props
1 parent 6640407 commit 6e78b50

16 files changed

Lines changed: 319 additions & 437 deletions

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square">
88

9-
Animated [**Rough.js**](https://roughjs.com/) bindings for that hand-drawn feel.
9+
[**Rough.js**](https://roughjs.com/) bindings for that hand-drawn feel.
1010

1111
## 🚀 getting started
1212

@@ -18,7 +18,7 @@ yarn add react-native-rough # or npm i -s react-native-rough
1818

1919
This project depends upon [react-native-svg](https://github.com/react-native-community/react-native-svg), and it assumes it has been installed and linked to the target project.
2020

21-
The component property spec fully conforms to the [**Rough.js API Specification**](https://github.com/pshihn/rough/wiki), and is powered by the [**Animated Driver**](https://reactnative.dev/docs/animated).
21+
The component property spec fully conforms to the [**Rough.js API Specification**](https://github.com/pshihn/rough/wiki).
2222

2323
You can see this library in action in the [**Example App**](./example/App.js).
2424

‎example/App.js‎

Lines changed: 108 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {useEffect, useState, useRef} from 'react';
2-
import {TouchableOpacity, View, StyleSheet, Animated, Dimensions, SafeAreaView, ScrollView, Text} from 'react-native';
2+
import {TouchableOpacity, View, StyleSheet, Dimensions, SafeAreaView, ScrollView, Text} from 'react-native';
33
import Svg from 'react-native-svg';
44
import Rough from 'react-native-rough';
55

@@ -45,188 +45,133 @@ const styles = StyleSheet.create({
4545
},
4646
});
4747

48-
const RectangleExample = () => {
49-
50-
const padding = 50;
51-
52-
const {current: x} = useRef(new Animated.Value(padding));
53-
const {current: y} = useRef(new Animated.Value(padding));
54-
const {current: size} = useRef(new Animated.Value(0));
55-
56-
useEffect(() => Animated.timing(size, {
57-
toValue: width - 2 * padding,
58-
duration: 500,
59-
useNativeDriver: true,
60-
}).start() && undefined, []);
61-
62-
return (
63-
<Rough.Rectangle
64-
x={x}
65-
y={y}
66-
width={size}
67-
height={size}
68-
hachureAngle={60}
69-
hachureGap={15}
70-
fillWeight={3}
71-
stroke="red"
72-
strokeWidth={5}
73-
fill="blue"
74-
/>
75-
);
76-
};
77-
78-
const ArcExample = () => {
79-
const padding = 50;
80-
81-
const {current: x} = useRef(new Animated.Value(width * 0.5));
82-
const {current: y} = useRef(new Animated.Value(width * 0.5));
83-
84-
const {current: size} = useRef(new Animated.Value(width - (2 * padding)));
85-
86-
const {current: start} = useRef(new Animated.Value(0));
87-
const {current: stop} = useRef(new Animated.Value(0.01));
88-
89-
useEffect(() => Animated.timing(stop, {
90-
toValue: Math.PI * 2,
91-
duration: 500,
92-
useNativeDriver: true,
93-
}).start() && undefined, []);
94-
95-
return (
96-
<Rough.Arc
97-
seed={10}
98-
x={x}
99-
y={y}
100-
closed
101-
width={size}
102-
height={size}
103-
start={start}
104-
stop={stop}
105-
fillStyle="zigzag"
106-
strokeWidth={4}
107-
stroke="orange"
108-
fill="rgba(255,0,255,0.4)"
109-
/>
110-
);
111-
};
112-
113-
const LinearPathExample = () => {
114-
const [points] = useState(
115-
[...Array(10)]
116-
.map(
117-
(_, i, orig) => new Animated.ValueXY({x: (i == 0) ? 0 : (i + 1) * (width / orig.length), y: width * 0.5}),
118-
),
119-
);
120-
121-
useEffect(
122-
() => {
123-
Animated.parallel(
124-
points
125-
.map(
126-
point => Animated
127-
.spring(
128-
point,
129-
{
130-
toValue: {
131-
x: point.x.__getValue(),
132-
y: width * Math.random(),
133-
},
134-
useNativeDriver: true,
135-
},
136-
),
137-
),
138-
).start();
139-
},
140-
[],
141-
);
142-
143-
return (
144-
<Rough.LinearPath
145-
points={points}
146-
strokeWidth={5}
147-
stroke="pink"
148-
/>
149-
);
150-
};
151-
152-
const LineExample = () => {
153-
154-
const padding = 50;
155-
156-
const {current: x} = useRef(new Animated.Value(padding));
157-
const {current: y} = useRef(new Animated.Value(padding));
158-
const {current: size} = useRef(new Animated.Value(30));
159-
160-
useEffect(() => Animated.timing(size, {
161-
toValue: width - padding,
162-
duration: 400,
163-
useNativeDriver: true,
164-
}).start() && undefined, []);
165-
166-
return (
167-
<Rough.Line
168-
x1={x}
169-
y1={y}
170-
x2={size}
171-
y2={size}
172-
stroke="purple"
173-
strokeWidth={30}
174-
/>
175-
);
176-
};
48+
const RectangleExample = () => (
49+
<Rough.Rectangle
50+
x={20}
51+
y={20}
52+
width={width - 40}
53+
height={width - 40}
54+
hachureAngle={60}
55+
hachureGap={15}
56+
fillWeight={3}
57+
stroke="red"
58+
strokeWidth={5}
59+
fill="blue"
60+
/>
61+
);
62+
63+
const ArcExample = () => (
64+
<Rough.Arc
65+
seed={10}
66+
x={width * 0.5}
67+
y={width * 0.5}
68+
closed
69+
width={width - 2 * 50}
70+
height={width - 2 * 50}
71+
start={0}
72+
stop={2 * Math.PI}
73+
fillStyle="zigzag"
74+
strokeWidth={4}
75+
stroke="orange"
76+
fill="rgba(255,0,255,0.4)"
77+
/>
78+
);
79+
80+
const EllipseExample = () => (
81+
<Rough.Ellipse
82+
x={width * 0.5}
83+
y={width * 0.5}
84+
width={width - 40}
85+
height={width * 0.5}
86+
hachureAngle={60}
87+
hachureGap={15}
88+
fillWeight={3}
89+
stroke="red"
90+
strokeWidth={5}
91+
fill="blue"
92+
/>
93+
);
94+
95+
const CircleExample = () => (
96+
<Rough.Circle
97+
x={width * 0.5}
98+
y={width * 0.5}
99+
diameter={width - 40}
100+
hachureAngle={60}
101+
hachureGap={15}
102+
fillWeight={3}
103+
stroke="red"
104+
strokeWidth={5}
105+
fill="blue"
106+
/>
107+
);
108+
109+
const LineExample = () => (
110+
<Rough.Line
111+
x1={20}
112+
y1={20}
113+
x2={width - 40}
114+
y2={width - 40}
115+
stroke="purple"
116+
strokeWidth={20}
117+
/>
118+
);
119+
120+
const LinearPathExample = () => (
121+
<Rough.LinearPath
122+
points={[
123+
[0, 20],
124+
[50, 20],
125+
[width, width],
126+
]}
127+
strokeWidth={5}
128+
stroke="pink"
129+
/>
130+
);
177131

178132
const CurveExample = () => {
179-
// draw sine curve
180133
let points = [];
181134
for (let i = 0; i < 20; i++) {
182-
// 4pi - 400px
183135
let x = (width / 20) * i + 10;
184136
let xdeg = (Math.PI / 100) * x;
185-
let y = Math.round(Math.sin(xdeg) * width * 0.4);// + width * 0.5;
186-
points.push(
187-
new Animated.ValueXY({x, y}),
188-
);
137+
let y = Math.round(Math.sin(xdeg) * width * 0.5 * 0.8) + width * 0.5;
138+
points.push([x, y]);
189139
}
190-
191-
useEffect(
192-
() => {
193-
Animated.parallel(
194-
points
195-
.map(
196-
point => Animated
197-
.spring(
198-
point,
199-
{
200-
toValue: {
201-
x: point.x.__getValue(),
202-
y: point.y.__getValue() + (width * 0.5),
203-
},
204-
useNativeDriver: true,
205-
},
206-
),
207-
),
208-
).start();
209-
},
210-
[],
211-
);
212-
213140
return (
214141
<Rough.Curve
215142
points={points}
216143
strokeWidth={5}
217-
stroke="navy"
144+
stroke="pink"
218145
/>
219146
);
220147
};
221148

149+
const PolygonExample = () => (
150+
<Rough.Polygon
151+
points={[
152+
[0, 20],
153+
[50, 20],
154+
[width, width],
155+
]}
156+
strokeWidth={5}
157+
stroke="pink"
158+
fillStyle="solid"
159+
fill="red"
160+
fillStyle="dots"
161+
/>
162+
);
163+
222164
export default () => {
223165
const [index, setIndex] = useState(0);
224166
const [rows] = useState([
225-
["Rectangle", "Sketches a rough rectangle.", RectangleExample],
167+
["Arc", "Renders an hand-drawn style arc. You know, like a pie chart?", ArcExample],
168+
["Circle", "Draws a rough circle.", CircleExample],
169+
["Curve", "Like a LinearPath, but the points are smoothly interpolated between.", CurveExample],
170+
["Ellipse", "Renders an ellipse. This is like a Circle, but you can have different width and height.", EllipseExample],
226171
["Line", "Draws a cool, hand-drawn looking line between two points.", LineExample],
227-
["Arc", "Renders an arc. You know, like a pie chart?", ArcExample],
228172
["LinearPath", "Draw a line between array of points.", LinearPathExample],
229-
["Curve", "Like a LinearPath, but the points are smoothly interpolated between.", CurveExample],
173+
["Polygon", "Like a LinearPath, but the points are smoothly interpolated between using Bezier curves.", PolygonExample],
174+
["Rectangle", "Sketches a rough rectangle.", RectangleExample],
230175
]);
231176
const Example = rows[index][2];
232177
return (
@@ -280,7 +225,6 @@ export default () => {
280225
children={`<Rough.${rowTitle} />`}
281226
/>
282227
{(i === index) && (
283-
284228
<View
285229
style={{
286230
paddingHorizontal: 10,

‎public/repository-open-graph-template.png‎

50.3 KB
Loading

0 commit comments

Comments
 (0)