Skip to content

Commit 15c1156

Browse files
j-piaseckim-bertlatekvo
authored
Update examples (#2919)
## Description - moves `New Api` section to the top - unifies white-ish backgrounds across examples - unifies `Velocity Test` with `Simple Reanimated example` - unifies `Overlap Parent` and `OverlapSiblings` - updates `Transformations` - updates `Camera` since the camera was missing there - updates `Pan Responder` to not use `setNativeProps` which was removed on RN web ## Test plan Check the updated examples --------- Co-authored-by: Michał Bert <63123542+m-bert@users.noreply.github.com> Co-authored-by: Ignacy Łątka <latkaignacy@gmail.com>
1 parent 28ba683 commit 15c1156

File tree

21 files changed

+644
-562
lines changed

21 files changed

+644
-562
lines changed

‎example/App.tsx

Lines changed: 36 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,9 @@ import Fling from './src/basic/fling';
5555
import WebStylesResetExample from './src/release_tests/webStylesReset';
5656
import StylusData from './src/release_tests/StylusData';
5757

58-
import ReanimatedSimple from './src/new_api/reanimated';
5958
import Camera from './src/new_api/camera';
6059
import Transformations from './src/new_api/transformations';
61-
import OverlapParents from './src/new_api/overlap_parent';
62-
import OverlapSiblings from './src/new_api/overlap_siblings';
60+
import Overlap from './src/new_api/overlap';
6361
import Calculator from './src/new_api/calculator';
6462
import BottomSheetNewApi from './src/new_api/bottom_sheet';
6563
import ChatHeadsNewApi from './src/new_api/chat_heads';
@@ -75,6 +73,7 @@ import Pressable from 'src/new_api/pressable';
7573
import EmptyExample from './src/empty/EmptyExample';
7674
import RectButtonBorders from './src/release_tests/rectButton';
7775
import { ListWithHeader } from './src/ListWithHeader';
76+
import { COLORS } from './src/common';
7877

7978
import { Icon } from '@swmansion/icons';
8079

@@ -92,6 +91,32 @@ const EXAMPLES: ExamplesSection[] = [
9291
sectionTitle: 'Empty',
9392
data: [{ name: 'Empty Example', component: EmptyExample }],
9493
},
94+
{
95+
sectionTitle: 'New api',
96+
data: [
97+
{ name: 'Ball with velocity', component: VelocityTest },
98+
{ name: 'Camera', component: Camera },
99+
{ name: 'Transformations', component: Transformations },
100+
{ name: 'Overlap', component: Overlap },
101+
{ name: 'Bottom Sheet', component: BottomSheetNewApi },
102+
{ name: 'Calculator', component: Calculator },
103+
{ name: 'Chat Heads', component: ChatHeadsNewApi },
104+
{ name: 'Drag and drop', component: DragNDrop },
105+
{ name: 'New Swipeable', component: Swipeable },
106+
{ name: 'New Pressable', component: Pressable },
107+
{ name: 'Hover', component: Hover },
108+
{ name: 'Hoverable icons', component: HoverableIcons },
109+
{
110+
name: 'Horizontal Drawer (Reanimated 2 & RNGH 2)',
111+
component: BetterHorizontalDrawer,
112+
},
113+
{
114+
name: 'Manual gestures',
115+
component: ManualGestures,
116+
},
117+
{ name: 'Pressable', component: Pressable },
118+
],
119+
},
95120
{
96121
sectionTitle: 'Basic examples',
97122
data: [
@@ -159,36 +184,6 @@ const EXAMPLES: ExamplesSection[] = [
159184
{ name: 'Stylus data', component: StylusData },
160185
],
161186
},
162-
{
163-
sectionTitle: 'New api',
164-
data: [
165-
{
166-
name: 'Simple interaction with Reanimated',
167-
component: ReanimatedSimple,
168-
},
169-
{ name: 'Hover', component: Hover },
170-
{ name: 'Hoverable icons', component: HoverableIcons },
171-
{ name: 'Camera', component: Camera },
172-
{ name: 'Velocity test', component: VelocityTest },
173-
{ name: 'Transformations', component: Transformations },
174-
{ name: 'Overlap parents', component: OverlapParents },
175-
{ name: 'Overlap siblings', component: OverlapSiblings },
176-
{ name: 'Calculator', component: Calculator },
177-
{ name: 'Bottom Sheet', component: BottomSheetNewApi },
178-
{ name: 'Chat Heads', component: ChatHeadsNewApi },
179-
{ name: 'Drag and drop', component: DragNDrop },
180-
{ name: 'Swipeable', component: Swipeable },
181-
{ name: 'Pressable', component: Pressable },
182-
{
183-
name: 'Horizontal Drawer (Reanimated 2 & RNGH 2)',
184-
component: BetterHorizontalDrawer,
185-
},
186-
{
187-
name: 'Manual gestures',
188-
component: ManualGestures,
189-
},
190-
],
191-
},
192187
];
193188

194189
const OPEN_LAST_EXAMPLE_KEY = 'openLastExample';
@@ -213,9 +208,12 @@ export default function App() {
213208
cardStyle: {
214209
// It's important to set height for the screen, without it scroll doesn't work on web platform.
215210
height: Dimensions.get('window').height,
211+
backgroundColor: COLORS.offWhite,
216212
},
217213
headerStyle: {
218-
backgroundColor: '#f8f9ff',
214+
backgroundColor: COLORS.offWhite,
215+
borderBottomColor: COLORS.headerSeparator,
216+
borderBottomWidth: 1,
219217
},
220218
}}>
221219
<Stack.Screen
@@ -335,7 +333,7 @@ function MainScreenItem({ name, onPressItem }: MainScreenItemProps) {
335333
const styles = StyleSheet.create({
336334
container: {
337335
flex: 1,
338-
backgroundColor: '#f8f9ff',
336+
backgroundColor: COLORS.offWhite,
339337
},
340338
sectionTitle: {
341339
...Platform.select({
@@ -349,7 +347,7 @@ const styles = StyleSheet.create({
349347
},
350348
}),
351349
padding: 16,
352-
backgroundColor: '#f8f9ff',
350+
backgroundColor: COLORS.offWhite,
353351
},
354352
list: {},
355353
separator: {
@@ -358,7 +356,8 @@ const styles = StyleSheet.create({
358356
button: {
359357
flex: 1,
360358
height: 50,
361-
padding: 10,
359+
paddingVertical: 10,
360+
paddingHorizontal: 20,
362361
flexDirection: 'row',
363362
backgroundColor: '#fff',
364363
alignItems: 'center',

‎example/app.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,12 @@
2828
"favicon": "./assets/favicon.png"
2929
},
3030
"plugins": [
31+
[
32+
"expo-camera",
33+
{
34+
"cameraPermission": "Allow RNGH example to access your camera"
35+
}
36+
],
3137
[
3238
"expo-font",
3339
{

‎example/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@react-navigation/stack": "^6.3.29",
2626
"@swmansion/icons": "^0.0.1",
2727
"expo": "^51.0.0",
28+
"expo-camera": "~15.0.9",
2829
"expo-font": "~12.0.10",
2930
"hoist-non-react-statics": "^3.3.2",
3031
"invariant": "^2.2.4",
@@ -37,6 +38,7 @@
3738
"react-native-reanimated": "3.10.0",
3839
"react-native-safe-area-context": "4.10.1",
3940
"react-native-screens": "3.31.1",
41+
"react-native-svg": "15.2.0",
4042
"react-native-web": "~0.19.10"
4143
},
4244
"devDependencies": {

‎example/src/ListWithHeader/Header.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Animated, {
1111
useSharedValue,
1212
withTiming,
1313
} from 'react-native-reanimated';
14+
import { COLORS } from '../common';
1415

1516
const SIGNET = require('./signet.png');
1617
const TEXT = require('./text.png');
@@ -153,14 +154,14 @@ const styles = StyleSheet.create({
153154
nativeHeader: {
154155
width: '100%',
155156
position: 'absolute',
156-
backgroundColor: '#f8f9ff',
157+
backgroundColor: COLORS.offWhite,
157158
zIndex: 100,
158159
flexDirection: 'row',
159160
},
160161
webHeader: {
161162
width: '100%',
162163
position: 'absolute',
163-
backgroundColor: '#f8f9ff',
164+
backgroundColor: COLORS.offWhite,
164165
zIndex: 100,
165166
flexDirection: 'row',
166167
alignItems: 'center',

‎example/src/basic/bouncing/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,6 @@ const styles = StyleSheet.create({
132132
flex: 1,
133133
justifyContent: 'center',
134134
alignItems: 'center',
135-
backgroundColor: '#F5FCFF',
136135
},
137136
box: {
138137
width: BOX_SIZE,

‎example/src/basic/panResponder/index.tsx

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,10 @@ type CircleStyles = {
2323
};
2424

2525
// A clone of: https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js
26-
class PanResponderExample extends Component {
26+
class PanResponderExample extends Component<{}, { style: CircleStyles }> {
2727
private panResponder: { panHandlers?: GestureResponderHandlers } = {};
2828
private previousLeft = 0;
2929
private previousTop = 0;
30-
private circleStyles: { style: CircleStyles } = {
31-
style: { left: 0, top: 0, backgroundColor: '#000' },
32-
};
33-
private circle: React.ElementRef<typeof View> | null = null;
3430

3531
constructor(props: Record<string, unknown>) {
3632
super(props);
@@ -42,45 +38,56 @@ class PanResponderExample extends Component {
4238
onPanResponderRelease: this.handlePanResponderEnd,
4339
onPanResponderTerminate: this.handlePanResponderEnd,
4440
});
41+
4542
this.previousLeft = 20;
4643
this.previousTop = 84;
47-
this.circleStyles = {
44+
45+
this.state = {
4846
style: {
47+
backgroundColor: 'green',
4948
left: this.previousLeft,
5049
top: this.previousTop,
51-
backgroundColor: 'green',
5250
},
5351
};
5452
}
5553

56-
componentDidMount() {
57-
this.updateNativeStyles();
58-
}
59-
6054
render() {
6155
return (
6256
<View
63-
ref={(circle) => {
64-
this.circle = circle;
65-
}}
66-
style={styles.circle}
57+
style={[styles.circle, this.state.style]}
6758
{...this.panResponder.panHandlers}
6859
/>
6960
);
7061
}
7162

7263
private highlight = () => {
73-
this.circleStyles.style.backgroundColor = 'blue';
74-
this.updateNativeStyles();
64+
this.setState({
65+
style: {
66+
backgroundColor: 'blue',
67+
left: this.previousLeft,
68+
top: this.previousTop,
69+
},
70+
});
7571
};
7672

7773
private unHighlight = () => {
78-
this.circleStyles.style.backgroundColor = 'green';
79-
this.updateNativeStyles();
74+
this.setState({
75+
style: {
76+
backgroundColor: 'green',
77+
left: this.previousLeft,
78+
top: this.previousTop,
79+
},
80+
});
8081
};
8182

82-
private updateNativeStyles = () => {
83-
this.circle?.setNativeProps(this.circleStyles);
83+
private setPosition = (x: number, y: number) => {
84+
this.setState({
85+
style: {
86+
backgroundColor: 'blue',
87+
left: x,
88+
top: y,
89+
},
90+
});
8491
};
8592

8693
private handleStartShouldSetPanResponder = (
@@ -110,19 +117,19 @@ class PanResponderExample extends Component {
110117
_e: GestureResponderEvent,
111118
gestureState: PanResponderGestureState
112119
) => {
113-
this.circleStyles.style.left =
114-
this.previousLeft + gestureState.dx * (I18nManager.isRTL ? -1 : 1);
115-
this.circleStyles.style.top = this.previousTop + gestureState.dy;
116-
this.updateNativeStyles();
120+
this.setPosition(
121+
this.previousLeft + gestureState.dx * (I18nManager.isRTL ? -1 : 1),
122+
this.previousTop + gestureState.dy
123+
);
117124
};
118125

119126
private handlePanResponderEnd = (
120127
_e: GestureResponderEvent,
121128
gestureState: PanResponderGestureState
122129
) => {
123-
this.unHighlight();
124130
this.previousLeft += gestureState.dx * (I18nManager.isRTL ? -1 : 1);
125131
this.previousTop += gestureState.dy;
132+
this.unHighlight();
126133
};
127134
}
128135

@@ -146,7 +153,6 @@ export default class Example extends Component {
146153
const styles = StyleSheet.create({
147154
scrollView: {
148155
flex: 1,
149-
backgroundColor: '#F5FCFF',
150156
},
151157
circle: {
152158
width: CIRCLE_SIZE,

‎example/src/common.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@ export class LoremIpsum extends React.Component<Props> {
2525
}
2626
}
2727

28+
export const COLORS = {
29+
offWhite: '#f8f9ff',
30+
headerSeparator: '#eef0ff',
31+
};
32+
2833
const LOREM_IPSUM = `
2934
Curabitur accumsan sit amet massa quis cursus. Fusce sollicitudin nunc nisl, quis efficitur quam tristique eget. Ut non erat molestie, ullamcorper turpis nec, euismod neque. Praesent aliquam risus ultricies, cursus mi consectetur, bibendum lorem. Nunc eleifend consectetur metus quis pulvinar. In vitae lacus eu nibh tincidunt sagittis ut id lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sagittis mauris rhoncus, maximus justo in, consequat dolor. Pellentesque ornare laoreet est vulputate vestibulum. Aliquam sit amet metus lorem.
3035

‎example/src/empty/EmptyExample.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { StyleSheet, Text, View } from 'react-native';
44
export default function EmptyExample() {
55
return (
66
<View style={styles.container}>
7-
<Text>Hello World!</Text>
7+
<Text style={{ fontSize: 64, opacity: 0.25 }}>😞</Text>
8+
<Text style={{ fontSize: 24, opacity: 0.25 }}>It's so empty here</Text>
89
</View>
910
);
1011
}
@@ -14,6 +15,5 @@ const styles = StyleSheet.create({
1415
flex: 1,
1516
justifyContent: 'center',
1617
alignItems: 'center',
17-
backgroundColor: '#F5FCFF',
1818
},
1919
});

‎example/src/new_api/bottom_sheet/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@ function Example() {
142142
const styles = StyleSheet.create({
143143
container: {
144144
flex: 1,
145-
backgroundColor: '#eef',
146145
},
147146
header: {
148147
height: HEADER_HEIGTH,

0 commit comments

Comments
 (0)