Skip to content

Commit 60e52b4

Browse files
thozhAurelGit
authored andcommitted
Update Helpers.js : enable space between in scrollview component (#69)
* enable space between in scrollview component * update helpers scrollspace around and space between, update metrics
1 parent 0f82c25 commit 60e52b4

File tree

2 files changed

+156
-74
lines changed

2 files changed

+156
-74
lines changed

App/Theme/Helpers.js

Lines changed: 92 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,162 @@
11
import { StyleSheet } from 'react-native'
2+
import { Colors } from 'App/Theme'
23

34
export default StyleSheet.create({
4-
fill: {
5-
flex: 1,
5+
backgroundReset: {
6+
backgroundColor: Colors.transparent,
67
},
78
center: {
89
alignItems: 'center',
910
justifyContent: 'center',
1011
},
11-
fillCenter: {
12-
flex: 1,
12+
colCenter: {
1313
alignItems: 'center',
14+
flexDirection: 'column',
1415
justifyContent: 'center',
1516
},
16-
row: {
17-
flexDirection: 'row',
17+
colCross: {
18+
alignItems: 'center',
19+
flexDirection: 'column',
1820
},
19-
rowReverse: {
20-
flexDirection: 'row-reverse',
21+
colMain: {
22+
flexDirection: 'column',
23+
justifyContent: 'center',
2124
},
2225
column: {
2326
flexDirection: 'column',
2427
},
2528
columnReverse: {
2629
flexDirection: 'column-reverse',
2730
},
28-
mainStart: {
29-
justifyContent: 'flex-start',
30-
},
31-
mainCenter: {
32-
justifyContent: 'center',
33-
},
34-
mainEnd: {
35-
justifyContent: 'flex-end',
36-
},
37-
mainSpaceBetween: {
38-
justifyContent: 'space-between',
39-
},
40-
mainSpaceAround: {
41-
justifyContent: 'space-around',
42-
},
43-
crossStart: {
44-
alignItems: 'flex-start',
45-
},
4631
crossCenter: {
4732
alignItems: 'center',
4833
},
4934
crossEnd: {
5035
alignItems: 'flex-end',
5136
},
37+
crossStart: {
38+
alignItems: 'flex-start',
39+
},
5240
crossStretch: {
5341
alignItems: 'stretch',
5442
},
55-
selfStretch: {
56-
alignSelf: 'stretch',
43+
fill: {
44+
flex: 1,
5745
},
58-
rowMain: {
59-
flexDirection: 'row',
46+
fillCenter: {
47+
alignItems: 'center',
48+
flex: 1,
6049
justifyContent: 'center',
6150
},
62-
rowCross: {
63-
flexDirection: 'row',
64-
alignItems: 'center',
51+
fillCol: {
52+
flex: 1,
53+
flexDirection: 'column',
6554
},
66-
rowCenter: {
67-
flexDirection: 'row',
55+
fillColCenter: {
6856
alignItems: 'center',
69-
justifyContent: 'center',
70-
},
71-
colMain: {
57+
flex: 1,
7258
flexDirection: 'column',
7359
justifyContent: 'center',
7460
},
75-
colCross: {
76-
flexDirection: 'column',
61+
fillColCross: {
7762
alignItems: 'center',
63+
flex: 1,
64+
flexDirection: 'column',
7865
},
79-
colCenter: {
66+
fillColMain: {
67+
flex: 1,
8068
flexDirection: 'column',
81-
alignItems: 'center',
8269
justifyContent: 'center',
8370
},
84-
fillRow: {
71+
fillColReverse: {
8572
flex: 1,
86-
flexDirection: 'row',
73+
flexDirection: 'column-reverse',
8774
},
88-
fillRowReverse: {
75+
fillRow: {
8976
flex: 1,
90-
flexDirection: 'row-reverse',
77+
flexDirection: 'row',
9178
},
92-
fillRowMain: {
79+
fillRowCenter: {
80+
alignItems: 'center',
9381
flex: 1,
9482
flexDirection: 'row',
9583
justifyContent: 'center',
9684
},
9785
fillRowCross: {
86+
alignItems: 'center',
9887
flex: 1,
9988
flexDirection: 'row',
100-
alignItems: 'center',
10189
},
102-
fillRowCenter: {
90+
fillRowMain: {
10391
flex: 1,
10492
flexDirection: 'row',
105-
alignItems: 'center',
10693
justifyContent: 'center',
10794
},
108-
fillCol: {
95+
fillRowReverse: {
10996
flex: 1,
110-
flexDirection: 'column',
97+
flexDirection: 'row-reverse',
11198
},
112-
fillColReverse: {
113-
flex: 1,
114-
flexDirection: 'column-reverse',
99+
fullSize: {
100+
height: '100%',
101+
width: '100%',
115102
},
116-
fillColMain: {
117-
flex: 1,
118-
flexDirection: 'column',
103+
fullWidth: {
104+
width: '100%',
105+
},
106+
mainCenter: {
119107
justifyContent: 'center',
120108
},
121-
fillColCross: {
122-
flex: 1,
123-
flexDirection: 'column',
109+
mainEnd: {
110+
justifyContent: 'flex-end',
111+
},
112+
mainSpaceAround: {
113+
justifyContent: 'space-around',
114+
},
115+
mainSpaceBetween: {
116+
justifyContent: 'space-between',
117+
},
118+
mainStart: {
119+
justifyContent: 'flex-start',
120+
},
121+
mirror: {
122+
transform: [{ scaleX: -1 }],
123+
},
124+
rotate90: {
125+
transform: [{ rotate: '90deg' }],
126+
},
127+
rotate90Inverse: {
128+
transform: [{ rotate: '-90deg' }],
129+
},
130+
row: {
131+
flexDirection: 'row',
132+
},
133+
rowCenter: {
124134
alignItems: 'center',
135+
flexDirection: 'row',
136+
justifyContent: 'center',
125137
},
126-
fillColCenter: {
127-
flex: 1,
128-
flexDirection: 'column',
138+
rowCross: {
129139
alignItems: 'center',
140+
flexDirection: 'row',
141+
},
142+
rowMain: {
143+
flexDirection: 'row',
130144
justifyContent: 'center',
131145
},
146+
rowReverse: {
147+
flexDirection: 'row-reverse',
148+
},
149+
scrollSpaceAround: {
150+
flexGrow: 1,
151+
justifyContent: 'space-around',
152+
},
153+
scrollSpaceBetween: {
154+
flexGrow: 1,
155+
justifyContent: 'space-between',
156+
},
157+
selfStretch: {
158+
alignSelf: 'stretch',
159+
},
132160
textCenter: {
133161
textAlign: 'center',
134162
},
@@ -141,10 +169,4 @@ export default StyleSheet.create({
141169
textRight: {
142170
textAlign: 'right',
143171
},
144-
backgroundReset: {
145-
backgroundColor: 'transparent',
146-
},
147-
fullWidth: {
148-
width: '100%',
149-
},
150172
})

App/Theme/Metrics.js

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,69 @@
22
* This file contains metric values that are global to the application.
33
*/
44

5+
// Examples of metrics you can define:
6+
export const tiny = 5
7+
export const small = tiny * 2 // 10
8+
export const normal = tiny * 3 // 15
9+
export const medium = normal * 2 // 30
10+
511
export default {
6-
// Examples of metrics you can define:
7-
// baseMargin: 10,
8-
// largeMargin: 20,
9-
// smallMargin: 5,
12+
bottomMargin: {
13+
marginBottom: normal,
14+
},
15+
mediumBottomMargin: {
16+
marginBottom: medium,
17+
},
18+
19+
tinyVerticalMargin: {
20+
marginVertical: tiny,
21+
},
22+
smallVerticalMargin: {
23+
marginVertical: small,
24+
},
25+
verticalMargin: {
26+
marginVertical: normal,
27+
},
28+
mediumVerticalMargin: {
29+
marginVertical: medium,
30+
},
31+
32+
tinyHorizontalMargin: {
33+
marginHorizontal: tiny,
34+
},
35+
smallHorizontalMargin: {
36+
marginHorizontal: small,
37+
},
38+
horizontalMargin: {
39+
marginHorizontal: normal,
40+
},
41+
mediumHorizontalMargin: {
42+
marginHorizontal: medium,
43+
},
44+
45+
tinyHorizontalPadding: {
46+
paddingHorizontal: tiny,
47+
},
48+
smallHorizontalPadding: {
49+
paddingHorizontal: small,
50+
},
51+
horizontalPadding: {
52+
paddingHorizontal: normal,
53+
},
54+
mediumHorizontalPadding: {
55+
paddingHorizontal: medium,
56+
},
57+
58+
tinyVerticalPadding: {
59+
paddingVertical: tiny,
60+
},
61+
smallVerticalPadding: {
62+
paddingVertical: small,
63+
},
64+
verticalPadding: {
65+
paddingVertical: normal,
66+
},
67+
mediumVerticalPadding: {
68+
paddingVertical: medium,
69+
},
1070
}

0 commit comments

Comments
 (0)