Skip to content

Commit c506a3f

Browse files
author
Andrzej Antoni Kwaśniewski
committed
common styles
1 parent 0ef53e1 commit c506a3f

18 files changed

Lines changed: 112 additions & 286 deletions

File tree

‎apps/common-app/src/common.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,48 @@ export interface ExamplesSection {
3232
data: Example[];
3333
}
3434

35+
/* eslint-disable react-native/no-unused-styles */
36+
export const commonStyles = StyleSheet.create({
37+
centerView: {
38+
flex: 1,
39+
justifyContent: 'center',
40+
alignItems: 'center',
41+
},
42+
box: {
43+
height: 150,
44+
width: 150,
45+
borderRadius: 20,
46+
marginBottom: 30,
47+
},
48+
ball: {
49+
height: 120,
50+
width: 120,
51+
borderRadius: 60,
52+
marginBottom: 100,
53+
// @ts-expect-error `grab` is correct value for `cursor` property
54+
cursor: 'grab',
55+
},
56+
instructions: {
57+
marginTop: 8,
58+
textAlign: 'center',
59+
paddingHorizontal: 16,
60+
},
61+
subcontainer: {
62+
flex: 1,
63+
width: '100%',
64+
gap: 8,
65+
alignItems: 'center',
66+
justifyContent: 'center',
67+
borderBottomWidth: 1,
68+
},
69+
header: {
70+
fontSize: 24,
71+
marginVertical: 10,
72+
justifyContent: 'center',
73+
},
74+
});
75+
/* eslint-enable react-native/no-unused-styles */
76+
3577
const styles = StyleSheet.create({
3678
lipsum: {
3779
padding: 10,

‎apps/common-app/src/new_api/complicated/lock/index.tsx‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
useRotationGesture,
1414
useSimultaneousGestures,
1515
} from 'react-native-gesture-handler';
16-
import { COLORS } from '../../../common';
16+
import { COLORS, commonStyles } from '../../../common';
1717

1818
export default function Lock() {
1919
const rotation = useSharedValue(-Math.PI / 2);
@@ -96,7 +96,7 @@ export default function Lock() {
9696
}));
9797

9898
return (
99-
<View style={styles.container}>
99+
<View style={commonStyles.centerView}>
100100
<View style={styles.outerBox}>
101101
<GestureDetector gesture={unlockingGesture}>
102102
<Animated.View style={[styles.box, animatedStyle]}>
@@ -106,8 +106,8 @@ export default function Lock() {
106106
</Animated.View>
107107
</GestureDetector>
108108
</View>
109-
<Text>{locked ? 'Locked' : 'Unlocked!'}</Text>
110-
<Text style={styles.instructions}>
109+
<Text style={commonStyles.header}>{locked ? 'Locked' : 'Unlocked!'}</Text>
110+
<Text style={commonStyles.instructions}>
111111
Tou unlock rotate 90 degrees clockwise, and scale to fill the square.
112112
Then longPress to confirm unlocking.
113113
</Text>
@@ -116,23 +116,11 @@ export default function Lock() {
116116
}
117117

118118
const styles = StyleSheet.create({
119-
container: {
120-
flex: 1,
121-
alignItems: 'center',
122-
justifyContent: 'center',
123-
},
124119
lockIcon: {
125120
fontSize: 40,
126121
color: '#fff',
127122
fontWeight: 'bold',
128123
},
129-
instructions: {
130-
color: COLORS.GRAY,
131-
marginTop: 8,
132-
textAlign: 'center',
133-
paddingHorizontal: 16,
134-
},
135-
136124
outerBox: {
137125
height: 200,
138126
width: 200,

‎apps/common-app/src/new_api/complicated/velocity_test/index.tsx‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { StyleSheet, View } from 'react-native';
1+
import { View } from 'react-native';
22
import Animated, {
33
interpolateColor,
44
measure,
@@ -11,7 +11,7 @@ import Animated, {
1111

1212
import React from 'react';
1313
import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
14-
import { COLORS } from '../../../common';
14+
import { COLORS, commonStyles } from '../../../common';
1515

1616
const BOX_SIZE = 120;
1717

@@ -77,26 +77,10 @@ export default function App() {
7777
});
7878

7979
return (
80-
<View style={styles.container} ref={aref} collapsable={false}>
80+
<View style={commonStyles.centerView} ref={aref} collapsable={false}>
8181
<GestureDetector gesture={pan}>
82-
<Animated.View style={[styles.box, animatedStyles]} />
82+
<Animated.View style={[commonStyles.ball, animatedStyles]} />
8383
</GestureDetector>
8484
</View>
8585
);
8686
}
87-
88-
const styles = StyleSheet.create({
89-
container: {
90-
flex: 1,
91-
alignItems: 'center',
92-
justifyContent: 'center',
93-
height: '100%',
94-
},
95-
box: {
96-
width: BOX_SIZE,
97-
height: BOX_SIZE,
98-
borderRadius: BOX_SIZE / 2,
99-
// @ts-expect-error `grab` is correct value for `cursor` property
100-
cursor: 'grab',
101-
},
102-
});

‎apps/common-app/src/new_api/hover_mouse/hover/index.tsx‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { COLORS, Feedback } from '../../../common';
1+
import { COLORS, commonStyles, Feedback } from '../../../common';
22
import React, { RefObject, useRef } from 'react';
33
import { View, Text, StyleSheet } from 'react-native';
44
import {
@@ -54,9 +54,9 @@ export default function Example() {
5454
const [hover5, style5] = useColoredHover('blue', feedbackRefLower);
5555

5656
return (
57-
<View style={styles.container}>
58-
<View style={styles.subcontainer}>
59-
<Text style={styles.title}>Parent & child</Text>
57+
<View style={commonStyles.centerView}>
58+
<View style={commonStyles.subcontainer}>
59+
<Text style={commonStyles.header}>Parent & child</Text>
6060
<GestureDetector gesture={hover1}>
6161
<Animated.View style={[styles.parentBox, style1]}>
6262
<GestureDetector gesture={hover2}>
@@ -68,8 +68,8 @@ export default function Example() {
6868
<View style={styles.spacer} />
6969
</View>
7070

71-
<View style={styles.subcontainer}>
72-
<Text style={styles.title}>Absolute positioning</Text>
71+
<View style={commonStyles.subcontainer}>
72+
<Text style={commonStyles.header}>Absolute positioning</Text>
7373
<View style={styles.absoluteContainer}>
7474
<GestureDetector gesture={hover3}>
7575
<Animated.View style={[styles.absoluteRed, style3]} />
@@ -90,21 +90,6 @@ export default function Example() {
9090
}
9191

9292
const styles = StyleSheet.create({
93-
container: {
94-
flex: 1,
95-
padding: 16,
96-
},
97-
subcontainer: {
98-
flex: 1,
99-
gap: 8,
100-
alignItems: 'center',
101-
justifyContent: 'center',
102-
borderBottomWidth: 1,
103-
},
104-
title: {
105-
fontSize: 22,
106-
marginVertical: 8,
107-
},
10893
spacer: {
10994
height: 50,
11095
},

‎apps/common-app/src/new_api/hover_mouse/hoverable_icons/index.tsx‎

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

1516
// eslint-disable-next-line import-x/no-commonjs, @typescript-eslint/no-var-requires
1617
const SVG = require('../../../common_assets/hoverable_icons/svg.png');
@@ -97,7 +98,7 @@ export default function Example() {
9798
const BoxComponent = Platform.OS === 'ios' ? BoxNative : BoxReanimated;
9899

99100
return (
100-
<Animated.View style={styles.container}>
101+
<Animated.View style={commonStyles.centerView}>
101102
<Animated.View style={styles.wrapper}>
102103
{images.map((source, index) => (
103104
<BoxComponent key={index} source={source} />
@@ -108,11 +109,6 @@ export default function Example() {
108109
}
109110

110111
const styles = StyleSheet.create({
111-
container: {
112-
flex: 1,
113-
justifyContent: 'center',
114-
alignItems: 'center',
115-
},
116112
image: {
117113
overflow: 'visible',
118114
width: SIZE,

‎apps/common-app/src/new_api/showcase/animated/index.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { COLORS } from '../../../common';
1+
import { COLORS, commonStyles } from '../../../common';
22
import React, { useRef } from 'react';
33
import { View, Text, StyleSheet, Animated, Dimensions } from 'react-native';
44
import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
@@ -118,7 +118,7 @@ export default function MinimalCard() {
118118
});
119119

120120
return (
121-
<View style={styles.container}>
121+
<View style={commonStyles.centerView}>
122122
<GestureDetector gesture={panGesture}>
123123
<Animated.View
124124
style={[
@@ -141,11 +141,6 @@ export default function MinimalCard() {
141141
}
142142

143143
const styles = StyleSheet.create({
144-
container: {
145-
flex: 1,
146-
alignItems: 'center',
147-
justifyContent: 'center',
148-
},
149144
card: {
150145
width: 280,
151146
height: 380,

‎apps/common-app/src/new_api/showcase/bottom_sheet/index.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import Animated, {
2020
useSharedValue,
2121
withSpring,
2222
} from 'react-native-reanimated';
23-
import { COLORS, LoremIpsum } from '../../../common';
23+
import { COLORS, commonStyles, LoremIpsum } from '../../../common';
2424

2525
const HEADER_HEIGTH = 50;
2626
const windowHeight = Dimensions.get('window').height;
@@ -113,7 +113,7 @@ function Example() {
113113
);
114114

115115
return (
116-
<View style={styles.container}>
116+
<View style={commonStyles.centerView}>
117117
<LoremIpsum words={200} />
118118
<GestureDetector gesture={blockScrollUntilAtTheTop}>
119119
<Animated.View style={[styles.bottomSheet, bottomSheetAnimatedStyle]}>
@@ -141,9 +141,6 @@ function Example() {
141141
}
142142

143143
const styles = StyleSheet.create({
144-
container: {
145-
flex: 1,
146-
},
147144
header: {
148145
height: HEADER_HEIGTH,
149146
backgroundColor: COLORS.NAVY,

‎apps/common-app/src/new_api/showcase/nested_text/nested_text.tsx‎

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { StyleSheet, Text, View } from 'react-native';
2+
import { Text, View } from 'react-native';
33
import {
44
Gesture,
55
GestureDetector,
@@ -8,7 +8,7 @@ import {
88
useTapGesture,
99
} from 'react-native-gesture-handler';
1010

11-
import { COLORS, Feedback } from '../../../common';
11+
import { COLORS, commonStyles, Feedback } from '../../../common';
1212

1313
function NativeDetectorExample() {
1414
const feedbackRef = React.useRef<{ showMessage: (msg: string) => void }>(
@@ -37,8 +37,8 @@ function NativeDetectorExample() {
3737
});
3838

3939
return (
40-
<View style={styles.subcontainer}>
41-
<Text style={styles.header}>
40+
<View style={commonStyles.subcontainer}>
41+
<Text style={commonStyles.header}>
4242
Native Detector example - this one should work
4343
</Text>
4444
<InterceptingGestureDetector gesture={tapAll}>
@@ -80,8 +80,8 @@ function LegacyDetectorExample() {
8080
});
8181

8282
return (
83-
<View style={styles.subcontainer}>
84-
<Text style={styles.header}>
83+
<View style={commonStyles.subcontainer}>
84+
<Text style={commonStyles.header}>
8585
Legacy Detector example - this one should only work on web
8686
</Text>
8787
<GestureDetector gesture={tapAll}>
@@ -107,27 +107,9 @@ function LegacyDetectorExample() {
107107

108108
export default function NativeTextExample() {
109109
return (
110-
<View style={styles.container}>
110+
<View style={commonStyles.centerView}>
111111
<NativeDetectorExample />
112112
<LegacyDetectorExample />
113113
</View>
114114
);
115115
}
116-
117-
const styles = StyleSheet.create({
118-
container: {
119-
flex: 1,
120-
},
121-
subcontainer: {
122-
flex: 1,
123-
gap: 8,
124-
alignItems: 'center',
125-
justifyContent: 'center',
126-
borderBottomWidth: 1,
127-
},
128-
header: {
129-
fontSize: 18,
130-
textAlign: 'center',
131-
paddingHorizontal: 24,
132-
},
133-
});

0 commit comments

Comments
 (0)