Browse Source

Updated native base theme

keplyx 4 years ago
parent
commit
5ba63da3d4
49 changed files with 2101 additions and 1948 deletions
  1. 17
    16
      native-base-theme/components/Badge.js
  2. 2
    4
      native-base-theme/components/Body.js
  3. 165
    175
      native-base-theme/components/Button.js
  4. 7
    7
      native-base-theme/components/Card.js
  5. 69
    67
      native-base-theme/components/CardItem.js
  6. 10
    10
      native-base-theme/components/CheckBox.js
  7. 6
    5
      native-base-theme/components/Container.js
  8. 4
    6
      native-base-theme/components/Content.js
  9. 12
    16
      native-base-theme/components/Fab.js
  10. 35
    34
      native-base-theme/components/Footer.js
  11. 26
    26
      native-base-theme/components/FooterTab.js
  12. 26
    30
      native-base-theme/components/Form.js
  13. 3
    3
      native-base-theme/components/H1.js
  14. 3
    3
      native-base-theme/components/H2.js
  15. 2
    2
      native-base-theme/components/H3.js
  16. 174
    149
      native-base-theme/components/Header.js
  17. 3
    3
      native-base-theme/components/Icon.js
  18. 2
    2
      native-base-theme/components/Input.js
  19. 34
    34
      native-base-theme/components/InputGroup.js
  20. 72
    71
      native-base-theme/components/Item.js
  21. 2
    4
      native-base-theme/components/Label.js
  22. 2
    4
      native-base-theme/components/Left.js
  23. 163
    161
      native-base-theme/components/ListItem.js
  24. 3
    5
      native-base-theme/components/Picker.android.js
  25. 1
    3
      native-base-theme/components/Picker.ios.js
  26. 3
    5
      native-base-theme/components/Picker.js
  27. 19
    16
      native-base-theme/components/Radio.js
  28. 3
    5
      native-base-theme/components/Right.js
  29. 19
    18
      native-base-theme/components/Segment.js
  30. 10
    10
      native-base-theme/components/Separator.js
  31. 1
    3
      native-base-theme/components/Spinner.js
  32. 7
    6
      native-base-theme/components/Subtitle.js
  33. 25
    27
      native-base-theme/components/SwipeRow.js
  34. 2
    4
      native-base-theme/components/Switch.js
  35. 2
    4
      native-base-theme/components/Tab.js
  36. 22
    22
      native-base-theme/components/TabBar.js
  37. 13
    13
      native-base-theme/components/TabContainer.js
  38. 16
    15
      native-base-theme/components/TabHeading.js
  39. 4
    4
      native-base-theme/components/Text.js
  40. 5
    5
      native-base-theme/components/Textarea.js
  41. 9
    11
      native-base-theme/components/Thumbnail.js
  42. 8
    7
      native-base-theme/components/Title.js
  43. 16
    15
      native-base-theme/components/Toast.js
  44. 3
    3
      native-base-theme/components/View.js
  45. 103
    96
      native-base-theme/components/index.js
  46. 149
    121
      native-base-theme/variables/commonColor.js
  47. 121
    100
      native-base-theme/variables/material.js
  48. 349
    299
      native-base-theme/variables/platform.js
  49. 349
    299
      native-base-theme/variables/platformDark.js

+ 17
- 16
native-base-theme/components/Badge.js View File

@@ -1,36 +1,37 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4
+import { PLATFORM } from './../variables/commonColor';
4 5
 
5
-export default (variables /*: * */ = variable) => {
6
+export default (variables /* : * */ = variable) => {
6 7
   const badgeTheme = {
7
-    ".primary": {
8
-      backgroundColor: variables.btnPrimaryBg
8
+    '.primary': {
9
+      backgroundColor: variables.buttonPrimaryBg
9 10
     },
10
-    ".warning": {
11
-      backgroundColor: variables.btnWarningBg
11
+    '.warning': {
12
+      backgroundColor: variables.buttonWarningBg
12 13
     },
13
-    ".info": {
14
-      backgroundColor: variables.btnInfoBg
14
+    '.info': {
15
+      backgroundColor: variables.buttonInfoBg
15 16
     },
16
-    ".success": {
17
-      backgroundColor: variables.btnSuccessBg
17
+    '.success': {
18
+      backgroundColor: variables.buttonSuccessBg
18 19
     },
19
-    ".danger": {
20
-      backgroundColor: variables.btnDangerBg
20
+    '.danger': {
21
+      backgroundColor: variables.buttonDangerBg
21 22
     },
22
-    "NativeBase.Text": {
23
+    'NativeBase.Text': {
23 24
       color: variables.badgeColor,
24 25
       fontSize: variables.fontSizeBase,
25 26
       lineHeight: variables.lineHeight - 1,
26
-      textAlign: "center",
27
+      textAlign: 'center',
27 28
       paddingHorizontal: 3
28 29
     },
29 30
     backgroundColor: variables.badgeBg,
30 31
     padding: variables.badgePadding,
31 32
     paddingHorizontal: 6,
32
-    alignSelf: "flex-start",
33
-    justifyContent: variables.platform === "ios" ? "center" : undefined,
33
+    alignSelf: 'flex-start',
34
+    justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined,
34 35
     borderRadius: 13.5,
35 36
     height: 27
36 37
   };

+ 2
- 4
native-base-theme/components/Body.js View File

@@ -1,12 +1,10 @@
1 1
 // @flow
2 2
 
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const bodyTheme = {
7 5
     flex: 1,
8 6
     alignItems: 'center',
9
-    alignSelf: 'center',
7
+    alignSelf: 'center'
10 8
   };
11 9
 
12 10
   return bodyTheme;

+ 165
- 175
native-base-theme/components/Button.js View File

@@ -1,158 +1,159 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4
+import { PLATFORM } from './../variables/commonColor';
4 5
 
5
-export default (variables /*: * */ = variable) => {
6
+export default (variables /* : * */ = variable) => {
6 7
   const platformStyle = variables.platformStyle;
7 8
   const platform = variables.platform;
8 9
   const darkCommon = {
9
-    "NativeBase.Text": {
10
+    'NativeBase.Text': {
10 11
       color: variables.brandDark
11 12
     },
12
-    "NativeBase.Icon": {
13
+    'NativeBase.Icon': {
13 14
       color: variables.brandDark
14 15
     },
15
-    "NativeBase.IconNB": {
16
+    'NativeBase.IconNB': {
16 17
       color: variables.brandDark
17 18
     }
18 19
   };
19 20
   const lightCommon = {
20
-    "NativeBase.Text": {
21
+    'NativeBase.Text': {
21 22
       color: variables.brandLight
22 23
     },
23
-    "NativeBase.Icon": {
24
+    'NativeBase.Icon': {
24 25
       color: variables.brandLight
25 26
     },
26
-    "NativeBase.IconNB": {
27
+    'NativeBase.IconNB': {
27 28
       color: variables.brandLight
28 29
     }
29 30
   };
30 31
   const primaryCommon = {
31
-    "NativeBase.Text": {
32
-      color: variables.btnPrimaryBg
32
+    'NativeBase.Text': {
33
+      color: variables.buttonPrimaryBg
33 34
     },
34
-    "NativeBase.Icon": {
35
-      color: variables.btnPrimaryBg
35
+    'NativeBase.Icon': {
36
+      color: variables.buttonPrimaryBg
36 37
     },
37
-    "NativeBase.IconNB": {
38
-      color: variables.btnPrimaryBg
38
+    'NativeBase.IconNB': {
39
+      color: variables.buttonPrimaryBg
39 40
     }
40 41
   };
41 42
   const successCommon = {
42
-    "NativeBase.Text": {
43
-      color: variables.btnSuccessBg
43
+    'NativeBase.Text': {
44
+      color: variables.buttonSuccessBg
44 45
     },
45
-    "NativeBase.Icon": {
46
-      color: variables.btnSuccessBg
46
+    'NativeBase.Icon': {
47
+      color: variables.buttonSuccessBg
47 48
     },
48
-    "NativeBase.IconNB": {
49
-      color: variables.btnSuccessBg
49
+    'NativeBase.IconNB': {
50
+      color: variables.buttonSuccessBg
50 51
     }
51 52
   };
52 53
   const infoCommon = {
53
-    "NativeBase.Text": {
54
-      color: variables.btnInfoBg
54
+    'NativeBase.Text': {
55
+      color: variables.buttonInfoBg
55 56
     },
56
-    "NativeBase.Icon": {
57
-      color: variables.btnInfoBg
57
+    'NativeBase.Icon': {
58
+      color: variables.buttonInfoBg
58 59
     },
59
-    "NativeBase.IconNB": {
60
-      color: variables.btnInfoBg
60
+    'NativeBase.IconNB': {
61
+      color: variables.buttonInfoBg
61 62
     }
62 63
   };
63 64
   const warningCommon = {
64
-    "NativeBase.Text": {
65
-      color: variables.btnWarningBg
65
+    'NativeBase.Text': {
66
+      color: variables.buttonWarningBg
66 67
     },
67
-    "NativeBase.Icon": {
68
-      color: variables.btnWarningBg
68
+    'NativeBase.Icon': {
69
+      color: variables.buttonWarningBg
69 70
     },
70
-    "NativeBase.IconNB": {
71
-      color: variables.btnWarningBg
71
+    'NativeBase.IconNB': {
72
+      color: variables.buttonWarningBg
72 73
     }
73 74
   };
74 75
   const dangerCommon = {
75
-    "NativeBase.Text": {
76
-      color: variables.btnDangerBg
76
+    'NativeBase.Text': {
77
+      color: variables.buttonDangerBg
77 78
     },
78
-    "NativeBase.Icon": {
79
-      color: variables.btnDangerBg
79
+    'NativeBase.Icon': {
80
+      color: variables.buttonDangerBg
80 81
     },
81
-    "NativeBase.IconNB": {
82
-      color: variables.btnDangerBg
82
+    'NativeBase.IconNB': {
83
+      color: variables.buttonDangerBg
83 84
     }
84 85
   };
85 86
   const buttonTheme = {
86
-    ".disabled": {
87
-      ".transparent": {
88
-        backgroundColor: null,
89
-        "NativeBase.Text": {
90
-          color: variables.btnDisabledBg
87
+    '.disabled': {
88
+      '.transparent': {
89
+        backgroundColor: 'transparent',
90
+        'NativeBase.Text': {
91
+          color: variables.buttonDisabledBg
91 92
         },
92
-        "NativeBase.Icon": {
93
-          color: variables.btnDisabledBg
93
+        'NativeBase.Icon': {
94
+          color: variables.buttonDisabledBg
94 95
         },
95
-        "NativeBase.IconNB": {
96
-          color: variables.btnDisabledBg
96
+        'NativeBase.IconNB': {
97
+          color: variables.buttonDisabledBg
97 98
         }
98 99
       },
99
-      "NativeBase.Icon": {
100
+      'NativeBase.Icon': {
100 101
         color: variables.brandLight
101 102
       },
102
-      "NativeBase.IconNB": {
103
+      'NativeBase.IconNB': {
103 104
         color: variables.brandLight
104 105
       },
105
-      backgroundColor: variables.btnDisabledBg
106
+      backgroundColor: variables.buttonDisabledBg
106 107
     },
107
-    ".bordered": {
108
-      ".dark": {
108
+    '.bordered': {
109
+      '.dark': {
109 110
         ...darkCommon,
110
-        backgroundColor: "transparent",
111
+        backgroundColor: 'transparent',
111 112
         borderColor: variables.brandDark,
112 113
         borderWidth: variables.borderWidth * 2
113 114
       },
114
-      ".light": {
115
+      '.light': {
115 116
         ...lightCommon,
116
-        backgroundColor: "transparent",
117
+        backgroundColor: 'transparent',
117 118
         borderColor: variables.brandLight,
118 119
         borderWidth: variables.borderWidth * 2
119 120
       },
120
-      ".primary": {
121
+      '.primary': {
121 122
         ...primaryCommon,
122
-        backgroundColor: "transparent",
123
-        borderColor: variables.btnPrimaryBg,
123
+        backgroundColor: 'transparent',
124
+        borderColor: variables.buttonPrimaryBg,
124 125
         borderWidth: variables.borderWidth * 2
125 126
       },
126
-      ".success": {
127
+      '.success': {
127 128
         ...successCommon,
128
-        backgroundColor: "transparent",
129
-        borderColor: variables.btnSuccessBg,
129
+        backgroundColor: 'transparent',
130
+        borderColor: variables.buttonSuccessBg,
130 131
         borderWidth: variables.borderWidth * 2
131 132
       },
132
-      ".info": {
133
+      '.info': {
133 134
         ...infoCommon,
134
-        backgroundColor: "transparent",
135
-        borderColor: variables.btnInfoBg,
135
+        backgroundColor: 'transparent',
136
+        borderColor: variables.buttonInfoBg,
136 137
         borderWidth: variables.borderWidth * 2
137 138
       },
138
-      ".warning": {
139
+      '.warning': {
139 140
         ...warningCommon,
140
-        backgroundColor: "transparent",
141
-        borderColor: variables.btnWarningBg,
141
+        backgroundColor: 'transparent',
142
+        borderColor: variables.buttonWarningBg,
142 143
         borderWidth: variables.borderWidth * 2
143 144
       },
144
-      ".danger": {
145
+      '.danger': {
145 146
         ...dangerCommon,
146
-        backgroundColor: "transparent",
147
-        borderColor: variables.btnDangerBg,
147
+        backgroundColor: 'transparent',
148
+        borderColor: variables.buttonDangerBg,
148 149
         borderWidth: variables.borderWidth * 2
149 150
       },
150
-      ".disabled": {
151
-        backgroundColor: null,
152
-        borderColor: variables.btnDisabledBg,
151
+      '.disabled': {
152
+        backgroundColor: 'transparent',
153
+        borderColor: variables.buttonDisabledBg,
153 154
         borderWidth: variables.borderWidth * 2,
154
-        "NativeBase.Text": {
155
-          color: variables.btnDisabledBg
155
+        'NativeBase.Text': {
156
+          color: variables.buttonDisabledBg
156 157
         }
157 158
       },
158 159
       ...primaryCommon,
@@ -162,235 +163,224 @@ export default (variables /*: * */ = variable) => {
162 163
       shadowOffset: null,
163 164
       shadowOpacity: null,
164 165
       shadowRadius: null,
165
-      backgroundColor: "transparent"
166
+      backgroundColor: 'transparent'
166 167
     },
167 168
 
168
-    ".dark": {
169
-      ".bordered": {
169
+    '.dark': {
170
+      '.bordered': {
170 171
         ...darkCommon
171 172
       },
172 173
       backgroundColor: variables.brandDark
173 174
     },
174
-    ".light": {
175
-      ".transparent": {
175
+    '.light': {
176
+      '.transparent': {
176 177
         ...lightCommon,
177
-        backgroundColor: null
178
+        backgroundColor: 'transparent'
178 179
       },
179
-      ".bordered": {
180
+      '.bordered': {
180 181
         ...lightCommon
181 182
       },
182 183
       ...darkCommon,
183 184
       backgroundColor: variables.brandLight
184 185
     },
185 186
 
186
-    ".primary": {
187
-      ".bordered": {
187
+    '.primary': {
188
+      '.bordered': {
188 189
         ...primaryCommon
189 190
       },
190
-      backgroundColor: variables.btnPrimaryBg
191
+      backgroundColor: variables.buttonPrimaryBg
191 192
     },
192 193
 
193
-    ".success": {
194
-      ".bordered": {
194
+    '.success': {
195
+      '.bordered': {
195 196
         ...successCommon
196 197
       },
197
-      backgroundColor: variables.btnSuccessBg
198
+      backgroundColor: variables.buttonSuccessBg
198 199
     },
199 200
 
200
-    ".info": {
201
-      ".bordered": {
201
+    '.info': {
202
+      '.bordered': {
202 203
         ...infoCommon
203 204
       },
204
-      backgroundColor: variables.btnInfoBg
205
+      backgroundColor: variables.buttonInfoBg
205 206
     },
206 207
 
207
-    ".warning": {
208
-      ".bordered": {
208
+    '.warning': {
209
+      '.bordered': {
209 210
         ...warningCommon
210 211
       },
211
-      backgroundColor: variables.btnWarningBg
212
+      backgroundColor: variables.buttonWarningBg
212 213
     },
213 214
 
214
-    ".danger": {
215
-      ".bordered": {
215
+    '.danger': {
216
+      '.bordered': {
216 217
         ...dangerCommon
217 218
       },
218
-      backgroundColor: variables.btnDangerBg
219
+      backgroundColor: variables.buttonDangerBg
219 220
     },
220 221
 
221
-    ".block": {
222
-      justifyContent: "center",
223
-      alignSelf: "stretch"
222
+    '.block': {
223
+      justifyContent: 'center',
224
+      alignSelf: 'stretch'
224 225
     },
225 226
 
226
-    ".full": {
227
-      justifyContent: "center",
228
-      alignSelf: "stretch",
227
+    '.full': {
228
+      justifyContent: 'center',
229
+      alignSelf: 'stretch',
229 230
       borderRadius: 0
230 231
     },
231 232
 
232
-    ".rounded": {
233
-      // paddingHorizontal: variables.buttonPadding + 20,
233
+    '.rounded': {
234 234
       borderRadius: variables.borderRadiusLarge
235 235
     },
236 236
 
237
-    ".transparent": {
238
-      backgroundColor: "transparent",
237
+    '.transparent': {
238
+      backgroundColor: 'transparent',
239 239
       elevation: 0,
240 240
       shadowColor: null,
241 241
       shadowOffset: null,
242 242
       shadowRadius: null,
243 243
       shadowOpacity: null,
244 244
       ...primaryCommon,
245
-      ".dark": {
245
+      '.dark': {
246 246
         ...darkCommon,
247
-        backgroundColor: null
248 247
       },
249
-      ".danger": {
248
+      '.danger': {
250 249
         ...dangerCommon,
251
-        backgroundColor: null
252 250
       },
253
-      ".warning": {
251
+      '.warning': {
254 252
         ...warningCommon,
255
-        backgroundColor: null
256 253
       },
257
-      ".info": {
254
+      '.info': {
258 255
         ...infoCommon,
259
-        backgroundColor: null
260 256
       },
261
-      ".primary": {
257
+      '.primary': {
262 258
         ...primaryCommon,
263
-        backgroundColor: null
264 259
       },
265
-      ".success": {
260
+      '.success': {
266 261
         ...successCommon,
267
-        backgroundColor: null
268 262
       },
269
-      ".light": {
263
+      '.light': {
270 264
         ...lightCommon,
271
-        backgroundColor: null
272 265
       },
273
-      ".disabled": {
274
-        backgroundColor: "transparent",
275
-        borderColor: variables.btnDisabledBg,
266
+      '.disabled': {
267
+        backgroundColor: 'transparent',
268
+        borderColor: variables.buttonDisabledBg,
276 269
         borderWidth: variables.borderWidth * 2,
277
-        "NativeBase.Text": {
278
-          color: variables.btnDisabledBg
270
+        'NativeBase.Text': {
271
+          color: variables.buttonDisabledBg
279 272
         },
280
-        "NativeBase.Icon": {
281
-          color: variables.btnDisabledBg
273
+        'NativeBase.Icon': {
274
+          color: variables.buttonDisabledBg
282 275
         },
283
-        "NativeBase.IconNB": {
284
-          color: variables.btnDisabledBg
276
+        'NativeBase.IconNB': {
277
+          color: variables.buttonDisabledBg
285 278
         }
286 279
       }
287 280
     },
288 281
 
289
-    ".small": {
282
+    '.small': {
290 283
       height: 30,
291
-      "NativeBase.Text": {
284
+      'NativeBase.Text': {
292 285
         fontSize: 14
293 286
       },
294
-      "NativeBase.Icon": {
287
+      'NativeBase.Icon': {
295 288
         fontSize: 20,
296 289
         paddingTop: 0
297 290
       },
298
-      "NativeBase.IconNB": {
291
+      'NativeBase.IconNB': {
299 292
         fontSize: 20,
300 293
         paddingTop: 0
301 294
       }
302 295
     },
303 296
 
304
-    ".large": {
297
+    '.large': {
305 298
       height: 60,
306
-      "NativeBase.Text": {
307
-        fontSize: 22,
299
+      'NativeBase.Text': {
300
+        fontSize: 22
308 301
       }
309 302
     },
310 303
 
311
-    ".capitalize": {},
304
+    '.capitalize': {},
312 305
 
313
-    ".vertical": {
314
-      flexDirection: "column",
306
+    '.vertical': {
307
+      flexDirection: 'column',
315 308
       height: null
316 309
     },
317 310
 
318
-    "NativeBase.Text": {
319
-      fontFamily: variables.btnFontFamily,
311
+    'NativeBase.Text': {
312
+      fontFamily: variables.buttonFontFamily,
320 313
       marginLeft: 0,
321 314
       marginRight: 0,
322
-      color: variables.btnTextColor,
323
-      fontSize: variables.btnTextSize,
315
+      color: variables.buttonTextColor,
316
+      fontSize: variables.buttonTextSize,
324 317
       paddingHorizontal: 16,
325
-      backgroundColor: "transparent"
326
-      // childPosition: 1
318
+      backgroundColor: 'transparent'
327 319
     },
328 320
 
329
-    "NativeBase.Icon": {
330
-      color: variables.btnTextColor,
321
+    'NativeBase.Icon': {
322
+      color: variables.buttonTextColor,
331 323
       fontSize: 24,
332 324
       marginHorizontal: 16,
333
-      paddingTop: platform === "ios" ? 2 : undefined
325
+      paddingTop: platform === PLATFORM.IOS ? 2 : undefined
334 326
     },
335
-    "NativeBase.IconNB": {
336
-      color: variables.btnTextColor,
327
+    'NativeBase.IconNB': {
328
+      color: variables.buttonTextColor,
337 329
       fontSize: 24,
338 330
       marginHorizontal: 16,
339
-      paddingTop: platform === "ios" ? 2 : undefined
331
+      paddingTop: platform === PLATFORM.IOS ? 2 : undefined
340 332
     },
341 333
 
342
-    ".iconLeft": {
343
-      "NativeBase.Text": {
334
+    '.iconLeft': {
335
+      'NativeBase.Text': {
344 336
         marginLeft: 0
345 337
       },
346
-      "NativeBase.IconNB": {
338
+      'NativeBase.IconNB': {
347 339
         marginRight: 0,
348 340
         marginLeft: 16
349 341
       },
350
-      "NativeBase.Icon": {
342
+      'NativeBase.Icon': {
351 343
         marginRight: 0,
352 344
         marginLeft: 16
353 345
       }
354 346
     },
355
-    ".iconRight": {
356
-      "NativeBase.Text": {
347
+    '.iconRight': {
348
+      'NativeBase.Text': {
357 349
         marginRight: 0
358 350
       },
359
-      "NativeBase.IconNB": {
351
+      'NativeBase.IconNB': {
360 352
         marginLeft: 0,
361 353
         marginRight: 16
362 354
       },
363
-      "NativeBase.Icon": {
355
+      'NativeBase.Icon': {
364 356
         marginLeft: 0,
365 357
         marginRight: 16
366 358
       }
367 359
     },
368
-    ".picker": {
369
-      "NativeBase.Text": {
370
-        ".note": {
360
+    '.picker': {
361
+      'NativeBase.Text': {
362
+        '.note': {
371 363
           fontSize: 16,
372 364
           lineHeight: null
373 365
         }
374 366
       }
375 367
     },
376
-
377 368
     paddingVertical: variables.buttonPadding,
378
-    // paddingHorizontal: variables.buttonPadding + 10,
379
-    backgroundColor: variables.btnPrimaryBg,
369
+    backgroundColor: variables.buttonPrimaryBg,
380 370
     borderRadius: variables.borderRadiusBase,
381
-    borderColor: variables.btnPrimaryBg,
371
+    borderColor: variables.buttonPrimaryBg,
382 372
     borderWidth: null,
383 373
     height: 45,
384
-    alignSelf: "flex-start",
385
-    flexDirection: "row",
374
+    flexDirection: 'row',
386 375
     elevation: 2,
387
-    shadowColor: platformStyle === "material" ? variables.brandDark : undefined,
376
+    shadowColor:
377
+      platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined,
388 378
     shadowOffset:
389
-      platformStyle === "material" ? { width: 0, height: 2 } : undefined,
390
-    shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
391
-    shadowRadius: platformStyle === "material" ? 1.2 : undefined,
392
-    alignItems: "center",
393
-    justifyContent: "space-between"
379
+      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
380
+    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
381
+    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
382
+    alignItems: 'center',
383
+    justifyContent: 'space-between'
394 384
   };
395 385
   return buttonTheme;
396 386
 };

+ 7
- 7
native-base-theme/components/Card.js View File

@@ -1,19 +1,19 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const cardTheme = {
7
-    ".transparent": {
7
+    '.transparent': {
8 8
       shadowColor: null,
9 9
       shadowOffset: null,
10 10
       shadowOpacity: null,
11 11
       shadowRadius: null,
12 12
       elevation: null,
13
-      backgroundColor: "transparent",
13
+      backgroundColor: 'transparent',
14 14
       borderWidth: 0
15 15
     },
16
-    ".noShadow": {
16
+    '.noShadow': {
17 17
       shadowColor: null,
18 18
       shadowOffset: null,
19 19
       shadowOpacity: null,
@@ -24,9 +24,9 @@ export default (variables /*: * */ = variable) => {
24 24
     borderWidth: variables.borderWidth,
25 25
     borderRadius: variables.cardBorderRadius,
26 26
     borderColor: variables.cardBorderColor,
27
-    flexWrap: "nowrap",
27
+    flexWrap: 'nowrap',
28 28
     backgroundColor: variables.cardDefaultBg,
29
-    shadowColor: "#000",
29
+    shadowColor: '#000',
30 30
     shadowOffset: { width: 0, height: 2 },
31 31
     shadowOpacity: 0.1,
32 32
     shadowRadius: 1.5,

+ 69
- 67
native-base-theme/components/CardItem.js View File

@@ -1,21 +1,23 @@
1 1
 // @flow
2 2
 
3
-import { StyleSheet } from "react-native";
4
-import variable from "./../variables/platform";
3
+import { StyleSheet } from 'react-native';
5 4
 
6
-export default (variables /*: * */ = variable) => {
5
+import variable from './../variables/platform';
6
+import { PLATFORM } from './../variables/commonColor';
7
+
8
+export default (variables /* : * */ = variable) => {
7 9
   const platform = variables.platform;
8 10
   const transparentBtnCommon = {
9
-    "NativeBase.Text": {
11
+    'NativeBase.Text': {
10 12
       fontSize: variables.DefaultFontSize - 3,
11 13
       color: variables.sTabBarActiveTextColor
12 14
     },
13
-    "NativeBase.Icon": {
15
+    'NativeBase.Icon': {
14 16
       fontSize: variables.iconFontSize - 10,
15 17
       color: variables.sTabBarActiveTextColor,
16 18
       marginHorizontal: null
17 19
     },
18
-    "NativeBase.IconNB": {
20
+    'NativeBase.IconNB': {
19 21
       fontSize: variables.iconFontSize - 10,
20 22
       color: variables.sTabBarActiveTextColor
21 23
     },
@@ -24,12 +26,12 @@ export default (variables /*: * */ = variable) => {
24 26
   };
25 27
 
26 28
   const cardItemTheme = {
27
-    "NativeBase.Left": {
28
-      "NativeBase.Body": {
29
-        "NativeBase.Text": {
30
-          ".note": {
29
+    'NativeBase.Left': {
30
+      'NativeBase.Body': {
31
+        'NativeBase.Text': {
32
+          '.note': {
31 33
             color: variables.listNoteColor,
32
-            fontWeight: "400",
34
+            fontWeight: '400',
33 35
             marginRight: 20
34 36
           }
35 37
         },
@@ -37,155 +39,155 @@ export default (variables /*: * */ = variable) => {
37 39
         marginLeft: 10,
38 40
         alignItems: null
39 41
       },
40
-      "NativeBase.Icon": {
42
+      'NativeBase.Icon': {
41 43
         fontSize: variables.iconFontSize
42 44
       },
43
-      "NativeBase.IconNB": {
45
+      'NativeBase.IconNB': {
44 46
         fontSize: variables.iconFontSize
45 47
       },
46
-      "NativeBase.Text": {
48
+      'NativeBase.Text': {
47 49
         marginLeft: 10,
48
-        alignSelf: "center"
50
+        alignSelf: 'center'
49 51
       },
50
-      "NativeBase.Button": {
51
-        ".transparent": {
52
+      'NativeBase.Button': {
53
+        '.transparent': {
52 54
           ...transparentBtnCommon,
53 55
           paddingRight: variables.cardItemPadding + 5
54 56
         }
55 57
       },
56 58
       flex: 1,
57
-      flexDirection: "row",
58
-      alignItems: "center"
59
+      flexDirection: 'row',
60
+      alignItems: 'center'
59 61
     },
60
-    ".content": {
61
-      "NativeBase.Text": {
62
-        color: platform === "ios" ? "#555" : "#222",
62
+    '.content': {
63
+      'NativeBase.Text': {
64
+        color: platform === PLATFORM.IOS ? '#555' : '#222',
63 65
         fontSize: variables.DefaultFontSize - 2
64 66
       }
65 67
     },
66
-    ".cardBody": {
68
+    '.cardBody': {
67 69
       padding: -5,
68
-      "NativeBase.Text": {
70
+      'NativeBase.Text': {
69 71
         marginTop: 5
70 72
       }
71 73
     },
72
-    "NativeBase.Body": {
73
-      "NativeBase.Text": {
74
-        ".note": {
74
+    'NativeBase.Body': {
75
+      'NativeBase.Text': {
76
+        '.note': {
75 77
           color: variables.listNoteColor,
76
-          fontWeight: "200",
78
+          fontWeight: '200',
77 79
           marginRight: 20
78 80
         }
79 81
       },
80
-      "NativeBase.Button": {
81
-        ".transparent": {
82
+      'NativeBase.Button': {
83
+        '.transparent': {
82 84
           ...transparentBtnCommon,
83 85
           paddingRight: variables.cardItemPadding + 5,
84
-          alignSelf: "stretch"
86
+          alignSelf: 'stretch'
85 87
         }
86 88
       },
87 89
       flex: 1,
88
-      alignSelf: "stretch",
89
-      alignItems: "flex-start"
90
+      alignSelf: 'stretch',
91
+      alignItems: 'flex-start'
90 92
     },
91
-    "NativeBase.Right": {
92
-      "NativeBase.Badge": {
93
+    'NativeBase.Right': {
94
+      'NativeBase.Badge': {
93 95
         alignSelf: null
94 96
       },
95
-      "NativeBase.Button": {
96
-        ".transparent": {
97
+      'NativeBase.Button': {
98
+        '.transparent': {
97 99
           ...transparentBtnCommon
98 100
         },
99 101
         alignSelf: null
100 102
       },
101
-      "NativeBase.Icon": {
103
+      'NativeBase.Icon': {
102 104
         alignSelf: null,
103 105
         fontSize: variables.iconFontSize - 8,
104 106
         color: variables.cardBorderColor
105 107
       },
106
-      "NativeBase.IconNB": {
108
+      'NativeBase.IconNB': {
107 109
         alignSelf: null,
108 110
         fontSize: variables.iconFontSize - 8,
109 111
         color: variables.cardBorderColor
110 112
       },
111
-      "NativeBase.Text": {
113
+      'NativeBase.Text': {
112 114
         fontSize: variables.DefaultFontSize - 1,
113 115
         alignSelf: null
114 116
       },
115
-      "NativeBase.Thumbnail": {
117
+      'NativeBase.Thumbnail': {
116 118
         alignSelf: null
117 119
       },
118
-      "NativeBase.Image": {
120
+      'NativeBase.Image': {
119 121
         alignSelf: null
120 122
       },
121
-      "NativeBase.Radio": {
123
+      'NativeBase.Radio': {
122 124
         alignSelf: null
123 125
       },
124
-      "NativeBase.Checkbox": {
126
+      'NativeBase.Checkbox': {
125 127
         alignSelf: null
126 128
       },
127
-      "NativeBase.Switch": {
129
+      'NativeBase.Switch': {
128 130
         alignSelf: null
129 131
       },
130 132
       flex: 0.8
131 133
     },
132
-    ".header": {
133
-      "NativeBase.Text": {
134
+    '.header': {
135
+      'NativeBase.Text': {
134 136
         fontSize: 16,
135
-        fontWeight: platform === "ios" ? "600" : "500"
137
+        fontWeight: platform === PLATFORM.IOS ? '600' : '500'
136 138
       },
137
-      ".bordered": {
138
-        "NativeBase.Text": {
139
+      '.bordered': {
140
+        'NativeBase.Text': {
139 141
           color: variables.brandPrimary,
140
-          fontWeight: platform === "ios" ? "600" : "500"
142
+          fontWeight: platform === PLATFORM.IOS ? '600' : '500'
141 143
         },
142 144
         borderBottomWidth: variables.borderWidth
143 145
       },
144 146
       borderBottomWidth: null,
145 147
       paddingVertical: variables.cardItemPadding + 5
146 148
     },
147
-    ".footer": {
148
-      "NativeBase.Text": {
149
+    '.footer': {
150
+      'NativeBase.Text': {
149 151
         fontSize: 16,
150
-        fontWeight: platform === "ios" ? "600" : "500"
152
+        fontWeight: platform === PLATFORM.IOS ? '600' : '500'
151 153
       },
152
-      ".bordered": {
153
-        "NativeBase.Text": {
154
+      '.bordered': {
155
+        'NativeBase.Text': {
154 156
           color: variables.brandPrimary,
155
-          fontWeight: platform === "ios" ? "600" : "500"
157
+          fontWeight: platform === PLATFORM.IOS ? '600' : '500'
156 158
         },
157 159
         borderTopWidth: variables.borderWidth
158 160
       },
159 161
       borderBottomWidth: null
160 162
     },
161
-    "NativeBase.Text": {
162
-      ".note": {
163
+    'NativeBase.Text': {
164
+      '.note': {
163 165
         color: variables.listNoteColor,
164
-        fontWeight: "200"
166
+        fontWeight: '200'
165 167
       }
166 168
     },
167
-    "NativeBase.Icon": {
169
+    'NativeBase.Icon': {
168 170
       width: variables.iconFontSize + 5,
169 171
       fontSize: variables.iconFontSize - 2
170 172
     },
171
-    "NativeBase.IconNB": {
173
+    'NativeBase.IconNB': {
172 174
       width: variables.iconFontSize + 5,
173 175
       fontSize: variables.iconFontSize - 2
174 176
     },
175
-    ".bordered": {
177
+    '.bordered': {
176 178
       borderBottomWidth: StyleSheet.hairlineWidth,
177 179
       borderColor: variables.cardBorderColor
178 180
     },
179
-    ".first": {
181
+    '.first': {
180 182
       borderTopLeftRadius: variables.cardBorderRadius,
181 183
       borderTopRightRadius: variables.cardBorderRadius
182 184
     },
183
-    ".last": {
185
+    '.last': {
184 186
       borderBottomLeftRadius: variables.cardBorderRadius,
185 187
       borderBottomRightRadius: variables.cardBorderRadius
186 188
     },
187
-    flexDirection: "row",
188
-    alignItems: "center",
189
+    flexDirection: 'row',
190
+    alignItems: 'center',
189 191
     borderRadius: variables.cardBorderRadius,
190 192
     padding: variables.cardItemPadding + 5,
191 193
     paddingVertical: variables.cardItemPadding,

+ 10
- 10
native-base-theme/components/CheckBox.js View File

@@ -1,31 +1,31 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const checkBoxTheme = {
7
-    ".checked": {
8
-      "NativeBase.Icon": {
7
+    '.checked': {
8
+      'NativeBase.Icon': {
9 9
         color: variables.checkboxTickColor
10 10
       },
11
-      "NativeBase.IconNB": {
11
+      'NativeBase.IconNB': {
12 12
         color: variables.checkboxTickColor
13 13
       }
14 14
     },
15
-    "NativeBase.Icon": {
16
-      color: "transparent",
15
+    'NativeBase.Icon': {
16
+      color: 'transparent',
17 17
       lineHeight: variables.CheckboxIconSize,
18 18
       marginTop: variables.CheckboxIconMarginTop,
19 19
       fontSize: variables.CheckboxFontSize
20 20
     },
21
-    "NativeBase.IconNB": {
22
-      color: "transparent",
21
+    'NativeBase.IconNB': {
22
+      color: 'transparent',
23 23
       lineHeight: variables.CheckboxIconSize,
24 24
       marginTop: variables.CheckboxIconMarginTop,
25 25
       fontSize: variables.CheckboxFontSize
26 26
     },
27 27
     borderRadius: variables.CheckboxRadius,
28
-    overflow: "hidden",
28
+    overflow: 'hidden',
29 29
     width: variables.checkboxSize,
30 30
     height: variables.checkboxSize,
31 31
     borderWidth: variables.CheckboxBorderWidth,

+ 6
- 5
native-base-theme/components/Container.js View File

@@ -1,14 +1,15 @@
1 1
 // @flow
2 2
 
3
-import { Platform, Dimensions } from "react-native";
3
+import { Platform, Dimensions } from 'react-native';
4 4
 
5
-import variable from "./../variables/platform";
5
+import variable from './../variables/platform';
6
+import { PLATFORM } from './../variables/commonColor';
6 7
 
7
-const deviceHeight = Dimensions.get("window").height;
8
-export default (variables /*: * */ = variable) => {
8
+const deviceHeight = Dimensions.get('window').height;
9
+export default (variables /* : * */ = variable) => {
9 10
   const theme = {
10 11
     flex: 1,
11
-    height: Platform.OS === "ios" ? deviceHeight : deviceHeight - 20,
12
+    height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20,
12 13
     backgroundColor: variables.containerBgColor
13 14
   };
14 15
 

+ 4
- 6
native-base-theme/components/Content.js View File

@@ -1,14 +1,12 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const contentTheme = {
7 5
     flex: 1,
8
-    backgroundColor: "transparent",
9
-    "NativeBase.Segment": {
6
+    backgroundColor: 'transparent',
7
+    'NativeBase.Segment': {
10 8
       borderWidth: 0,
11
-      backgroundColor: "transparent"
9
+      backgroundColor: 'transparent'
12 10
     }
13 11
   };
14 12
 

+ 12
- 16
native-base-theme/components/Fab.js View File

@@ -1,28 +1,24 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-
5
-export default (variables /*: * */ = variable) => {
6
-  const platform = variables.platform;
7
-
3
+export default () => {
8 4
   const fabTheme = {
9
-    "NativeBase.Button": {
10
-      alignItems: "center",
5
+    'NativeBase.Button': {
6
+      alignItems: 'center',
11 7
       padding: null,
12
-      justifyContent: "center",
13
-      "NativeBase.Icon": {
14
-        alignSelf: "center",
8
+      justifyContent: 'center',
9
+      'NativeBase.Icon': {
10
+        alignSelf: 'center',
15 11
         fontSize: 20,
16 12
         marginLeft: 0,
17
-        marginRight: 0,
13
+        marginRight: 0
18 14
       },
19
-      "NativeBase.IconNB": {
20
-        alignSelf: "center",
15
+      'NativeBase.IconNB': {
16
+        alignSelf: 'center',
21 17
         fontSize: 20,
22 18
         marginLeft: 0,
23
-        marginRight: 0,
24
-      },
25
-    },
19
+        marginRight: 0
20
+      }
21
+    }
26 22
   };
27 23
 
28 24
   return fabTheme;

+ 35
- 34
native-base-theme/components/Footer.js View File

@@ -1,31 +1,32 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4
+import { PLATFORM } from './../variables/commonColor';
4 5
 
5
-export default (variables /*: * */ = variable) => {
6
+export default (variables /* : * */ = variable) => {
6 7
   const platformStyle = variables.platformStyle;
7 8
   const platform = variables.platform;
8 9
 
9 10
   const iconCommon = {
10
-    "NativeBase.Icon": {
11
+    'NativeBase.Icon': {
11 12
       color: variables.tabBarActiveTextColor
12 13
     }
13 14
   };
14 15
   const iconNBCommon = {
15
-    "NativeBase.IconNB": {
16
+    'NativeBase.IconNB': {
16 17
       color: variables.tabBarActiveTextColor
17 18
     }
18 19
   };
19 20
   const textCommon = {
20
-    "NativeBase.Text": {
21
+    'NativeBase.Text': {
21 22
       color: variables.tabBarActiveTextColor
22 23
     }
23 24
   };
24 25
   const footerTheme = {
25
-    "NativeBase.Left": {
26
-      "NativeBase.Button": {
27
-        ".transparent": {
28
-          backgroundColor: "transparent",
26
+    'NativeBase.Left': {
27
+      'NativeBase.Button': {
28
+        '.transparent': {
29
+          backgroundColor: 'transparent',
29 30
           borderColor: null,
30 31
           elevation: 0,
31 32
           shadowColor: null,
@@ -38,22 +39,22 @@ export default (variables /*: * */ = variable) => {
38 39
         },
39 40
         alignSelf: null,
40 41
         ...iconCommon,
41
-        ...iconNBCommon,
42
+        ...iconNBCommon
42 43
         // ...textCommon
43 44
       },
44 45
       flex: 1,
45
-      alignSelf: "center",
46
-      alignItems: "flex-start"
46
+      alignSelf: 'center',
47
+      alignItems: 'flex-start'
47 48
     },
48
-    "NativeBase.Body": {
49
+    'NativeBase.Body': {
49 50
       flex: 1,
50
-      alignItems: "center",
51
-      alignSelf: "center",
52
-      flexDirection: "row",
53
-      "NativeBase.Button": {
54
-        alignSelf: "center",
55
-        ".transparent": {
56
-          backgroundColor: "transparent",
51
+      alignItems: 'center',
52
+      alignSelf: 'center',
53
+      flexDirection: 'row',
54
+      'NativeBase.Button': {
55
+        alignSelf: 'center',
56
+        '.transparent': {
57
+          backgroundColor: 'transparent',
57 58
           borderColor: null,
58 59
           elevation: 0,
59 60
           shadowColor: null,
@@ -64,20 +65,20 @@ export default (variables /*: * */ = variable) => {
64 65
           ...iconNBCommon,
65 66
           ...textCommon
66 67
         },
67
-        ".full": {
68
+        '.full': {
68 69
           height: variables.footerHeight,
69 70
           paddingBottom: variables.footerPaddingBottom,
70 71
           flex: 1
71 72
         },
72 73
         ...iconCommon,
73
-        ...iconNBCommon,
74
+        ...iconNBCommon
74 75
         // ...textCommon
75 76
       }
76 77
     },
77
-    "NativeBase.Right": {
78
-      "NativeBase.Button": {
79
-        ".transparent": {
80
-          backgroundColor: "transparent",
78
+    'NativeBase.Right': {
79
+      'NativeBase.Button': {
80
+        '.transparent': {
81
+          backgroundColor: 'transparent',
81 82
           borderColor: null,
82 83
           elevation: 0,
83 84
           shadowColor: null,
@@ -90,23 +91,23 @@ export default (variables /*: * */ = variable) => {
90 91
         },
91 92
         alignSelf: null,
92 93
         ...iconCommon,
93
-        ...iconNBCommon,
94
+        ...iconNBCommon
94 95
         // ...textCommon
95 96
       },
96 97
       flex: 1,
97
-      alignSelf: "center",
98
-      alignItems: "flex-end"
98
+      alignSelf: 'center',
99
+      alignItems: 'flex-end'
99 100
     },
100 101
     backgroundColor: variables.footerDefaultBg,
101
-    flexDirection: "row",
102
-    justifyContent: "center",
102
+    flexDirection: 'row',
103
+    justifyContent: 'center',
103 104
     borderTopWidth:
104
-      platform === "ios" && platformStyle !== "material"
105
+      platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
105 106
         ? variables.borderWidth
106 107
         : undefined,
107 108
     borderColor:
108
-      platform === "ios" && platformStyle !== "material"
109
-        ? "#cbcbcb"
109
+      platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
110
+        ? '#cbcbcb'
110 111
         : undefined,
111 112
     height: variables.footerHeight,
112 113
     paddingBottom: variables.footerPaddingBottom,

+ 26
- 26
native-base-theme/components/FooterTab.js View File

@@ -1,78 +1,78 @@
1 1
 // @flow
2 2
 
3
-import { Platform } from "react-native";
3
+import { Platform } from 'react-native';
4 4
 
5
-import variable from "./../variables/platform";
5
+import variable from './../variables/platform';
6
+import { PLATFORM } from './../variables/commonColor';
6 7
 
7
-export default (variables /*: * */ = variable) => {
8
+export default (variables /* : * */ = variable) => {
8 9
   const platform = variables.platform;
9 10
 
10 11
   const footerTabTheme = {
11
-    "NativeBase.Button": {
12
-      ".active": {
13
-        "NativeBase.Text": {
12
+    'NativeBase.Button': {
13
+      '.active': {
14
+        'NativeBase.Text': {
14 15
           color: variables.tabBarActiveTextColor,
15 16
           fontSize: variables.tabBarTextSize,
16 17
           lineHeight: 16
17 18
         },
18
-        "NativeBase.Icon": {
19
+        'NativeBase.Icon': {
19 20
           color: variables.tabBarActiveTextColor
20 21
         },
21
-        "NativeBase.IconNB": {
22
+        'NativeBase.IconNB': {
22 23
           color: variables.tabBarActiveTextColor
23 24
         },
24 25
         backgroundColor: variables.tabActiveBgColor
25 26
       },
26 27
       flexDirection: null,
27
-      backgroundColor: "transparent",
28
+      backgroundColor: 'transparent',
28 29
       borderColor: null,
29 30
       elevation: 0,
30 31
       shadowColor: null,
31 32
       shadowOffset: null,
32 33
       shadowRadius: null,
33 34
       shadowOpacity: null,
34
-      alignSelf: "center",
35
+      alignSelf: 'center',
35 36
       flex: 1,
36 37
       height: variables.footerHeight,
37
-      justifyContent: "center",
38
-      ".badge": {
39
-        "NativeBase.Badge": {
40
-          "NativeBase.Text": {
38
+      justifyContent: 'center',
39
+      '.badge': {
40
+        'NativeBase.Badge': {
41
+          'NativeBase.Text': {
41 42
             fontSize: 11,
42
-            fontWeight: platform === "ios" ? "600" : undefined,
43
+            fontWeight: platform === PLATFORM.IOS ? '600' : undefined,
43 44
             lineHeight: 14
44 45
           },
45 46
           top: -3,
46
-          alignSelf: "center",
47
+          alignSelf: 'center',
47 48
           left: 10,
48 49
           zIndex: 99,
49 50
           height: 18,
50 51
           padding: 1.7,
51 52
           paddingHorizontal: 3
52 53
         },
53
-        "NativeBase.Icon": {
54
+        'NativeBase.Icon': {
54 55
           marginTop: -18
55 56
         }
56 57
       },
57
-      "NativeBase.Icon": {
58
+      'NativeBase.Icon': {
58 59
         color: variables.tabBarTextColor
59 60
       },
60
-      "NativeBase.IconNB": {
61
+      'NativeBase.IconNB': {
61 62
         color: variables.tabBarTextColor
62 63
       },
63
-      "NativeBase.Text": {
64
+      'NativeBase.Text': {
64 65
         color: variables.tabBarTextColor,
65 66
         fontSize: variables.tabBarTextSize,
66 67
         lineHeight: 16
67 68
       }
68 69
     },
69
-    backgroundColor: Platform.OS === "android"
70
-      ? variables.footerDefaultBg
71
-      : undefined,
72
-    flexDirection: "row",
73
-    justifyContent: "space-between",
70
+    backgroundColor:
71
+      Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined,
72
+    flexDirection: 'row',
73
+    justifyContent: 'space-between',
74 74
     flex: 1,
75
-    alignSelf: "stretch"
75
+    alignSelf: 'stretch'
76 76
   };
77 77
 
78 78
   return footerTabTheme;

+ 26
- 30
native-base-theme/components/Form.js View File

@@ -1,85 +1,81 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-
5
-export default (variables /*: * */ = variable) => {
6
-  const platform = variables.platform;
7
-
3
+export default () => {
8 4
   const theme = {
9
-    "NativeBase.Item": {
10
-      ".fixedLabel": {
11
-        "NativeBase.Label": {
5
+    'NativeBase.Item': {
6
+      '.fixedLabel': {
7
+        'NativeBase.Label': {
12 8
           paddingLeft: null
13 9
         },
14 10
         marginLeft: 15
15 11
       },
16
-      ".inlineLabel": {
17
-        "NativeBase.Label": {
12
+      '.inlineLabel': {
13
+        'NativeBase.Label': {
18 14
           paddingLeft: null
19 15
         },
20 16
         marginLeft: 15
21 17
       },
22
-      ".placeholderLabel": {
23
-        "NativeBase.Input": {}
18
+      '.placeholderLabel': {
19
+        'NativeBase.Input': {}
24 20
       },
25
-      ".stackedLabel": {
26
-        "NativeBase.Label": {
21
+      '.stackedLabel': {
22
+        'NativeBase.Label': {
27 23
           top: 5,
28 24
           paddingLeft: null
29 25
         },
30
-        "NativeBase.Input": {
26
+        'NativeBase.Input': {
31 27
           paddingLeft: null,
32 28
           marginLeft: null
33 29
         },
34
-        "NativeBase.Icon": {
30
+        'NativeBase.Icon': {
35 31
           marginTop: 36
36 32
         },
37 33
         marginLeft: 15
38 34
       },
39
-      ".floatingLabel": {
40
-        "NativeBase.Input": {
35
+      '.floatingLabel': {
36
+        'NativeBase.Input': {
41 37
           paddingLeft: null,
42 38
           top: 10,
43 39
           marginLeft: null
44 40
         },
45
-        "NativeBase.Label": {
41
+        'NativeBase.Label': {
46 42
           left: 0,
47 43
           top: 6
48 44
         },
49
-        "NativeBase.Icon": {
45
+        'NativeBase.Icon': {
50 46
           top: 6
51 47
         },
52 48
         marginTop: 15,
53 49
         marginLeft: 15
54 50
       },
55
-      ".regular": {
56
-        "NativeBase.Label": {
51
+      '.regular': {
52
+        'NativeBase.Label': {
57 53
           left: 0
58 54
         },
59 55
         marginLeft: 0
60 56
       },
61
-      ".rounded": {
62
-        "NativeBase.Label": {
57
+      '.rounded': {
58
+        'NativeBase.Label': {
63 59
           left: 0
64 60
         },
65 61
         marginLeft: 0
66 62
       },
67
-      ".underline": {
68
-        "NativeBase.Label": {
63
+      '.underline': {
64
+        'NativeBase.Label': {
69 65
           left: 0,
70 66
           top: 0,
71
-          position: "relative"
67
+          position: 'relative'
72 68
         },
73
-        "NativeBase.Input": {
69
+        'NativeBase.Input': {
74 70
           left: -15
75 71
         },
76 72
         marginLeft: 15
77 73
       },
78
-      ".last": {
74
+      '.last': {
79 75
         marginLeft: 0,
80 76
         paddingLeft: 15
81 77
       },
82
-      "NativeBase.Label": {
78
+      'NativeBase.Label': {
83 79
         paddingRight: 5
84 80
       },
85 81
       marginLeft: 15

+ 3
- 3
native-base-theme/components/H1.js View File

@@ -1,12 +1,12 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const h1Theme = {
7 7
     color: variables.textColor,
8 8
     fontSize: variables.fontSizeH1,
9
-    lineHeight: variables.lineHeightH1,
9
+    lineHeight: variables.lineHeightH1
10 10
   };
11 11
 
12 12
   return h1Theme;

+ 3
- 3
native-base-theme/components/H2.js View File

@@ -1,12 +1,12 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const h2Theme = {
7 7
     color: variables.textColor,
8 8
     fontSize: variables.fontSizeH2,
9
-    lineHeight: variables.lineHeightH2,
9
+    lineHeight: variables.lineHeightH2
10 10
   };
11 11
 
12 12
   return h2Theme;

+ 2
- 2
native-base-theme/components/H3.js View File

@@ -1,8 +1,8 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const h3Theme = {
7 7
     color: variables.textColor,
8 8
     fontSize: variables.fontSizeH3,

+ 174
- 149
native-base-theme/components/Header.js View File

@@ -1,65 +1,70 @@
1 1
 // @flow
2 2
 
3
-import { PixelRatio, StatusBar } from "react-native";
3
+import { PixelRatio, StatusBar } from 'react-native';
4 4
 
5
-import variable from "./../variables/platform";
5
+import variable from './../variables/platform';
6
+import { PLATFORM } from './../variables/commonColor';
6 7
 
7
-export default (variables /*: * */ = variable) => {
8
+export default (variables /* : * */ = variable) => {
8 9
   const platformStyle = variables.platformStyle;
9 10
   const platform = variables.platform;
10 11
 
11 12
   const headerTheme = {
12
-    ".span": {
13
+    '.span': {
13 14
       height: 128,
14
-      "NativeBase.Left": {
15
-        alignSelf: "flex-start"
15
+      'NativeBase.Left': {
16
+        alignSelf: 'flex-start'
16 17
       },
17
-      "NativeBase.Body": {
18
-        alignSelf: "flex-end",
19
-        alignItems: "flex-start",
20
-        justifyContent: "center",
18
+      'NativeBase.Body': {
19
+        alignSelf: 'flex-end',
20
+        alignItems: 'flex-start',
21
+        justifyContent: 'center',
21 22
         paddingBottom: 26
22 23
       },
23
-      "NativeBase.Right": {
24
-        alignSelf: "flex-start"
24
+      'NativeBase.Right': {
25
+        alignSelf: 'flex-start'
25 26
       }
26 27
     },
27
-    ".hasSubtitle": {
28
-      "NativeBase.Body": {
29
-        "NativeBase.Title": {
28
+    '.hasSubtitle': {
29
+      'NativeBase.Body': {
30
+        'NativeBase.Title': {
30 31
           fontSize: variables.titleFontSize - 2,
31 32
           fontFamily: variables.titleFontfamily,
32
-          textAlign: "center",
33
-          fontWeight: "500",
33
+          textAlign: 'center',
34
+          fontWeight: '500',
34 35
           paddingBottom: 3
35 36
         },
36
-        "NativeBase.Subtitle": {
37
+        'NativeBase.Subtitle': {
37 38
           fontSize: variables.subTitleFontSize,
38 39
           fontFamily: variables.titleFontfamily,
39 40
           color: variables.subtitleColor,
40
-          textAlign: "center"
41
+          textAlign: 'center'
41 42
         }
42 43
       }
43 44
     },
44
-    ".transparent": {
45
-      backgroundColor: "transparent",
46
-      borderBottomColor: "transparent",
45
+    '.transparent': {
46
+      backgroundColor: 'transparent',
47
+      borderBottomColor: 'transparent',
47 48
       elevation: 0,
48 49
       shadowColor: null,
49 50
       shadowOffset: null,
50 51
       shadowRadius: null,
51 52
       shadowOpacity: null,
52
-      paddingTop: platform === "android" ? StatusBar.currentHeight : undefined,
53
-      height: platform === "android" ? variables.toolbarHeight + StatusBar.currentHeight : variables.toolbarHeight
53
+      paddingTop:
54
+        platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined,
55
+      height:
56
+        platform === PLATFORM.ANDROID
57
+          ? variables.toolbarHeight + StatusBar.currentHeight
58
+          : variables.toolbarHeight
54 59
     },
55
-    ".noShadow": {
60
+    '.noShadow': {
56 61
       elevation: 0,
57 62
       shadowColor: null,
58 63
       shadowOffset: null,
59 64
       shadowRadius: null,
60 65
       shadowOpacity: null
61 66
     },
62
-    ".hasTabs": {
67
+    '.hasTabs': {
63 68
       elevation: 0,
64 69
       shadowColor: null,
65 70
       shadowOffset: null,
@@ -67,131 +72,133 @@ export default (variables /*: * */ = variable) => {
67 72
       shadowOpacity: null,
68 73
       borderBottomWidth: null
69 74
     },
70
-    ".hasSegment": {
75
+    '.hasSegment': {
71 76
       elevation: 0,
72 77
       shadowColor: null,
73 78
       shadowOffset: null,
74 79
       shadowRadius: null,
75 80
       shadowOpacity: null,
76 81
       borderBottomWidth: null,
77
-      "NativeBase.Left": {
82
+      'NativeBase.Left': {
78 83
         flex: 0.3
79 84
       },
80
-      "NativeBase.Right": {
85
+      'NativeBase.Right': {
81 86
         flex: 0.3
82 87
       },
83
-      "NativeBase.Body": {
88
+      'NativeBase.Body': {
84 89
         flex: 1,
85
-        "NativeBase.Segment": {
90
+        'NativeBase.Segment': {
86 91
           marginRight: 0,
87
-          alignSelf: "center",
88
-          "NativeBase.Button": {
92
+          alignSelf: 'center',
93
+          'NativeBase.Button': {
89 94
             paddingLeft: 0,
90 95
             paddingRight: 0
91 96
           }
92 97
         }
93 98
       }
94 99
     },
95
-    ".noLeft": {
96
-      "NativeBase.Left": {
97
-        width: platform === "ios" ? undefined : 0,
98
-        flex: platform === "ios" ? 1 : 0
100
+    '.noLeft': {
101
+      'NativeBase.Left': {
102
+        width: platform === PLATFORM.IOS ? undefined : 0,
103
+        flex: platform === PLATFORM.IOS ? 1 : 0
99 104
       },
100
-      "NativeBase.Body": {
101
-        "NativeBase.Title": {
102
-          paddingLeft: platform === "ios" ? undefined : 10
105
+      'NativeBase.Body': {
106
+        'NativeBase.Title': {
107
+          paddingLeft: platform === PLATFORM.IOS ? undefined : 10
103 108
         },
104
-        "NativeBase.Subtitle": {
105
-          paddingLeft: platform === "ios" ? undefined : 10
109
+        'NativeBase.Subtitle': {
110
+          paddingLeft: platform === PLATFORM.IOS ? undefined : 10
106 111
         }
107 112
       }
108 113
     },
109
-    "NativeBase.Button": {
110
-      justifyContent: "center",
111
-      alignSelf: "center",
112
-      alignItems: "center",
113
-      ".transparent": {
114
-        "NativeBase.Text": {
114
+    'NativeBase.Button': {
115
+      justifyContent: 'center',
116
+      alignSelf: 'center',
117
+      alignItems: 'center',
118
+      '.transparent': {
119
+        'NativeBase.Text': {
115 120
           color: variables.toolbarBtnTextColor,
116
-          fontWeight: "600"
121
+          fontWeight: '600'
117 122
         },
118
-        "NativeBase.Icon": {
123
+        'NativeBase.Icon': {
119 124
           color: variables.toolbarBtnColor
120 125
         },
121
-        "NativeBase.IconNB": {
126
+        'NativeBase.IconNB': {
122 127
           color: variables.toolbarBtnColor
123 128
         },
124 129
         paddingHorizontal: variables.buttonPadding
125 130
       },
126 131
       paddingHorizontal: 15
127 132
     },
128
-    ".searchBar": {
129
-      "NativeBase.Item": {
130
-        "NativeBase.Icon": {
131
-          backgroundColor: "transparent",
133
+    '.searchBar': {
134
+      'NativeBase.Item': {
135
+        'NativeBase.Icon': {
136
+          backgroundColor: 'transparent',
132 137
           color: variables.dropdownLinkColor,
133 138
           fontSize: variables.toolbarSearchIconSize,
134
-          alignItems: "center",
139
+          alignItems: 'center',
135 140
           marginTop: 2,
136 141
           paddingRight: 10,
137 142
           paddingLeft: 10
138 143
         },
139
-        "NativeBase.IconNB": {
140
-          backgroundColor: "transparent",
144
+        'NativeBase.IconNB': {
145
+          backgroundColor: 'transparent',
141 146
           color: null,
142
-          alignSelf: "center"
147
+          alignSelf: 'center'
143 148
         },
144
-        "NativeBase.Input": {
145
-          alignSelf: "center",
149
+        'NativeBase.Input': {
150
+          alignSelf: 'center',
146 151
           lineHeight: null,
147 152
           height: variables.searchBarInputHeight
148 153
         },
149
-        alignSelf: "center",
150
-        alignItems: "center",
151
-        justifyContent: "flex-start",
154
+        alignSelf: 'center',
155
+        alignItems: 'center',
156
+        justifyContent: 'flex-start',
152 157
         flex: 1,
153 158
         height: variables.searchBarHeight,
154
-        borderColor: "transparent",
159
+        borderColor: 'transparent',
155 160
         backgroundColor: variables.toolbarInputColor
156 161
       },
157
-      "NativeBase.Button": {
158
-        ".transparent": {
159
-          "NativeBase.Text": {
160
-            fontWeight: "500"
162
+      'NativeBase.Button': {
163
+        '.transparent': {
164
+          'NativeBase.Text': {
165
+            fontWeight: '500'
161 166
           },
162 167
           paddingHorizontal: null,
163
-          paddingLeft: platform === "ios" ? 10 : null
168
+          paddingLeft: platform === PLATFORM.IOS ? 10 : null
164 169
         },
165
-        paddingHorizontal: platform === "ios" ? undefined : null,
166
-        width: platform === "ios" ? undefined : 0,
167
-        height: platform === "ios" ? undefined : 0
170
+        paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
171
+        width: platform === PLATFORM.IOS ? undefined : 0,
172
+        height: platform === PLATFORM.IOS ? undefined : 0
168 173
       }
169 174
     },
170
-    ".rounded": {
171
-      "NativeBase.Item": {
175
+    '.rounded': {
176
+      'NativeBase.Item': {
172 177
         borderRadius:
173
-          platform === "ios" && platformStyle !== "material" ? 25 : 3
178
+          platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
179
+            ? 25
180
+            : 3
174 181
       }
175 182
     },
176
-    "NativeBase.Left": {
177
-      "NativeBase.Button": {
178
-        ".hasText": {
183
+    'NativeBase.Left': {
184
+      'NativeBase.Button': {
185
+        '.hasText': {
179 186
           marginLeft: -10,
180 187
           height: 30,
181
-          "NativeBase.Icon": {
188
+          'NativeBase.Icon': {
182 189
             color: variables.toolbarBtnColor,
183 190
             fontSize: variables.iconHeaderSize,
184 191
             marginTop: 2,
185 192
             marginRight: 5,
186 193
             marginLeft: 2
187 194
           },
188
-          "NativeBase.Text": {
195
+          'NativeBase.Text': {
189 196
             color: variables.toolbarBtnTextColor,
190
-            fontSize: platform === "ios" ? 17 : 0,
197
+            fontSize: platform === PLATFORM.IOS ? 17 : 0,
191 198
             marginLeft: 7,
192 199
             lineHeight: 19.5
193 200
           },
194
-          "NativeBase.IconNB": {
201
+          'NativeBase.IconNB': {
195 202
             color: variables.toolbarBtnColor,
196 203
             fontSize: variables.iconHeaderSize,
197 204
             marginTop: 2,
@@ -199,13 +206,16 @@ export default (variables /*: * */ = variable) => {
199 206
             marginLeft: 2
200 207
           }
201 208
         },
202
-        ".transparent": {
209
+        '.transparent': {
203 210
           marginLeft:
204
-            platform === "ios" && platformStyle !== "material" ? -3 : 0,
205
-          "NativeBase.Icon": {
211
+            platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
212
+              ? -3
213
+              : 0,
214
+          'NativeBase.Icon': {
206 215
             color: variables.toolbarBtnColor,
207 216
             fontSize:
208
-              platform === "ios" && variables.platformStyle !== "material"
217
+              platform === PLATFORM.IOS &&
218
+              variables.platformStyle !== PLATFORM.MATERIAL
209 219
                 ? variables.iconHeaderSize + 1
210 220
                 : variables.iconHeaderSize,
211 221
             marginTop: 0,
@@ -213,10 +223,11 @@ export default (variables /*: * */ = variable) => {
213 223
             marginLeft: 1,
214 224
             paddingTop: 1
215 225
           },
216
-          "NativeBase.IconNB": {
226
+          'NativeBase.IconNB': {
217 227
             color: variables.toolbarBtnColor,
218 228
             fontSize:
219
-              platform === "ios" && variables.platformStyle !== "material"
229
+              platform === PLATFORM.IOS &&
230
+              variables.platformStyle !== PLATFORM.MATERIAL
220 231
                 ? variables.iconHeaderSize + 1
221 232
                 : variables.iconHeaderSize - 2,
222 233
             marginTop: 0,
@@ -224,18 +235,20 @@ export default (variables /*: * */ = variable) => {
224 235
             marginLeft: 1,
225 236
             paddingTop: 1
226 237
           },
227
-          "NativeBase.Text": {
238
+          'NativeBase.Text': {
228 239
             color: variables.toolbarBtnTextColor,
229
-            fontSize: platform === "ios" ? 17 : 0,
230
-            top: platform === "ios" ? 1 : -1.5,
240
+            fontSize: platform === PLATFORM.IOS ? 17 : 0,
241
+            top: platform === PLATFORM.IOS ? 1 : -1.5,
231 242
             paddingLeft:
232
-              platform === "ios" && platformStyle !== "material" ? 2 : 5,
243
+              platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
244
+                ? 2
245
+                : 5,
233 246
             paddingRight:
234
-              platform === "ios" && platformStyle !== "material"
247
+              platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
235 248
                 ? undefined
236 249
                 : 10
237 250
           },
238
-          backgroundColor: "transparent",
251
+          backgroundColor: 'transparent',
239 252
           borderColor: null,
240 253
           elevation: 0,
241 254
           shadowColor: null,
@@ -243,66 +256,72 @@ export default (variables /*: * */ = variable) => {
243 256
           shadowRadius: null,
244 257
           shadowOpacity: null
245 258
         },
246
-        "NativeBase.Icon": {
259
+        'NativeBase.Icon': {
247 260
           color: variables.toolbarBtnColor
248 261
         },
249
-        "NativeBase.IconNB": {
262
+        'NativeBase.IconNB': {
250 263
           color: variables.toolbarBtnColor
251 264
         },
252 265
         alignSelf: null,
253 266
         paddingRight: variables.buttonPadding,
254
-        paddingLeft: platform === "ios" && platformStyle !== "material" ? 4 : 8
267
+        paddingLeft:
268
+          platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
269
+            ? 4
270
+            : 8
255 271
       },
256
-      flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.4,
257
-      alignSelf: "center",
258
-      alignItems: "flex-start"
272
+      flex:
273
+        platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
274
+          ? 1
275
+          : 0.4,
276
+      alignSelf: 'center',
277
+      alignItems: 'flex-start'
259 278
     },
260
-    "NativeBase.Body": {
279
+    'NativeBase.Body': {
261 280
       flex: 1,
262 281
       alignItems:
263
-        platform === "ios" && platformStyle !== "material"
264
-          ? "center"
265
-          : "flex-start",
266
-      alignSelf: "center",
267
-      "NativeBase.Segment": {
282
+        platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
283
+          ? 'center'
284
+          : 'flex-start',
285
+      alignSelf: 'center',
286
+      'NativeBase.Segment': {
268 287
         borderWidth: 0,
269
-        alignSelf: "flex-end",
270
-        marginRight: platform === "ios" ? -40 : -55
288
+        alignSelf: 'flex-end',
289
+        marginRight: platform === PLATFORM.IOS ? -40 : -55
271 290
       },
272
-      "NativeBase.Button": {
273
-        alignSelf: "center",
274
-        ".transparent": {
275
-          backgroundColor: "transparent"
291
+      'NativeBase.Button': {
292
+        alignSelf: 'center',
293
+        '.transparent': {
294
+          backgroundColor: 'transparent'
276 295
         },
277
-        "NativeBase.Icon": {
296
+        'NativeBase.Icon': {
278 297
           color: variables.toolbarBtnColor
279 298
         },
280
-        "NativeBase.IconNB": {
299
+        'NativeBase.IconNB': {
281 300
           color: variables.toolbarBtnColor
282 301
         },
283
-        "NativeBase.Text": {
302
+        'NativeBase.Text': {
284 303
           color: variables.inverseTextColor,
285
-          backgroundColor: "transparent"
304
+          backgroundColor: 'transparent'
286 305
         }
287 306
       }
288 307
     },
289
-    "NativeBase.Right": {
290
-      "NativeBase.Button": {
291
-        ".hasText": {
308
+    'NativeBase.Right': {
309
+      'NativeBase.Button': {
310
+        '.hasText': {
292 311
           height: 30,
293
-          "NativeBase.Icon": {
312
+          'NativeBase.Icon': {
294 313
             color: variables.toolbarBtnColor,
295 314
             fontSize: variables.iconHeaderSize - 2,
296 315
             marginTop: 2,
297 316
             marginRight: 2,
298 317
             marginLeft: 5
299 318
           },
300
-          "NativeBase.Text": {
319
+          'NativeBase.Text': {
301 320
             color: variables.toolbarBtnTextColor,
302
-            fontSize: platform === "ios" ? 17 : 14,
321
+            fontSize: platform === PLATFORM.IOS ? 17 : 14,
303 322
             lineHeight: 19.5
304 323
           },
305
-          "NativeBase.IconNB": {
324
+          'NativeBase.IconNB': {
306 325
             color: variables.toolbarBtnColor,
307 326
             fontSize: variables.iconHeaderSize - 2,
308 327
             marginTop: 2,
@@ -310,13 +329,13 @@ export default (variables /*: * */ = variable) => {
310 329
             marginLeft: 5
311 330
           }
312 331
         },
313
-        ".transparent": {
314
-          marginRight: platform === "ios" ? -9 : -5,
332
+        '.transparent': {
333
+          marginRight: platform === PLATFORM.IOS ? -9 : -5,
315 334
           paddingLeft: 15,
316 335
           paddingRight: 12,
317 336
           paddingHorizontal: 15,
318 337
           borderRadius: 50,
319
-          "NativeBase.Icon": {
338
+          'NativeBase.Icon': {
320 339
             color: variables.toolbarBtnColor,
321 340
             fontSize: variables.iconHeaderSize - 2,
322 341
             marginTop: 0,
@@ -324,7 +343,7 @@ export default (variables /*: * */ = variable) => {
324 343
             marginRight: 0
325 344
             // paddingTop: 0
326 345
           },
327
-          "NativeBase.IconNB": {
346
+          'NativeBase.IconNB': {
328 347
             color: variables.toolbarBtnColor,
329 348
             fontSize: variables.iconHeaderSize - 2,
330 349
             marginTop: 0,
@@ -332,16 +351,17 @@ export default (variables /*: * */ = variable) => {
332 351
             marginRight: 0
333 352
             // paddingTop: 0
334 353
           },
335
-          "NativeBase.Text": {
354
+          'NativeBase.Text': {
336 355
             color: variables.toolbarBtnTextColor,
337
-            fontSize: platform === "ios" ? 17 : 14,
338
-            top: platform === "ios" ? 1 : -1.5,
356
+            fontSize: platform === PLATFORM.IOS ? 17 : 14,
357
+            top: platform === PLATFORM.IOS ? 1 : -1.5,
339 358
             paddingRight:
340
-              platform === "ios" && variables.platformStyle !== "material"
359
+              platform === PLATFORM.IOS &&
360
+              variables.platformStyle !== PLATFORM.MATERIAL
341 361
                 ? 0
342 362
                 : undefined
343 363
           },
344
-          backgroundColor: "transparent",
364
+          backgroundColor: 'transparent',
345 365
           borderColor: null,
346 366
           elevation: 0,
347 367
           shadowColor: null,
@@ -349,42 +369,47 @@ export default (variables /*: * */ = variable) => {
349 369
           shadowRadius: null,
350 370
           shadowOpacity: null
351 371
         },
352
-        "NativeBase.Icon": {
372
+        'NativeBase.Icon': {
353 373
           color: variables.toolbarBtnColor
354 374
         },
355
-        "NativeBase.IconNB": {
375
+        'NativeBase.IconNB': {
356 376
           color: variables.toolbarBtnColor
357 377
         },
358 378
         alignSelf: null,
359 379
         paddingHorizontal: variables.buttonPadding
360 380
       },
361 381
       flex: 1,
362
-      alignSelf: "center",
363
-      alignItems: "flex-end",
364
-      flexDirection: "row",
365
-      justifyContent: "flex-end"
382
+      alignSelf: 'center',
383
+      alignItems: 'flex-end',
384
+      flexDirection: 'row',
385
+      justifyContent: 'flex-end'
366 386
     },
367 387
     backgroundColor: variables.toolbarDefaultBg,
368
-    flexDirection: "row",
388
+    flexDirection: 'row',
369 389
     // paddingHorizontal: 10,
370 390
     paddingLeft:
371
-      platform === "ios" && variables.platformStyle !== "material" ? 6 : 10,
391
+      platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
392
+        ? 6
393
+        : 10,
372 394
     paddingRight: 10,
373
-    justifyContent: "center",
374
-    paddingTop: platform === "ios" ? 18 : 0,
395
+    justifyContent: 'center',
396
+    paddingTop: platform === PLATFORM.IOS ? 18 : 0,
375 397
     borderBottomWidth:
376
-      platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0,
398
+      platform === PLATFORM.IOS
399
+        ? 1 / PixelRatio.getPixelSizeForLayoutSize(1)
400
+        : 0,
377 401
     borderBottomColor: variables.toolbarDefaultBorder,
378 402
     height:
379
-      variables.platform === "ios" && variables.platformStyle === "material"
403
+      variables.platform === PLATFORM.IOS &&
404
+      variables.platformStyle === PLATFORM.MATERIAL
380 405
         ? variables.toolbarHeight + 10
381 406
         : variables.toolbarHeight,
382 407
     elevation: 3,
383
-    shadowColor: platformStyle === "material" ? "#000" : undefined,
408
+    shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
384 409
     shadowOffset:
385
-      platformStyle === "material" ? { width: 0, height: 2 } : undefined,
386
-    shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
387
-    shadowRadius: platformStyle === "material" ? 1.2 : undefined,
410
+      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
411
+    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
412
+    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
388 413
     top: 0,
389 414
     left: 0,
390 415
     right: 0

+ 3
- 3
native-base-theme/components/Icon.js View File

@@ -1,11 +1,11 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const iconTheme = {
7 7
     fontSize: variables.iconFontSize,
8
-    color: "#000"
8
+    color: variable.textColor
9 9
   };
10 10
 
11 11
   return iconTheme;

+ 2
- 2
native-base-theme/components/Input.js View File

@@ -2,10 +2,10 @@
2 2
 
3 3
 import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const inputTheme = {
7 7
     '.multiline': {
8
-      height: null,
8
+      height: null
9 9
     },
10 10
     height: variables.inputHeightBase,
11 11
     color: variables.inputColor,

+ 34
- 34
native-base-theme/components/InputGroup.js View File

@@ -1,20 +1,20 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const inputGroupTheme = {
7
-    "NativeBase.Icon": {
7
+    'NativeBase.Icon': {
8 8
       fontSize: 24,
9 9
       color: variables.sTabBarActiveTextColor,
10 10
       paddingHorizontal: 5
11 11
     },
12
-    "NativeBase.IconNB": {
12
+    'NativeBase.IconNB': {
13 13
       fontSize: 24,
14 14
       color: variables.sTabBarActiveTextColor,
15 15
       paddingHorizontal: 5
16 16
     },
17
-    "NativeBase.Input": {
17
+    'NativeBase.Input': {
18 18
       height: variables.inputHeightBase,
19 19
       color: variables.inputColor,
20 20
       paddingLeft: 5,
@@ -23,11 +23,11 @@ export default (variables /*: * */ = variable) => {
23 23
       fontSize: variables.inputFontSize,
24 24
       lineHeight: variables.inputLineHeight
25 25
     },
26
-    ".underline": {
27
-      ".success": {
26
+    '.underline': {
27
+      '.success': {
28 28
         borderColor: variables.inputSuccessBorderColor
29 29
       },
30
-      ".error": {
30
+      '.error': {
31 31
         borderColor: variables.inputErrorBorderColor
32 32
       },
33 33
       paddingLeft: 5,
@@ -37,22 +37,22 @@ export default (variables /*: * */ = variable) => {
37 37
       borderLeftWidth: 0,
38 38
       borderColor: variables.inputBorderColor
39 39
     },
40
-    ".regular": {
41
-      ".success": {
40
+    '.regular': {
41
+      '.success': {
42 42
         borderColor: variables.inputSuccessBorderColor
43 43
       },
44
-      ".error": {
44
+      '.error': {
45 45
         borderColor: variables.inputErrorBorderColor
46 46
       },
47 47
       paddingLeft: 5,
48 48
       borderWidth: variables.borderWidth,
49 49
       borderColor: variables.inputBorderColor
50 50
     },
51
-    ".rounded": {
52
-      ".success": {
51
+    '.rounded': {
52
+      '.success': {
53 53
         borderColor: variables.inputSuccessBorderColor
54 54
       },
55
-      ".error": {
55
+      '.error': {
56 56
         borderColor: variables.inputErrorBorderColor
57 57
       },
58 58
       paddingLeft: 5,
@@ -61,21 +61,21 @@ export default (variables /*: * */ = variable) => {
61 61
       borderColor: variables.inputBorderColor
62 62
     },
63 63
 
64
-    ".success": {
65
-      "NativeBase.Icon": {
64
+    '.success': {
65
+      'NativeBase.Icon': {
66 66
         color: variables.inputSuccessBorderColor
67 67
       },
68
-      "NativeBase.IconNB": {
68
+      'NativeBase.IconNB': {
69 69
         color: variables.inputSuccessBorderColor
70 70
       },
71
-      ".rounded": {
71
+      '.rounded': {
72 72
         borderRadius: 30,
73 73
         borderColor: variables.inputSuccessBorderColor
74 74
       },
75
-      ".regular": {
75
+      '.regular': {
76 76
         borderColor: variables.inputSuccessBorderColor
77 77
       },
78
-      ".underline": {
78
+      '.underline': {
79 79
         borderWidth: variables.borderWidth,
80 80
         borderTopWidth: 0,
81 81
         borderRightWidth: 0,
@@ -85,21 +85,21 @@ export default (variables /*: * */ = variable) => {
85 85
       borderColor: variables.inputSuccessBorderColor
86 86
     },
87 87
 
88
-    ".error": {
89
-      "NativeBase.Icon": {
88
+    '.error': {
89
+      'NativeBase.Icon': {
90 90
         color: variables.inputErrorBorderColor
91 91
       },
92
-      "NativeBase.IconNB": {
92
+      'NativeBase.IconNB': {
93 93
         color: variables.inputErrorBorderColor
94 94
       },
95
-      ".rounded": {
95
+      '.rounded': {
96 96
         borderRadius: 30,
97 97
         borderColor: variables.inputErrorBorderColor
98 98
       },
99
-      ".regular": {
99
+      '.regular': {
100 100
         borderColor: variables.inputErrorBorderColor
101 101
       },
102
-      ".underline": {
102
+      '.underline': {
103 103
         borderWidth: variables.borderWidth,
104 104
         borderTopWidth: 0,
105 105
         borderRightWidth: 0,
@@ -108,12 +108,12 @@ export default (variables /*: * */ = variable) => {
108 108
       },
109 109
       borderColor: variables.inputErrorBorderColor
110 110
     },
111
-    ".disabled": {
112
-      "NativeBase.Icon": {
113
-        color: "#384850"
111
+    '.disabled': {
112
+      'NativeBase.Icon': {
113
+        color: '#384850'
114 114
       },
115
-      "NativeBase.IconNB": {
116
-        color: "#384850"
115
+      'NativeBase.IconNB': {
116
+        color: '#384850'
117 117
       }
118 118
     },
119 119
 
@@ -123,9 +123,9 @@ export default (variables /*: * */ = variable) => {
123 123
     borderRightWidth: 0,
124 124
     borderLeftWidth: 0,
125 125
     borderColor: variables.inputBorderColor,
126
-    backgroundColor: "transparent",
127
-    flexDirection: "row",
128
-    alignItems: "center"
126
+    backgroundColor: 'transparent',
127
+    flexDirection: 'row',
128
+    alignItems: 'center'
129 129
   };
130 130
 
131 131
   return inputGroupTheme;

+ 72
- 71
native-base-theme/components/Item.js View File

@@ -1,37 +1,38 @@
1 1
 // @flow
2 2
 
3
-import { Platform } from "react-native";
3
+import { Platform } from 'react-native';
4 4
 
5
-import variable from "./../variables/platform";
5
+import variable from './../variables/platform';
6
+import { PLATFORM } from './../variables/commonColor';
6 7
 
7
-export default (variables /*: * */ = variable) => {
8
+export default (variables /* : * */ = variable) => {
8 9
   const itemTheme = {
9
-    ".floatingLabel": {
10
-      "NativeBase.Input": {
10
+    '.floatingLabel': {
11
+      'NativeBase.Input': {
11 12
         height: 50,
12 13
         top: 8,
13 14
         paddingTop: 3,
14 15
         paddingBottom: 7,
15
-        ".multiline": {
16
+        '.multiline': {
16 17
           minHeight: variables.inputHeightBase,
17
-          paddingTop: Platform.OS === "ios" ? 10 : 3,
18
-          paddingBottom: Platform.OS === "ios" ? 14 : 10
18
+          paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3,
19
+          paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10
19 20
         }
20 21
       },
21
-      "NativeBase.Label": {
22
+      'NativeBase.Label': {
22 23
         paddingTop: 5
23 24
       },
24
-      "NativeBase.Icon": {
25
+      'NativeBase.Icon': {
25 26
         top: 6,
26 27
         paddingTop: 8
27 28
       },
28
-      "NativeBase.IconNB": {
29
+      'NativeBase.IconNB': {
29 30
         top: 6,
30 31
         paddingTop: 8
31 32
       }
32 33
     },
33
-    ".fixedLabel": {
34
-      "NativeBase.Label": {
34
+    '.fixedLabel': {
35
+      'NativeBase.Label': {
35 36
         position: null,
36 37
         top: null,
37 38
         left: null,
@@ -41,43 +42,43 @@ export default (variables /*: * */ = variable) => {
41 42
         width: null,
42 43
         fontSize: variables.inputFontSize
43 44
       },
44
-      "NativeBase.Input": {
45
+      'NativeBase.Input': {
45 46
         flex: 2,
46 47
         fontSize: variables.inputFontSize
47 48
       }
48 49
     },
49
-    ".stackedLabel": {
50
-      "NativeBase.Label": {
50
+    '.stackedLabel': {
51
+      'NativeBase.Label': {
51 52
         position: null,
52 53
         top: null,
53 54
         left: null,
54 55
         right: null,
55 56
         paddingTop: 5,
56
-        alignSelf: "flex-start",
57
+        alignSelf: 'flex-start',
57 58
         fontSize: variables.inputFontSize - 2
58 59
       },
59
-      "NativeBase.Icon": {
60
+      'NativeBase.Icon': {
60 61
         marginTop: 36
61 62
       },
62
-      "NativeBase.Input": {
63
-        alignSelf: Platform.OS === "ios" ? "stretch" : "flex-start",
63
+      'NativeBase.Input': {
64
+        alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start',
64 65
         flex: 1,
65
-        width: Platform.OS === "ios" ? null : variables.deviceWidth - 25,
66
+        width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25,
66 67
         fontSize: variables.inputFontSize,
67 68
         lineHeight: variables.inputLineHeight - 6,
68
-        ".secureTextEntry": {
69
-          fontSize: variables.inputFontSize - 4
69
+        '.secureTextEntry': {
70
+          fontSize: variables.inputFontSize
70 71
         },
71
-        ".multiline": {
72
-          paddingTop: Platform.OS === "ios" ? 9 : undefined,
73
-          paddingBottom: Platform.OS === "ios" ? 9 : undefined
72
+        '.multiline': {
73
+          paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined,
74
+          paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined
74 75
         }
75 76
       },
76 77
       flexDirection: null,
77 78
       minHeight: variables.inputHeightBase + 15
78 79
     },
79
-    ".inlineLabel": {
80
-      "NativeBase.Label": {
80
+    '.inlineLabel': {
81
+      'NativeBase.Label': {
81 82
         position: null,
82 83
         top: null,
83 84
         left: null,
@@ -87,43 +88,43 @@ export default (variables /*: * */ = variable) => {
87 88
         width: null,
88 89
         fontSize: variables.inputFontSize
89 90
       },
90
-      "NativeBase.Input": {
91
+      'NativeBase.Input': {
91 92
         paddingLeft: 5,
92 93
         fontSize: variables.inputFontSize
93 94
       },
94
-      flexDirection: "row"
95
+      flexDirection: 'row'
95 96
     },
96
-    "NativeBase.Label": {
97
+    'NativeBase.Label': {
97 98
       fontSize: variables.inputFontSize,
98 99
       color: variables.inputColorPlaceholder,
99 100
       paddingRight: 5
100 101
     },
101
-    "NativeBase.Icon": {
102
+    'NativeBase.Icon': {
102 103
       fontSize: 24,
103 104
       paddingRight: 8
104 105
     },
105
-    "NativeBase.IconNB": {
106
+    'NativeBase.IconNB': {
106 107
       fontSize: 24,
107 108
       paddingRight: 8
108 109
     },
109
-    "NativeBase.Input": {
110
-      ".multiline": {
110
+    'NativeBase.Input': {
111
+      '.multiline': {
111 112
         height: null
112 113
       },
113 114
       height: variables.inputHeightBase,
114 115
       color: variables.inputColor,
115 116
       flex: 1,
116
-      top: Platform.OS === "ios" ? 1.5 : undefined,
117
+      top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined,
117 118
       fontSize: variables.inputFontSize
118 119
     },
119
-    ".underline": {
120
-      "NativeBase.Input": {
120
+    '.underline': {
121
+      'NativeBase.Input': {
121 122
         paddingLeft: 15
122 123
       },
123
-      ".success": {
124
+      '.success': {
124 125
         borderColor: variables.inputSuccessBorderColor
125 126
       },
126
-      ".error": {
127
+      '.error': {
127 128
         borderColor: variables.inputErrorBorderColor
128 129
       },
129 130
       borderWidth: variables.borderWidth * 2,
@@ -132,33 +133,33 @@ export default (variables /*: * */ = variable) => {
132 133
       borderLeftWidth: 0,
133 134
       borderColor: variables.inputBorderColor
134 135
     },
135
-    ".regular": {
136
-      "NativeBase.Input": {
136
+    '.regular': {
137
+      'NativeBase.Input': {
137 138
         paddingLeft: 8
138 139
       },
139
-      "NativeBase.Icon": {
140
+      'NativeBase.Icon': {
140 141
         paddingLeft: 10
141 142
       },
142
-      ".success": {
143
+      '.success': {
143 144
         borderColor: variables.inputSuccessBorderColor
144 145
       },
145
-      ".error": {
146
+      '.error': {
146 147
         borderColor: variables.inputErrorBorderColor
147 148
       },
148 149
       borderWidth: variables.borderWidth * 2,
149 150
       borderColor: variables.inputBorderColor
150 151
     },
151
-    ".rounded": {
152
-      "NativeBase.Input": {
152
+    '.rounded': {
153
+      'NativeBase.Input': {
153 154
         paddingLeft: 8
154 155
       },
155
-      "NativeBase.Icon": {
156
+      'NativeBase.Icon': {
156 157
         paddingLeft: 10
157 158
       },
158
-      ".success": {
159
+      '.success': {
159 160
         borderColor: variables.inputSuccessBorderColor
160 161
       },
161
-      ".error": {
162
+      '.error': {
162 163
         borderColor: variables.inputErrorBorderColor
163 164
       },
164 165
       borderWidth: variables.borderWidth * 2,
@@ -166,21 +167,21 @@ export default (variables /*: * */ = variable) => {
166 167
       borderColor: variables.inputBorderColor
167 168
     },
168 169
 
169
-    ".success": {
170
-      "NativeBase.Icon": {
170
+    '.success': {
171
+      'NativeBase.Icon': {
171 172
         color: variables.inputSuccessBorderColor
172 173
       },
173
-      "NativeBase.IconNB": {
174
+      'NativeBase.IconNB': {
174 175
         color: variables.inputSuccessBorderColor
175 176
       },
176
-      ".rounded": {
177
+      '.rounded': {
177 178
         borderRadius: 30,
178 179
         borderColor: variables.inputSuccessBorderColor
179 180
       },
180
-      ".regular": {
181
+      '.regular': {
181 182
         borderColor: variables.inputSuccessBorderColor
182 183
       },
183
-      ".underline": {
184
+      '.underline': {
184 185
         borderWidth: variables.borderWidth * 2,
185 186
         borderTopWidth: 0,
186 187
         borderRightWidth: 0,
@@ -190,21 +191,21 @@ export default (variables /*: * */ = variable) => {
190 191
       borderColor: variables.inputSuccessBorderColor
191 192
     },
192 193
 
193
-    ".error": {
194
-      "NativeBase.Icon": {
194
+    '.error': {
195
+      'NativeBase.Icon': {
195 196
         color: variables.inputErrorBorderColor
196 197
       },
197
-      "NativeBase.IconNB": {
198
+      'NativeBase.IconNB': {
198 199
         color: variables.inputErrorBorderColor
199 200
       },
200
-      ".rounded": {
201
+      '.rounded': {
201 202
         borderRadius: 30,
202 203
         borderColor: variables.inputErrorBorderColor
203 204
       },
204
-      ".regular": {
205
+      '.regular': {
205 206
         borderColor: variables.inputErrorBorderColor
206 207
       },
207
-      ".underline": {
208
+      '.underline': {
208 209
         borderWidth: variables.borderWidth * 2,
209 210
         borderTopWidth: 0,
210 211
         borderRightWidth: 0,
@@ -213,15 +214,15 @@ export default (variables /*: * */ = variable) => {
213 214
       },
214 215
       borderColor: variables.inputErrorBorderColor
215 216
     },
216
-    ".disabled": {
217
-      "NativeBase.Icon": {
218
-        color: "#384850"
217
+    '.disabled': {
218
+      'NativeBase.Icon': {
219
+        color: '#384850'
219 220
       },
220
-      "NativeBase.IconNB": {
221
-        color: "#384850"
221
+      'NativeBase.IconNB': {
222
+        color: '#384850'
222 223
       }
223 224
     },
224
-    ".picker": {
225
+    '.picker': {
225 226
       marginLeft: 0
226 227
     },
227 228
 
@@ -230,9 +231,9 @@ export default (variables /*: * */ = variable) => {
230 231
     borderRightWidth: 0,
231 232
     borderLeftWidth: 0,
232 233
     borderColor: variables.inputBorderColor,
233
-    backgroundColor: "transparent",
234
-    flexDirection: "row",
235
-    alignItems: "center",
234
+    backgroundColor: 'transparent',
235
+    flexDirection: 'row',
236
+    alignItems: 'center',
236 237
     marginLeft: 2
237 238
   };
238 239
 

+ 2
- 4
native-base-theme/components/Label.js View File

@@ -1,10 +1,8 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const labelTheme = {
7
-    ".focused": {
5
+    '.focused': {
8 6
       width: 0
9 7
     },
10 8
     fontSize: 17

+ 2
- 4
native-base-theme/components/Left.js View File

@@ -1,12 +1,10 @@
1 1
 // @flow
2 2
 
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const leftTheme = {
7 5
     flex: 1,
8 6
     alignSelf: 'center',
9
-    alignItems: 'flex-start',
7
+    alignItems: 'flex-start'
10 8
   };
11 9
 
12 10
   return leftTheme;

+ 163
- 161
native-base-theme/components/ListItem.js View File

@@ -1,244 +1,246 @@
1 1
 // @flow
2 2
 
3
-import { Platform, PixelRatio } from "react-native";
3
+import { Platform, PixelRatio } from 'react-native';
4 4
 
5
-import pickerTheme from "./Picker";
6
-import variable from "./../variables/platform";
5
+import pickerTheme from './Picker';
6
+import variable from './../variables/platform';
7
+import { PLATFORM } from './../variables/commonColor';
7 8
 
8
-export default (variables /*: * */ = variable) => {
9
+export default (variables /* : * */ = variable) => {
9 10
   const platform = variables.platform;
10 11
   const selectedStyle = {
11
-    "NativeBase.Text": {
12
+    'NativeBase.Text': {
12 13
       color: variables.listItemSelected
13 14
     },
14
-    "NativeBase.Icon": {
15
+    'NativeBase.Icon': {
15 16
       color: variables.listItemSelected
16 17
     }
17 18
   };
18 19
 
19 20
   const listItemTheme = {
20
-    "NativeBase.InputGroup": {
21
-      "NativeBase.Icon": {
21
+    'NativeBase.InputGroup': {
22
+      'NativeBase.Icon': {
22 23
         paddingRight: 5
23 24
       },
24
-      "NativeBase.IconNB": {
25
+      'NativeBase.IconNB': {
25 26
         paddingRight: 5
26 27
       },
27
-      "NativeBase.Input": {
28
+      'NativeBase.Input': {
28 29
         paddingHorizontal: 5
29 30
       },
30 31
       flex: 1,
31 32
       borderWidth: null,
32 33
       margin: -10,
33
-      borderBottomColor: "transparent"
34
+      borderBottomColor: 'transparent'
34 35
     },
35
-    ".searchBar": {
36
-      "NativeBase.Item": {
37
-        "NativeBase.Icon": {
38
-          backgroundColor: "transparent",
36
+    '.searchBar': {
37
+      'NativeBase.Item': {
38
+        'NativeBase.Icon': {
39
+          backgroundColor: 'transparent',
39 40
           color: variables.dropdownLinkColor,
40 41
           fontSize:
41
-            platform === "ios"
42
+            platform === PLATFORM.IOS
42 43
               ? variables.iconFontSize - 10
43 44
               : variables.iconFontSize - 5,
44
-          alignItems: "center",
45
+          alignItems: 'center',
45 46
           marginTop: 2,
46 47
           paddingRight: 8
47 48
         },
48
-        "NativeBase.IconNB": {
49
-          backgroundColor: "transparent",
49
+        'NativeBase.IconNB': {
50
+          backgroundColor: 'transparent',
50 51
           color: null,
51
-          alignSelf: "center"
52
+          alignSelf: 'center'
52 53
         },
53
-        "NativeBase.Input": {
54
-          alignSelf: "center"
54
+        'NativeBase.Input': {
55
+          alignSelf: 'center'
55 56
         },
56
-        alignSelf: "center",
57
-        alignItems: "center",
58
-        justifyContent: "flex-start",
57
+        alignSelf: 'center',
58
+        alignItems: 'center',
59
+        justifyContent: 'flex-start',
59 60
         flex: 1,
60
-        height: platform === "ios" ? 30 : 40,
61
-        borderColor: "transparent",
62
-        backgroundColor: "#fff",
61
+        height: platform === PLATFORM.IOS ? 30 : 40,
62
+        borderColor: 'transparent',
63
+        backgroundColor: '#fff',
63 64
         borderRadius: 5
64 65
       },
65
-      "NativeBase.Button": {
66
-        ".transparent": {
67
-          "NativeBase.Text": {
68
-            fontWeight: "500"
66
+      'NativeBase.Button': {
67
+        '.transparent': {
68
+          'NativeBase.Text': {
69
+            fontWeight: '500'
69 70
           },
70 71
           paddingHorizontal: null,
71
-          paddingLeft: platform === "ios" ? 10 : null
72
+          paddingLeft: platform === PLATFORM.IOS ? 10 : null
72 73
         },
73
-        paddingHorizontal: platform === "ios" ? undefined : null,
74
-        width: platform === "ios" ? undefined : 0,
75
-        height: platform === "ios" ? undefined : 0
74
+        paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
75
+        width: platform === PLATFORM.IOS ? undefined : 0,
76
+        height: platform === PLATFORM.IOS ? undefined : 0
76 77
       },
77 78
       backgroundColor: variables.toolbarInputColor,
78 79
       padding: 10,
79 80
       marginLeft: null
80 81
     },
81
-    "NativeBase.CheckBox": {
82
+    'NativeBase.CheckBox': {
82 83
       marginLeft: -10,
83 84
       marginRight: 10
84 85
     },
85
-    ".first": {
86
-      ".itemHeader": {
86
+    '.first': {
87
+      '.itemHeader': {
87 88
         paddingTop: variables.listItemPadding + 3
88 89
       }
89 90
     },
90
-    ".itemHeader": {
91
-      ".first": {
91
+    '.itemHeader': {
92
+      '.first': {
92 93
         paddingTop: variables.listItemPadding + 3
93 94
       },
94
-      borderBottomWidth: platform === "ios" ? variables.borderWidth : null,
95
+      borderBottomWidth:
96
+        platform === PLATFORM.IOS ? variables.borderWidth : null,
95 97
       marginLeft: null,
96 98
       padding: variables.listItemPadding,
97 99
       paddingLeft: variables.listItemPadding + 5,
98 100
       paddingTop:
99
-        platform === "ios" ? variables.listItemPadding + 25 : undefined,
101
+        platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined,
100 102
       paddingBottom:
101
-        platform === "android" ? variables.listItemPadding + 20 : undefined,
102
-      flexDirection: "row",
103
+        platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined,
104
+      flexDirection: 'row',
103 105
       borderColor: variables.listBorderColor,
104
-      "NativeBase.Text": {
106
+      'NativeBase.Text': {
105 107
         fontSize: 14,
106
-        color: platform === "ios" ? undefined : variables.listNoteColor
108
+        color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor
107 109
       }
108 110
     },
109
-    ".itemDivider": {
111
+    '.itemDivider': {
110 112
       borderBottomWidth: null,
111 113
       marginLeft: null,
112 114
       padding: variables.listItemPadding,
113 115
       paddingLeft: variables.listItemPadding + 5,
114 116
       backgroundColor: variables.listDividerBg,
115
-      flexDirection: "row",
117
+      flexDirection: 'row',
116 118
       borderColor: variables.listBorderColor
117 119
     },
118
-    ".selected": {
119
-      "NativeBase.Left": {
120
+    '.selected': {
121
+      'NativeBase.Left': {
120 122
         ...selectedStyle
121 123
       },
122
-      "NativeBase.Body": {
124
+      'NativeBase.Body': {
123 125
         ...selectedStyle
124 126
       },
125
-      "NativeBase.Right": {
127
+      'NativeBase.Right': {
126 128
         ...selectedStyle
127 129
       },
128 130
       ...selectedStyle
129 131
     },
130
-    "NativeBase.Left": {
131
-      "NativeBase.Body": {
132
-        "NativeBase.Text": {
133
-          ".note": {
132
+    'NativeBase.Left': {
133
+      'NativeBase.Body': {
134
+        'NativeBase.Text': {
135
+          '.note': {
134 136
             color: variables.listNoteColor,
135
-            fontWeight: "200"
137
+            fontWeight: '200'
136 138
           },
137
-          fontWeight: "600"
139
+          fontWeight: '600'
138 140
         },
139 141
         marginLeft: 10,
140 142
         alignItems: null,
141 143
         alignSelf: null
142 144
       },
143
-      "NativeBase.Icon": {
145
+      'NativeBase.Icon': {
144 146
         width: variables.iconFontSize - 10,
145 147
         fontSize: variables.iconFontSize - 10
146 148
       },
147
-      "NativeBase.IconNB": {
149
+      'NativeBase.IconNB': {
148 150
         width: variables.iconFontSize - 10,
149 151
         fontSize: variables.iconFontSize - 10
150 152
       },
151
-      "NativeBase.Text": {
152
-        alignSelf: "center"
153
+      'NativeBase.Text': {
154
+        alignSelf: 'center'
153 155
       },
154
-      flexDirection: "row"
156
+      flexDirection: 'row'
155 157
     },
156
-    "NativeBase.Body": {
157
-      "NativeBase.Text": {
158
+    'NativeBase.Body': {
159
+      'NativeBase.Text': {
158 160
         marginHorizontal: variables.listItemPadding,
159
-        ".note": {
161
+        '.note': {
160 162
           color: variables.listNoteColor,
161
-          fontWeight: "200"
163
+          fontWeight: '200'
162 164
         }
163 165
       },
164 166
       alignSelf: null,
165 167
       alignItems: null
166 168
     },
167
-    "NativeBase.Right": {
168
-      "NativeBase.Badge": {
169
+    'NativeBase.Right': {
170
+      'NativeBase.Badge': {
169 171
         alignSelf: null
170 172
       },
171
-      "NativeBase.PickerNB": {
172
-        "NativeBase.Button": {
173
+      'NativeBase.PickerNB': {
174
+        'NativeBase.Button': {
173 175
           marginRight: -15,
174
-          "NativeBase.Text": {
176
+          'NativeBase.Text': {
175 177
             color: variables.topTabBarActiveTextColor
176 178
           }
177 179
         }
178 180
       },
179
-      "NativeBase.Button": {
181
+      'NativeBase.Button': {
180 182
         alignSelf: null,
181
-        ".transparent": {
182
-          "NativeBase.Text": {
183
+        '.transparent': {
184
+          'NativeBase.Text': {
183 185
             color: variables.topTabBarActiveTextColor
184 186
           }
185 187
         }
186 188
       },
187
-      "NativeBase.Icon": {
189
+      'NativeBase.Icon': {
188 190
         alignSelf: null,
189 191
         fontSize: variables.iconFontSize - 8,
190
-        color: "#c9c8cd"
192
+        color: '#c9c8cd'
191 193
       },
192
-      "NativeBase.IconNB": {
194
+      'NativeBase.IconNB': {
193 195
         alignSelf: null,
194 196
         fontSize: variables.iconFontSize - 8,
195
-        color: "#c9c8cd"
197
+        color: '#c9c8cd'
196 198
       },
197
-      "NativeBase.Text": {
198
-        ".note": {
199
+      'NativeBase.Text': {
200
+        '.note': {
199 201
           color: variables.listNoteColor,
200
-          fontWeight: "200"
202
+          fontWeight: '200'
201 203
         },
202 204
         alignSelf: null
203 205
       },
204
-      "NativeBase.Thumbnail": {
206
+      'NativeBase.Thumbnail': {
205 207
         alignSelf: null
206 208
       },
207
-      "NativeBase.Image": {
209
+      'NativeBase.Image': {
208 210
         alignSelf: null
209 211
       },
210
-      "NativeBase.Radio": {
212
+      'NativeBase.Radio': {
211 213
         alignSelf: null
212 214
       },
213
-      "NativeBase.Checkbox": {
215
+      'NativeBase.Checkbox': {
214 216
         alignSelf: null
215 217
       },
216
-      "NativeBase.Switch": {
218
+      'NativeBase.Switch': {
217 219
         alignSelf: null
218 220
       },
219 221
       padding: null,
220 222
       flex: 0.28
221 223
     },
222
-    "NativeBase.Text": {
223
-      ".note": {
224
+    'NativeBase.Text': {
225
+      '.note': {
224 226
         color: variables.listNoteColor,
225
-        fontWeight: "200"
227
+        fontWeight: '200'
226 228
       },
227
-      alignSelf: "center"
229
+      alignSelf: 'center'
228 230
     },
229
-    ".last": {
231
+    '.last': {
230 232
       marginLeft: -(variables.listItemPadding + 5),
231 233
       paddingLeft: (variables.listItemPadding + 5) * 2,
232 234
       top: 1
233 235
     },
234
-    ".avatar": {
235
-      "NativeBase.Left": {
236
+    '.avatar': {
237
+      'NativeBase.Left': {
236 238
         flex: 0,
237
-        alignSelf: "flex-start",
239
+        alignSelf: 'flex-start',
238 240
         paddingTop: 14
239 241
       },
240
-      "NativeBase.Body": {
241
-        "NativeBase.Text": {
242
+      'NativeBase.Body': {
243
+        'NativeBase.Text': {
242 244
           marginLeft: null
243 245
         },
244 246
         flex: 1,
@@ -247,24 +249,24 @@ export default (variables /*: * */ = variable) => {
247 249
         borderColor: variables.listBorderColor,
248 250
         marginLeft: variables.listItemPadding + 5
249 251
       },
250
-      "NativeBase.Right": {
251
-        "NativeBase.Text": {
252
-          ".note": {
252
+      'NativeBase.Right': {
253
+        'NativeBase.Text': {
254
+          '.note': {
253 255
             fontSize: variables.noteFontSize - 2
254 256
           }
255 257
         },
256 258
         flex: 0,
257 259
         paddingRight: variables.listItemPadding + 5,
258
-        alignSelf: "stretch",
260
+        alignSelf: 'stretch',
259 261
         paddingVertical: variables.listItemPadding,
260 262
         borderBottomWidth: variables.borderWidth,
261 263
         borderColor: variables.listBorderColor
262 264
       },
263
-      ".noBorder": {
264
-        "NativeBase.Body": {
265
+      '.noBorder': {
266
+        'NativeBase.Body': {
265 267
           borderBottomWidth: null
266 268
         },
267
-        "NativeBase.Right": {
269
+        'NativeBase.Right': {
268 270
           borderBottomWidth: null
269 271
         }
270 272
       },
@@ -272,12 +274,12 @@ export default (variables /*: * */ = variable) => {
272 274
       paddingVertical: null,
273 275
       paddingRight: null
274 276
     },
275
-    ".thumbnail": {
276
-      "NativeBase.Left": {
277
+    '.thumbnail': {
278
+      'NativeBase.Left': {
277 279
         flex: 0
278 280
       },
279
-      "NativeBase.Body": {
280
-        "NativeBase.Text": {
281
+      'NativeBase.Body': {
282
+        'NativeBase.Text': {
281 283
           marginLeft: null
282 284
         },
283 285
         flex: 1,
@@ -286,10 +288,10 @@ export default (variables /*: * */ = variable) => {
286 288
         borderColor: variables.listBorderColor,
287 289
         marginLeft: variables.listItemPadding + 5
288 290
       },
289
-      "NativeBase.Right": {
290
-        "NativeBase.Button": {
291
-          ".transparent": {
292
-            "NativeBase.Text": {
291
+      'NativeBase.Right': {
292
+        'NativeBase.Button': {
293
+          '.transparent': {
294
+            'NativeBase.Text': {
293 295
               fontSize: variables.listNoteSize,
294 296
               color: variables.sTabBarActiveTextColor
295 297
             }
@@ -297,18 +299,18 @@ export default (variables /*: * */ = variable) => {
297 299
           height: null
298 300
         },
299 301
         flex: 0,
300
-        justifyContent: "center",
301
-        alignSelf: "stretch",
302
+        justifyContent: 'center',
303
+        alignSelf: 'stretch',
302 304
         paddingRight: variables.listItemPadding + 5,
303 305
         paddingVertical: variables.listItemPadding + 5,
304 306
         borderBottomWidth: variables.borderWidth,
305 307
         borderColor: variables.listBorderColor
306 308
       },
307
-      ".noBorder": {
308
-        "NativeBase.Body": {
309
+      '.noBorder': {
310
+        'NativeBase.Body': {
309 311
           borderBottomWidth: null
310 312
         },
311
-        "NativeBase.Right": {
313
+        'NativeBase.Right': {
312 314
           borderBottomWidth: null
313 315
         }
314 316
       },
@@ -316,103 +318,103 @@ export default (variables /*: * */ = variable) => {
316 318
       paddingVertical: null,
317 319
       paddingRight: null
318 320
     },
319
-    ".icon": {
320
-      ".last": {
321
-        "NativeBase.Body": {
321
+    '.icon': {
322
+      '.last': {
323
+        'NativeBase.Body': {
322 324
           borderBottomWidth: null
323 325
         },
324
-        "NativeBase.Right": {
326
+        'NativeBase.Right': {
325 327
           borderBottomWidth: null
326 328
         },
327 329
         borderBottomWidth: variables.borderWidth,
328 330
         borderColor: variables.listBorderColor
329 331
       },
330
-      "NativeBase.Left": {
331
-        "NativeBase.Button": {
332
-          "NativeBase.IconNB": {
332
+      'NativeBase.Left': {
333
+        'NativeBase.Button': {
334
+          'NativeBase.IconNB': {
333 335
             marginHorizontal: null,
334 336
             fontSize: variables.iconFontSize - 5
335 337
           },
336
-          "NativeBase.Icon": {
338
+          'NativeBase.Icon': {
337 339
             marginHorizontal: null,
338 340
             fontSize: variables.iconFontSize - 8
339 341
           },
340
-          alignSelf: "center",
342
+          alignSelf: 'center',
341 343
           height: 29,
342 344
           width: 29,
343 345
           borderRadius: 6,
344 346
           paddingVertical: null,
345 347
           paddingHorizontal: null,
346
-          alignItems: "center",
347
-          justifyContent: "center"
348
+          alignItems: 'center',
349
+          justifyContent: 'center'
348 350
         },
349
-        "NativeBase.Icon": {
351
+        'NativeBase.Icon': {
350 352
           width: variables.iconFontSize - 5,
351 353
           fontSize: variables.iconFontSize - 2
352 354
         },
353
-        "NativeBase.IconNB": {
355
+        'NativeBase.IconNB': {
354 356
           width: variables.iconFontSize - 5,
355 357
           fontSize: variables.iconFontSize - 2
356 358
         },
357 359
         paddingRight: variables.listItemPadding + 5,
358 360
         flex: 0,
359 361
         height: 44,
360
-        justifyContent: "center",
361
-        alignItems: "center"
362
+        justifyContent: 'center',
363
+        alignItems: 'center'
362 364
       },
363
-      "NativeBase.Body": {
364
-        "NativeBase.Text": {
365
+      'NativeBase.Body': {
366
+        'NativeBase.Text': {
365 367
           marginLeft: null,
366 368
           fontSize: 17
367 369
         },
368 370
         flex: 1,
369 371
         height: 44,
370
-        justifyContent: "center",
372
+        justifyContent: 'center',
371 373
         borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
372 374
         borderColor: variables.listBorderColor
373 375
       },
374
-      "NativeBase.Right": {
375
-        "NativeBase.Text": {
376
-          textAlign: "center",
377
-          color: "#8F8E95",
376
+      'NativeBase.Right': {
377
+        'NativeBase.Text': {
378
+          textAlign: 'center',
379
+          color: '#8F8E95',
378 380
           fontSize: 17
379 381
         },
380
-        "NativeBase.IconNB": {
381
-          color: "#C8C7CC",
382
+        'NativeBase.IconNB': {
383
+          color: '#C8C7CC',
382 384
           fontSize: variables.iconFontSize - 10,
383
-          alignSelf: "center",
385
+          alignSelf: 'center',
384 386
           paddingLeft: 10,
385 387
           paddingTop: 3
386 388
         },
387
-        "NativeBase.Icon": {
388
-          color: "#C8C7CC",
389
+        'NativeBase.Icon': {
390
+          color: '#C8C7CC',
389 391
           fontSize: variables.iconFontSize - 10,
390
-          alignSelf: "center",
392
+          alignSelf: 'center',
391 393
           paddingLeft: 10,
392 394
           paddingTop: 3
393 395
         },
394
-        "NativeBase.Switch": {
395
-          marginRight: Platform.OS === "ios" ? undefined : -5,
396
+        'NativeBase.Switch': {
397
+          marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5,
396 398
           alignSelf: null
397 399
         },
398
-        "NativeBase.PickerNB": {
400
+        'NativeBase.PickerNB': {
399 401
           ...pickerTheme()
400 402
         },
401
-        flexDirection: "row",
402
-        alignItems: "center",
403
+        flexDirection: 'row',
404
+        alignItems: 'center',
403 405
         flex: 0,
404
-        alignSelf: "stretch",
406
+        alignSelf: 'stretch',
405 407
         height: 44,
406
-        justifyContent: "flex-end",
408
+        justifyContent: 'flex-end',
407 409
         borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
408 410
         borderColor: variables.listBorderColor,
409 411
         paddingRight: variables.listItemPadding + 5
410 412
       },
411
-      ".noBorder": {
412
-        "NativeBase.Body": {
413
+      '.noBorder': {
414
+        'NativeBase.Body': {
413 415
           borderBottomWidth: null
414 416
         },
415
-        "NativeBase.Right": {
417
+        'NativeBase.Right': {
416 418
           borderBottomWidth: null
417 419
         }
418 420
       },
@@ -420,18 +422,18 @@ export default (variables /*: * */ = variable) => {
420 422
       paddingVertical: null,
421 423
       paddingRight: null,
422 424
       height: 44,
423
-      justifyContent: "center"
425
+      justifyContent: 'center'
424 426
     },
425
-    ".noBorder": {
427
+    '.noBorder': {
426 428
       borderBottomWidth: null
427 429
     },
428
-    ".noIndent": {
430
+    '.noIndent': {
429 431
       marginLeft: null,
430 432
       padding: variables.listItemPadding,
431 433
       paddingLeft: variables.listItemPadding + 6
432 434
     },
433
-    alignItems: "center",
434
-    flexDirection: "row",
435
+    alignItems: 'center',
436
+    flexDirection: 'row',
435 437
     paddingRight: variables.listItemPadding + 6,
436 438
     paddingVertical: variables.listItemPadding + 3,
437 439
     marginLeft: variables.listItemPadding + 6,

+ 3
- 5
native-base-theme/components/Picker.android.js View File

@@ -1,11 +1,9 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const pickerTheme = {
7
-    ".note": {
8
-      color: "#8F8E95"
5
+    '.note': {
6
+      color: '#8F8E95'
9 7
     },
10 8
     // width: 90,
11 9
     marginRight: -4,

+ 1
- 3
native-base-theme/components/Picker.ios.js View File

@@ -1,8 +1,6 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const pickerTheme = {};
7 5
 
8 6
   return pickerTheme;

+ 3
- 5
native-base-theme/components/Picker.js View File

@@ -1,11 +1,9 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const pickerTheme = {
7
-    ".note": {
8
-      color: "#8F8E95"
5
+    '.note': {
6
+      color: '#8F8E95'
9 7
     },
10 8
     // width: 90,
11 9
     marginRight: -4,

+ 19
- 16
native-base-theme/components/Radio.js View File

@@ -1,26 +1,29 @@
1 1
 // @flow
2 2
 
3
-import { Platform } from "react-native";
3
+import { Platform } from 'react-native';
4 4
 
5
-import variable from "./../variables/platform";
5
+import variable from './../variables/platform';
6
+import { PLATFORM } from './../variables/commonColor';
6 7
 
7
-export default (variables /*: * */ = variable) => {
8
+export default (variables /* : * */ = variable) => {
8 9
   const radioTheme = {
9
-    ".selected": {
10
-      "NativeBase.IconNB": {
11
-        color: Platform.OS === "ios"
12
-          ? variables.radioColor
13
-          : variables.radioSelectedColorAndroid,
14
-        lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight,
15
-        height: Platform.OS === "ios" ? 20 : undefined
10
+    '.selected': {
11
+      'NativeBase.IconNB': {
12
+        color:
13
+          Platform.OS === PLATFORM.IOS
14
+            ? variables.radioColor
15
+            : variables.radioSelectedColorAndroid,
16
+        lineHeight:
17
+          Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight,
18
+        height: Platform.OS === PLATFORM.IOS ? 20 : undefined
16 19
       }
17 20
     },
18
-    "NativeBase.IconNB": {
19
-      color: Platform.OS === "ios" ? "transparent" : undefined,
20
-      lineHeight: Platform.OS === "ios"
21
-        ? undefined
22
-        : variables.radioBtnLineHeight,
23
-      fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize
21
+    'NativeBase.IconNB': {
22
+      color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined,
23
+      lineHeight:
24
+        Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight,
25
+      fontSize:
26
+        Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize
24 27
     }
25 28
   };
26 29
 

+ 3
- 5
native-base-theme/components/Right.js View File

@@ -1,15 +1,13 @@
1 1
 // @flow
2 2
 
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const rightTheme = {
7 5
     'NativeBase.Button': {
8
-      alignSelf: null,
6
+      alignSelf: null
9 7
     },
10 8
     flex: 1,
11 9
     alignSelf: 'center',
12
-    alignItems: 'flex-end',
10
+    alignItems: 'flex-end'
13 11
   };
14 12
 
15 13
   return rightTheme;

+ 19
- 18
native-base-theme/components/Segment.js View File

@@ -1,50 +1,51 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4
+import { PLATFORM } from './../variables/commonColor';
4 5
 
5
-export default (variables /*: * */ = variable) => {
6
+export default (variables /* : * */ = variable) => {
6 7
   const platform = variables.platform;
7 8
 
8 9
   const segmentTheme = {
9 10
     height: 45,
10 11
     borderColor: variables.segmentBorderColorMain,
11
-    flexDirection: "row",
12
-    justifyContent: "center",
12
+    flexDirection: 'row',
13
+    justifyContent: 'center',
13 14
     backgroundColor: variables.segmentBackgroundColor,
14
-    "NativeBase.Button": {
15
-      alignSelf: "center",
15
+    'NativeBase.Button': {
16
+      alignSelf: 'center',
16 17
       borderRadius: 0,
17 18
       paddingTop: 3,
18 19
       paddingBottom: 3,
19 20
       height: 30,
20
-      backgroundColor: "transparent",
21
+      backgroundColor: 'transparent',
21 22
       borderWidth: 1,
22 23
       borderLeftWidth: 0,
23 24
       borderColor: variables.segmentBorderColor,
24 25
       elevation: 0,
25
-      ".active": {
26
+      '.active': {
26 27
         backgroundColor: variables.segmentActiveBackgroundColor,
27
-        "NativeBase.Text": {
28
+        'NativeBase.Text': {
28 29
           color: variables.segmentActiveTextColor
29 30
         },
30
-        "NativeBase.Icon": {
31
+        'NativeBase.Icon': {
31 32
           color: variables.segmentActiveTextColor
32 33
         }
33 34
       },
34
-      ".first": {
35
-        borderTopLeftRadius: platform === "ios" ? 5 : undefined,
36
-        borderBottomLeftRadius: platform === "ios" ? 5 : undefined,
35
+      '.first': {
36
+        borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
37
+        borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
37 38
         borderLeftWidth: 1
38 39
       },
39
-      ".last": {
40
-        borderTopRightRadius: platform === "ios" ? 5 : undefined,
41
-        borderBottomRightRadius: platform === "ios" ? 5 : undefined
40
+      '.last': {
41
+        borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined,
42
+        borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined
42 43
       },
43
-      "NativeBase.Text": {
44
+      'NativeBase.Text': {
44 45
         color: variables.segmentTextColor,
45 46
         fontSize: 14
46 47
       },
47
-      "NativeBase.Icon": {
48
+      'NativeBase.Icon': {
48 49
         fontSize: 22,
49 50
         paddingTop: 0,
50 51
         color: variables.segmentTextColor

+ 10
- 10
native-base-theme/components/Separator.js View File

@@ -2,7 +2,7 @@
2 2
 
3 3
 import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const theme = {
7 7
     '.group': {
8 8
       height: 50,
@@ -11,38 +11,38 @@ export default (variables /*: * */ = variable) => {
11 11
       '.bordered': {
12 12
         height: 50,
13 13
         paddingVertical: variables.listItemPadding - 8,
14
-        paddingTop: variables.listItemPadding + 12,
15
-      },
14
+        paddingTop: variables.listItemPadding + 12
15
+      }
16 16
     },
17 17
     '.bordered': {
18 18
       '.noTopBorder': {
19
-        borderTopWidth: 0,
19
+        borderTopWidth: 0
20 20
       },
21 21
       '.noBottomBorder': {
22
-        borderBottomWidth: 0,
22
+        borderBottomWidth: 0
23 23
       },
24 24
       height: 35,
25 25
       paddingTop: variables.listItemPadding + 2,
26 26
       paddingBottom: variables.listItemPadding,
27 27
       borderBottomWidth: variables.borderWidth,
28 28
       borderTopWidth: variables.borderWidth,
29
-      borderColor: variables.listBorderColor,
29
+      borderColor: variables.listBorderColor
30 30
     },
31 31
     'NativeBase.Text': {
32 32
       fontSize: variables.tabBarTextSize - 2,
33
-      color: '#777',
33
+      color: '#777'
34 34
     },
35 35
     '.noTopBorder': {
36
-      borderTopWidth: 0,
36
+      borderTopWidth: 0
37 37
     },
38 38
     '.noBottomBorder': {
39
-      borderBottomWidth: 0,
39
+      borderBottomWidth: 0
40 40
     },
41 41
     height: 38,
42 42
     backgroundColor: '#F0EFF5',
43 43
     flex: 1,
44 44
     justifyContent: 'center',
45
-    paddingLeft: variables.listItemPadding + 5,
45
+    paddingLeft: variables.listItemPadding + 5
46 46
   };
47 47
 
48 48
   return theme;

+ 1
- 3
native-base-theme/components/Spinner.js View File

@@ -1,8 +1,6 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const spinnerTheme = {
7 5
     height: 80
8 6
   };

+ 7
- 6
native-base-theme/components/Subtitle.js View File

@@ -1,17 +1,18 @@
1 1
 // @flow
2 2
 
3
-import { Platform } from "react-native";
3
+import { Platform } from 'react-native';
4 4
 
5
-import variable from "./../variables/platform";
5
+import variable from './../variables/platform';
6
+import { PLATFORM } from './../variables/commonColor';
6 7
 
7
-export default (variables /*: * */ = variable) => {
8
+export default (variables /* : * */ = variable) => {
8 9
   const subtitleTheme = {
9 10
     fontSize: variables.subTitleFontSize,
10 11
     fontFamily: variables.titleFontfamily,
11 12
     color: variables.subtitleColor,
12
-    textAlign: "center",
13
-    paddingLeft: Platform.OS === "ios" ? 4 : 0,
14
-    marginLeft: Platform.OS === "ios" ? undefined : -3
13
+    textAlign: 'center',
14
+    paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
15
+    marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3
15 16
   };
16 17
 
17 18
   return subtitleTheme;

+ 25
- 27
native-base-theme/components/SwipeRow.js View File

@@ -1,47 +1,45 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const swipeRowTheme = {
7
-    "NativeBase.ListItem": {
8
-      ".list": {
9
-        backgroundColor: "#FFF",
5
+    'NativeBase.ListItem': {
6
+      '.list': {
7
+        backgroundColor: '#FFF'
10 8
       },
11
-      marginLeft: 0,
9
+      marginLeft: 0
12 10
     },
13
-    "NativeBase.Left": {
11
+    'NativeBase.Left': {
14 12
       flex: 0,
15 13
       alignSelf: null,
16 14
       alignItems: null,
17
-      "NativeBase.Button": {
15
+      'NativeBase.Button': {
18 16
         flex: 1,
19
-        alignItems: "center",
20
-        justifyContent: "center",
21
-        alignSelf: "stretch",
22
-        borderRadius: 0,
23
-      },
17
+        alignItems: 'center',
18
+        justifyContent: 'center',
19
+        alignSelf: 'stretch',
20
+        borderRadius: 0
21
+      }
24 22
     },
25
-    "NativeBase.Right": {
23
+    'NativeBase.Right': {
26 24
       flex: 0,
27 25
       alignSelf: null,
28 26
       alignItems: null,
29
-      "NativeBase.Button": {
27
+      'NativeBase.Button': {
30 28
         flex: 1,
31
-        alignItems: "center",
32
-        justifyContent: "center",
33
-        alignSelf: "stretch",
34
-        borderRadius: 0,
35
-      },
29
+        alignItems: 'center',
30
+        justifyContent: 'center',
31
+        alignSelf: 'stretch',
32
+        borderRadius: 0
33
+      }
36 34
     },
37
-    "NativeBase.Button": {
35
+    'NativeBase.Button': {
38 36
       flex: 1,
39 37
       height: null,
40
-      alignItems: "center",
41
-      justifyContent: "center",
42
-      alignSelf: "stretch",
43
-      borderRadius: 0,
44
-    },
38
+      alignItems: 'center',
39
+      justifyContent: 'center',
40
+      alignSelf: 'stretch',
41
+      borderRadius: 0
42
+    }
45 43
   };
46 44
 
47 45
   return swipeRowTheme;

+ 2
- 4
native-base-theme/components/Switch.js View File

@@ -1,10 +1,8 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const switchTheme = {
7
-    marginVertical: -5,
5
+    marginVertical: -5
8 6
   };
9 7
 
10 8
   return switchTheme;

+ 2
- 4
native-base-theme/components/Tab.js View File

@@ -1,11 +1,9 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const tabTheme = {
7 5
     flex: 1,
8
-    backgroundColor: "#FFF"
6
+    backgroundColor: '#FFF'
9 7
   };
10 8
 
11 9
   return tabTheme;

+ 22
- 22
native-base-theme/components/TabBar.js View File

@@ -1,55 +1,55 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const tabBarTheme = {
7
-    ".tabIcon": {
7
+    '.tabIcon': {
8 8
       height: undefined
9 9
     },
10
-    ".vertical": {
10
+    '.vertical': {
11 11
       height: 60
12 12
     },
13
-    "NativeBase.Button": {
14
-      ".transparent": {
15
-        "NativeBase.Text": {
13
+    'NativeBase.Button': {
14
+      '.transparent': {
15
+        'NativeBase.Text': {
16 16
           fontSize: variables.tabFontSize,
17 17
           color: variables.sTabBarActiveTextColor,
18
-          fontWeight: "400"
18
+          fontWeight: '400'
19 19
         },
20
-        "NativeBase.IconNB": {
20
+        'NativeBase.IconNB': {
21 21
           color: variables.sTabBarActiveTextColor
22 22
         }
23 23
       },
24
-      "NativeBase.IconNB": {
24
+      'NativeBase.IconNB': {
25 25
         color: variables.sTabBarActiveTextColor
26 26
       },
27
-      "NativeBase.Text": {
27
+      'NativeBase.Text': {
28 28
         fontSize: variables.tabFontSize,
29 29
         color: variables.sTabBarActiveTextColor,
30
-        fontWeight: "400"
30
+        fontWeight: '400'
31 31
       },
32
-      ".isTabActive": {
33
-        "NativeBase.Text": {
34
-          fontWeight: "900"
32
+      '.isTabActive': {
33
+        'NativeBase.Text': {
34
+          fontWeight: '900'
35 35
         }
36 36
       },
37 37
       flex: 1,
38
-      alignSelf: "stretch",
39
-      alignItems: "center",
40
-      justifyContent: "center",
38
+      alignSelf: 'stretch',
39
+      alignItems: 'center',
40
+      justifyContent: 'center',
41 41
       borderRadius: null,
42
-      borderBottomColor: "transparent",
42
+      borderBottomColor: 'transparent',
43 43
       backgroundColor: variables.tabBgColor
44 44
     },
45 45
     height: 45,
46
-    flexDirection: "row",
47
-    justifyContent: "space-around",
46
+    flexDirection: 'row',
47
+    justifyContent: 'space-around',
48 48
     borderWidth: 1,
49 49
     borderTopWidth: 0,
50 50
     borderLeftWidth: 0,
51 51
     borderRightWidth: 0,
52
-    borderBottomColor: "#ccc",
52
+    borderBottomColor: '#ccc',
53 53
     backgroundColor: variables.tabBgColor
54 54
   };
55 55
 

+ 13
- 13
native-base-theme/components/TabContainer.js View File

@@ -1,24 +1,24 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
4
-import { Platform } from "react-native";
3
+import { Platform } from 'react-native';
5 4
 
6
-export default (variables /*: * */ = variable) => {
5
+import variable from './../variables/platform';
6
+import { PLATFORM } from './../variables/commonColor';
7
+
8
+export default (variables /* : * */ = variable) => {
7 9
   const platformStyle = variables.platformStyle;
8
-  const platform = variables.platform;
9 10
 
10 11
   const tabContainerTheme = {
11 12
     elevation: 3,
12 13
     height: 50,
13
-    flexDirection: "row",
14
-    shadowColor: platformStyle === "material" ? "#000" : undefined,
15
-    shadowOffset: platformStyle === "material"
16
-      ? { width: 0, height: 2 }
17
-      : undefined,
18
-    shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
19
-    shadowRadius: platformStyle === "material" ? 1.2 : undefined,
20
-    justifyContent: "space-around",
21
-    borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0,
14
+    flexDirection: 'row',
15
+    shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
16
+    shadowOffset:
17
+      platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
18
+    shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
19
+    shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
20
+    justifyContent: 'space-around',
21
+    borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0,
22 22
     borderColor: variables.topTabBarBorderColor
23 23
   };
24 24
 

+ 16
- 15
native-base-theme/components/TabHeading.js View File

@@ -1,35 +1,36 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4
+import { PLATFORM } from './../variables/commonColor';
4 5
 
5
-export default (variables /*: * */ = variable) => {
6
+export default (variables /* : * */ = variable) => {
6 7
   const platform = variables.platform;
7 8
 
8 9
   const tabHeadingTheme = {
9
-    flexDirection: "row",
10
+    flexDirection: 'row',
10 11
     backgroundColor: variables.tabDefaultBg,
11 12
     flex: 1,
12
-    alignItems: "center",
13
-    justifyContent: "center",
14
-    ".scrollable": {
13
+    alignItems: 'center',
14
+    justifyContent: 'center',
15
+    '.scrollable': {
15 16
       paddingHorizontal: 20,
16
-      flex: platform === "android" ? 0 : 1,
17
-      minWidth: platform === "android" ? undefined : 60
17
+      flex: platform === PLATFORM.ANDROID ? 0 : 1,
18
+      minWidth: platform === PLATFORM.ANDROID ? undefined : 60
18 19
     },
19
-    "NativeBase.Text": {
20
+    'NativeBase.Text': {
20 21
       color: variables.topTabBarTextColor,
21 22
       marginHorizontal: 7
22 23
     },
23
-    "NativeBase.Icon": {
24
+    'NativeBase.Icon': {
24 25
       color: variables.topTabBarTextColor,
25
-      fontSize: platform === "ios" ? 26 : undefined
26
+      fontSize: platform === PLATFORM.IOS ? 26 : undefined
26 27
     },
27
-    ".active": {
28
-      "NativeBase.Text": {
28
+    '.active': {
29
+      'NativeBase.Text': {
29 30
         color: variables.topTabBarActiveTextColor,
30
-        fontWeight: "600"
31
+        fontWeight: '600'
31 32
       },
32
-      "NativeBase.Icon": {
33
+      'NativeBase.Icon': {
33 34
         color: variables.topTabBarActiveTextColor
34 35
       }
35 36
     }

+ 4
- 4
native-base-theme/components/Text.js View File

@@ -1,14 +1,14 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const textTheme = {
7 7
     fontSize: variables.DefaultFontSize,
8 8
     fontFamily: variables.fontFamily,
9 9
     color: variables.textColor,
10
-    ".note": {
11
-      color: "#a7a7a7",
10
+    '.note': {
11
+      color: '#a7a7a7',
12 12
       fontSize: variables.noteFontSize
13 13
     }
14 14
   };

+ 5
- 5
native-base-theme/components/Textarea.js View File

@@ -1,15 +1,15 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const textAreaTheme = {
7
-    ".underline": {
7
+    '.underline': {
8 8
       borderBottomWidth: variables.borderWidth,
9 9
       marginTop: 5,
10 10
       borderColor: variables.inputBorderColor
11 11
     },
12
-    ".bordered": {
12
+    '.bordered': {
13 13
       borderWidth: 1,
14 14
       marginTop: 5,
15 15
       borderColor: variables.inputBorderColor
@@ -18,7 +18,7 @@ export default (variables /*: * */ = variable) => {
18 18
     paddingLeft: 10,
19 19
     paddingRight: 5,
20 20
     fontSize: 15,
21
-    textAlignVertical: "top"
21
+    textAlignVertical: 'top'
22 22
   };
23 23
 
24 24
   return textAreaTheme;

+ 9
- 11
native-base-theme/components/Thumbnail.js View File

@@ -1,41 +1,39 @@
1 1
 // @flow
2 2
 
3
-import variable from './../variables/platform';
4
-
5
-export default (variables /*: * */ = variable) => {
3
+export default () => {
6 4
   const thumbnailTheme = {
7 5
     '.square': {
8 6
       borderRadius: 0,
9 7
       '.small': {
10 8
         width: 36,
11 9
         height: 36,
12
-        borderRadius: 0,
10
+        borderRadius: 0
13 11
       },
14 12
       '.large': {
15 13
         width: 80,
16 14
         height: 80,
17
-        borderRadius: 0,
18
-      },
15
+        borderRadius: 0
16
+      }
19 17
     },
20 18
     '.small': {
21 19
       width: 36,
22 20
       height: 36,
23 21
       borderRadius: 18,
24 22
       '.square': {
25
-        borderRadius: 0,
26
-      },
23
+        borderRadius: 0
24
+      }
27 25
     },
28 26
     '.large': {
29 27
       width: 80,
30 28
       height: 80,
31 29
       borderRadius: 40,
32 30
       '.square': {
33
-        borderRadius: 0,
34
-      },
31
+        borderRadius: 0
32
+      }
35 33
     },
36 34
     width: 56,
37 35
     height: 56,
38
-    borderRadius: 28,
36
+    borderRadius: 28
39 37
   };
40 38
 
41 39
   return thumbnailTheme;

+ 8
- 7
native-base-theme/components/Title.js View File

@@ -1,18 +1,19 @@
1 1
 // @flow
2 2
 
3
-import { Platform } from "react-native";
3
+import { Platform } from 'react-native';
4 4
 
5
-import variable from "./../variables/platform";
5
+import variable from './../variables/platform';
6
+import { PLATFORM } from './../variables/commonColor';
6 7
 
7
-export default (variables /*: * */ = variable) => {
8
+export default (variables /* : * */ = variable) => {
8 9
   const titleTheme = {
9 10
     fontSize: variables.titleFontSize,
10 11
     fontFamily: variables.titleFontfamily,
11 12
     color: variables.titleFontColor,
12
-    fontWeight: Platform.OS === "ios" ? "700" : undefined,
13
-    textAlign: "center",
14
-    paddingLeft: Platform.OS === "ios" ? 4 : 0,
15
-    marginLeft: Platform.OS === "ios" ? undefined : -3,
13
+    fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined,
14
+    textAlign: 'center',
15
+    paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
16
+    marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3,
16 17
     paddingTop: 1
17 18
   };
18 19
 

+ 16
- 15
native-base-theme/components/Toast.js View File

@@ -1,36 +1,37 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4
+import { PLATFORM } from './../variables/commonColor';
4 5
 
5
-export default (variables /*: * */ = variable) => {
6
+export default (variables /* : * */ = variable) => {
6 7
   const platform = variables.platform;
7 8
 
8 9
   const toastTheme = {
9
-    ".danger": {
10
+    '.danger': {
10 11
       backgroundColor: variables.brandDanger
11 12
     },
12
-    ".warning": {
13
+    '.warning': {
13 14
       backgroundColor: variables.brandWarning
14 15
     },
15
-    ".success": {
16
+    '.success': {
16 17
       backgroundColor: variables.brandSuccess
17 18
     },
18
-    backgroundColor: "rgba(0,0,0,0.8)",
19
-    borderRadius: platform === "ios" ? 5 : 0,
20
-    flexDirection: "row",
21
-    justifyContent: "space-between",
22
-    alignItems: "center",
19
+    backgroundColor: 'rgba(0,0,0,0.8)',
20
+    borderRadius: platform === PLATFORM.IOS ? 5 : 0,
21
+    flexDirection: 'row',
22
+    justifyContent: 'space-between',
23
+    alignItems: 'center',
23 24
     padding: 10,
24 25
     minHeight: 50,
25
-    "NativeBase.Text": {
26
-      color: "#fff",
26
+    'NativeBase.Text': {
27
+      color: '#fff',
27 28
       flex: 1
28 29
     },
29
-    "NativeBase.Button": {
30
-      backgroundColor: "transparent",
30
+    'NativeBase.Button': {
31
+      backgroundColor: 'transparent',
31 32
       height: 30,
32 33
       elevation: 0,
33
-      "NativeBase.Text": {
34
+      'NativeBase.Text': {
34 35
         fontSize: 14
35 36
       }
36 37
     }

+ 3
- 3
native-base-theme/components/View.js View File

@@ -1,10 +1,10 @@
1 1
 // @flow
2 2
 
3
-import variable from "./../variables/platform";
3
+import variable from './../variables/platform';
4 4
 
5
-export default (variables /*: * */ = variable) => {
5
+export default (variables /* : * */ = variable) => {
6 6
   const viewTheme = {
7
-    ".padder": {
7
+    '.padder': {
8 8
       padding: variables.contentPadding
9 9
     }
10 10
   };

+ 103
- 96
native-base-theme/components/index.js View File

@@ -1,216 +1,218 @@
1
+/* eslint-disable no-param-reassign */
1 2
 // @flow
2 3
 
3
-import _ from "lodash";
4
-import bodyTheme from "./Body";
5
-import leftTheme from "./Left";
6
-import rightTheme from "./Right";
7
-import headerTheme from "./Header";
8
-import switchTheme from "./Switch";
9
-import thumbnailTheme from "./Thumbnail";
10
-import containerTheme from "./Container";
11
-import contentTheme from "./Content";
12
-import buttonTheme from "./Button";
13
-import titleTheme from "./Title";
14
-import subtitleTheme from "./Subtitle";
15
-import inputGroupTheme from "./InputGroup";
16
-import badgeTheme from "./Badge";
17
-import checkBoxTheme from "./CheckBox";
18
-import cardTheme from "./Card";
19
-import radioTheme from "./Radio";
20
-import h3Theme from "./H3";
21
-import h2Theme from "./H2";
22
-import h1Theme from "./H1";
23
-import footerTheme from "./Footer";
24
-import footerTabTheme from "./FooterTab";
25
-import fabTheme from "./Fab";
26
-import itemTheme from "./Item";
27
-import labelTheme from "./Label";
28
-import textAreaTheme from "./Textarea";
29
-import textTheme from "./Text";
30
-import toastTheme from "./Toast";
31
-import tabTheme from "./Tab";
32
-import tabBarTheme from "./TabBar";
33
-import tabContainerTheme from "./TabContainer";
34
-import viewTheme from "./View";
35
-import tabHeadingTheme from "./TabHeading";
36
-import iconTheme from "./Icon";
37
-import inputTheme from "./Input";
38
-import swipeRowTheme from "./SwipeRow";
39
-import segmentTheme from "./Segment";
40
-import spinnerTheme from "./Spinner";
41
-import cardItemTheme from "./CardItem";
42
-import listItemTheme from "./ListItem";
43
-import formTheme from "./Form";
44
-import separatorTheme from "./Separator";
45
-import pickerTheme from "./Picker"
46
-import variable from "./../variables/platform";
47
-
48
-export default (variables /*: * */ = variable) => {
4
+import _ from 'lodash';
5
+
6
+import bodyTheme from './Body';
7
+import leftTheme from './Left';
8
+import rightTheme from './Right';
9
+import headerTheme from './Header';
10
+import switchTheme from './Switch';
11
+import thumbnailTheme from './Thumbnail';
12
+import containerTheme from './Container';
13
+import contentTheme from './Content';
14
+import buttonTheme from './Button';
15
+import titleTheme from './Title';
16
+import subtitleTheme from './Subtitle';
17
+import inputGroupTheme from './InputGroup';
18
+import badgeTheme from './Badge';
19
+import checkBoxTheme from './CheckBox';
20
+import cardTheme from './Card';
21
+import radioTheme from './Radio';
22
+import h3Theme from './H3';
23
+import h2Theme from './H2';
24
+import h1Theme from './H1';
25
+import footerTheme from './Footer';
26
+import footerTabTheme from './FooterTab';
27
+import fabTheme from './Fab';
28
+import itemTheme from './Item';
29
+import labelTheme from './Label';
30
+import textAreaTheme from './Textarea';
31
+import textTheme from './Text';
32
+import toastTheme from './Toast';
33
+import tabTheme from './Tab';
34
+import tabBarTheme from './TabBar';
35
+import tabContainerTheme from './TabContainer';
36
+import viewTheme from './View';
37
+import tabHeadingTheme from './TabHeading';
38
+import iconTheme from './Icon';
39
+import inputTheme from './Input';
40
+import swipeRowTheme from './SwipeRow';
41
+import segmentTheme from './Segment';
42
+import spinnerTheme from './Spinner';
43
+import cardItemTheme from './CardItem';
44
+import listItemTheme from './ListItem';
45
+import formTheme from './Form';
46
+import separatorTheme from './Separator';
47
+import pickerTheme from './Picker';
48
+import variable from './../variables/platform';
49
+
50
+export default (variables /* : * */ = variable) => {
49 51
   const theme = {
50 52
     variables,
51
-    "NativeBase.Left": {
53
+    'NativeBase.Left': {
52 54
       ...leftTheme(variables)
53 55
     },
54
-    "NativeBase.Right": {
56
+    'NativeBase.Right': {
55 57
       ...rightTheme(variables)
56 58
     },
57
-    "NativeBase.Body": {
59
+    'NativeBase.Body': {
58 60
       ...bodyTheme(variables)
59 61
     },
60 62
 
61
-    "NativeBase.Header": {
63
+    'NativeBase.Header': {
62 64
       ...headerTheme(variables)
63 65
     },
64 66
 
65
-    "NativeBase.Button": {
67
+    'NativeBase.Button': {
66 68
       ...buttonTheme(variables)
67 69
     },
68 70
 
69
-    "NativeBase.Title": {
71
+    'NativeBase.Title': {
70 72
       ...titleTheme(variables)
71 73
     },
72
-    "NativeBase.Subtitle": {
74
+    'NativeBase.Subtitle': {
73 75
       ...subtitleTheme(variables)
74 76
     },
75 77
 
76
-    "NativeBase.InputGroup": {
78
+    'NativeBase.InputGroup': {
77 79
       ...inputGroupTheme(variables)
78 80
     },
79 81
 
80
-    "NativeBase.Input": {
82
+    'NativeBase.Input': {
81 83
       ...inputTheme(variables)
82 84
     },
83 85
 
84
-    "NativeBase.Badge": {
86
+    'NativeBase.Badge': {
85 87
       ...badgeTheme(variables)
86 88
     },
87 89
 
88
-    "NativeBase.CheckBox": {
90
+    'NativeBase.CheckBox': {
89 91
       ...checkBoxTheme(variables)
90 92
     },
91 93
 
92
-    "NativeBase.Radio": {
94
+    'NativeBase.Radio': {
93 95
       ...radioTheme(variables)
94 96
     },
95 97
 
96
-    "NativeBase.Card": {
98
+    'NativeBase.Card': {
97 99
       ...cardTheme(variables)
98 100
     },
99 101
 
100
-    "NativeBase.CardItem": {
102
+    'NativeBase.CardItem': {
101 103
       ...cardItemTheme(variables)
102 104
     },
103 105
 
104
-    "NativeBase.Toast": {
106
+    'NativeBase.Toast': {
105 107
       ...toastTheme(variables)
106 108
     },
107 109
 
108
-    "NativeBase.H1": {
110
+    'NativeBase.H1': {
109 111
       ...h1Theme(variables)
110 112
     },
111
-    "NativeBase.H2": {
113
+    'NativeBase.H2': {
112 114
       ...h2Theme(variables)
113 115
     },
114
-    "NativeBase.H3": {
116
+    'NativeBase.H3': {
115 117
       ...h3Theme(variables)
116 118
     },
117
-    "NativeBase.Form": {
119
+    'NativeBase.Form': {
118 120
       ...formTheme(variables)
119 121
     },
120 122
 
121
-    "NativeBase.Container": {
123
+    'NativeBase.Container': {
122 124
       ...containerTheme(variables)
123 125
     },
124
-    "NativeBase.Content": {
126
+    'NativeBase.Content': {
125 127
       ...contentTheme(variables)
126 128
     },
127 129
 
128
-    "NativeBase.Footer": {
130
+    'NativeBase.Footer': {
129 131
       ...footerTheme(variables)
130 132
     },
131 133
 
132
-    "NativeBase.Tabs": {
134
+    'NativeBase.Tabs': {
133 135
       flex: 1
134 136
     },
135 137
 
136
-    "NativeBase.FooterTab": {
138
+    'NativeBase.FooterTab': {
137 139
       ...footerTabTheme(variables)
138 140
     },
139 141
 
140
-    "NativeBase.ListItem": {
142
+    'NativeBase.ListItem': {
141 143
       ...listItemTheme(variables)
142 144
     },
143 145
 
144
-    "NativeBase.ListItem1": {
146
+    'NativeBase.ListItem1': {
145 147
       ...listItemTheme(variables)
146 148
     },
147 149
 
148
-    "NativeBase.Icon": {
150
+    'NativeBase.Icon': {
149 151
       ...iconTheme(variables)
150 152
     },
151
-    "NativeBase.IconNB": {
153
+    'NativeBase.IconNB': {
152 154
       ...iconTheme(variables)
153 155
     },
154
-    "NativeBase.Text": {
156
+    'NativeBase.Text': {
155 157
       ...textTheme(variables)
156 158
     },
157
-    "NativeBase.Spinner": {
159
+    'NativeBase.Spinner': {
158 160
       ...spinnerTheme(variables)
159 161
     },
160 162
 
161
-    "NativeBase.Fab": {
163
+    'NativeBase.Fab': {
162 164
       ...fabTheme(variables)
163 165
     },
164 166
 
165
-    "NativeBase.Item": {
167
+    'NativeBase.Item': {
166 168
       ...itemTheme(variables)
167 169
     },
168 170
 
169
-    "NativeBase.Label": {
171
+    'NativeBase.Label': {
170 172
       ...labelTheme(variables)
171 173
     },
172 174
 
173
-    "NativeBase.Textarea": {
175
+    'NativeBase.Textarea': {
174 176
       ...textAreaTheme(variables)
175 177
     },
176 178
 
177
-    "NativeBase.PickerNB": {
179
+    'NativeBase.PickerNB': {
178 180
       ...pickerTheme(variables),
179
-      "NativeBase.Button": {
180
-        "NativeBase.Text": {}
181
+      'NativeBase.Button': {
182
+        'NativeBase.Text': {}
181 183
       }
182 184
     },
183 185
 
184
-    "NativeBase.Tab": {
186
+    'NativeBase.Tab': {
185 187
       ...tabTheme(variables)
186 188
     },
187 189
 
188
-    "NativeBase.Segment": {
190
+    'NativeBase.Segment': {
189 191
       ...segmentTheme(variables)
190 192
     },
191 193
 
192
-    "NativeBase.TabBar": {
194
+    'NativeBase.TabBar': {
193 195
       ...tabBarTheme(variables)
194 196
     },
195
-    "NativeBase.ViewNB": {
197
+    'NativeBase.ViewNB': {
196 198
       ...viewTheme(variables)
197 199
     },
198
-    "NativeBase.TabHeading": {
200
+    'NativeBase.TabHeading': {
199 201
       ...tabHeadingTheme(variables)
200 202
     },
201
-    "NativeBase.TabContainer": {
203
+    'NativeBase.TabContainer': {
202 204
       ...tabContainerTheme(variables)
203 205
     },
204
-    "NativeBase.Switch": {
206
+    'NativeBase.Switch': {
205 207
       ...switchTheme(variables)
206 208
     },
207
-    "NativeBase.Separator": {
209
+    'NativeBase.Separator': {
208 210
       ...separatorTheme(variables)
209 211
     },
210
-    "NativeBase.SwipeRow": {
212
+    'NativeBase.SwipeRow': {
211 213
       ...swipeRowTheme(variables)
212 214
     },
213
-    "NativeBase.Thumbnail": {
215
+    'NativeBase.Thumbnail': {
214 216
       ...thumbnailTheme(variables)
215 217
     }
216 218
   };
@@ -218,9 +220,9 @@ export default (variables /*: * */ = variable) => {
218 220
   const cssifyTheme = (grandparent, parent, parentKey) => {
219 221
     _.forEach(parent, (style, styleName) => {
220 222
       if (
221
-        styleName.indexOf(".") === 0 &&
223
+        styleName.indexOf('.') === 0 &&
222 224
         parentKey &&
223
-        parentKey.indexOf(".") === 0
225
+        parentKey.indexOf('.') === 0
224 226
       ) {
225 227
         if (grandparent) {
226 228
           if (!grandparent[styleName]) {
@@ -230,7 +232,12 @@ export default (variables /*: * */ = variable) => {
230 232
           }
231 233
         }
232 234
       }
233
-      if (style && typeof style === "object" && styleName !== "fontVariant" && styleName !== "transform") {
235
+      if (
236
+        style &&
237
+        typeof style === 'object' &&
238
+        styleName !== 'fontVariant' &&
239
+        styleName !== 'transform'
240
+      ) {
234 241
         cssifyTheme(parent, style, styleName);
235 242
       }
236 243
     });

+ 149
- 121
native-base-theme/variables/commonColor.js View File

@@ -1,79 +1,104 @@
1 1
 // @flow
2 2
 
3
-import color from "color";
3
+import color from 'color';
4
+import { Platform, Dimensions, PixelRatio } from 'react-native';
4 5
 
5
-import { Platform, Dimensions, PixelRatio } from "react-native";
6
+export const PLATFORM = {
7
+  ANDROID: 'android',
8
+  IOS: 'ios',
9
+  MATERIAL: 'material',
10
+  WEB: 'web'
11
+};
6 12
 
7
-const deviceHeight = Dimensions.get("window").height;
8
-const deviceWidth = Dimensions.get("window").width;
13
+const deviceHeight = Dimensions.get('window').height;
14
+const deviceWidth = Dimensions.get('window').width;
9 15
 const platform = Platform.OS;
10 16
 const platformStyle = undefined;
11 17
 const isIphoneX =
12
-  platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
18
+  platform === PLATFORM.IOS &&
19
+  (deviceHeight === 812 ||
20
+    deviceWidth === 812 ||
21
+    deviceHeight === 896 ||
22
+    deviceWidth === 896);
13 23
 
14 24
 export default {
15 25
   platformStyle,
16 26
   platform,
17 27
 
18
-  //Accordion
19
-  headerStyle: "#edebed",
20
-  iconStyle: "#000",
21
-  contentStyle: "#f5f4f5",
22
-  expandedIconStyle: "#000",
23
-  accordionBorderColor: "#d3d3d3",
28
+  // Accordion
29
+  headerStyle: '#edebed',
30
+  iconStyle: '#000',
31
+  contentStyle: '#f5f4f5',
32
+  expandedIconStyle: '#000',
33
+  accordionBorderColor: '#d3d3d3',
34
+
35
+  // ActionSheet
36
+  elevation: 4,
37
+  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
38
+  innerTouchableBackgroundColor: '#fff',
39
+  listItemHeight: 50,
40
+  listItemBorderColor: 'transparent',
41
+  marginHorizontal: -15,
42
+  marginLeft: 14,
43
+  marginTop: 15,
44
+  minHeight: 56,
45
+  padding: 15,
46
+  touchableTextColor: '#757575',
24 47
 
25
-  //Android
48
+  // Android
26 49
   androidRipple: true,
27
-  androidRippleColor: "rgba(256, 256, 256, 0.3)",
28
-  androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
29
-  btnUppercaseAndroidText: true,
50
+  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
51
+  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
52
+  buttonUppercaseAndroidText: true,
30 53
 
31 54
   // Badge
32
-  badgeBg: "#ED1727",
33
-  badgeColor: "#fff",
34
-  badgePadding: platform === "ios" ? 3 : 0,
55
+  badgeBg: '#ED1727',
56
+  badgeColor: '#fff',
57
+  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
35 58
 
36 59
   // Button
37
-  btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
38
-  btnDisabledBg: "#b5b5b5",
60
+  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
61
+  buttonDisabledBg: '#b5b5b5',
39 62
   buttonPadding: 6,
40
-  get btnPrimaryBg() {
63
+  get buttonPrimaryBg() {
41 64
     return this.brandPrimary;
42 65
   },
43
-  get btnPrimaryColor() {
66
+  get buttonPrimaryColor() {
44 67
     return this.inverseTextColor;
45 68
   },
46
-  get btnInfoBg() {
69
+  get buttonInfoBg() {
47 70
     return this.brandInfo;
48 71
   },
49
-  get btnInfoColor() {
72
+  get buttonInfoColor() {
50 73
     return this.inverseTextColor;
51 74
   },
52
-  get btnSuccessBg() {
75
+  get buttonSuccessBg() {
53 76
     return this.brandSuccess;
54 77
   },
55
-  get btnSuccessColor() {
78
+  get buttonSuccessColor() {
56 79
     return this.inverseTextColor;
57 80
   },
58
-  get btnDangerBg() {
81
+  get buttonDangerBg() {
59 82
     return this.brandDanger;
60 83
   },
61
-  get btnDangerColor() {
84
+  get buttonDangerColor() {
62 85
     return this.inverseTextColor;
63 86
   },
64
-  get btnWarningBg() {
87
+  get buttonWarningBg() {
65 88
     return this.brandWarning;
66 89
   },
67
-  get btnWarningColor() {
90
+  get buttonWarningColor() {
68 91
     return this.inverseTextColor;
69 92
   },
70
-  get btnTextSize() {
71
-    return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
93
+  get buttonTextSize() {
94
+    return platform === PLATFORM.IOS
95
+      ? this.fontSizeBase * 1.1
96
+      : this.fontSizeBase - 1;
72 97
   },
73
-  get btnTextSizeLarge() {
98
+  get buttonTextSizeLarge() {
74 99
     return this.fontSizeBase * 1.5;
75 100
   },
76
-  get btnTextSizeSmall() {
101
+  get buttonTextSizeSmall() {
77 102
     return this.fontSizeBase * 0.8;
78 103
   },
79 104
   get borderRadiusLarge() {
@@ -87,42 +112,45 @@ export default {
87 112
   },
88 113
 
89 114
   // Card
90
-  cardDefaultBg: "#fff",
91
-  cardBorderColor: "#ccc",
115
+  cardDefaultBg: '#fff',
116
+  cardBorderColor: '#ccc',
92 117
   cardBorderRadius: 2,
93
-  cardItemPadding: platform === "ios" ? 10 : 12,
118
+  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
94 119
 
95 120
   // CheckBox
96
-  CheckboxRadius: platform === "ios" ? 13 : 0,
97
-  CheckboxBorderWidth: platform === "ios" ? 1 : 2,
98
-  CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
99
-  CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
100
-  CheckboxIconSize: platform === "ios" ? 21 : 16,
101
-  CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
102
-  CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
103
-  checkboxBgColor: "#039BE5",
121
+  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
122
+  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
123
+  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
124
+  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
125
+  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
126
+  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
127
+  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
128
+  checkboxBgColor: '#039BE5',
104 129
   checkboxSize: 20,
105
-  checkboxTickColor: "#fff",
130
+  checkboxTickColor: '#fff',
106 131
 
107 132
   // Color
108
-  brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5",
109
-  brandInfo: "#62B1F6",
110
-  brandSuccess: "#5cb85c",
111
-  brandDanger: "#d9534f",
112
-  brandWarning: "#f0ad4e",
113
-  brandDark: "#000",
114
-  brandLight: "#f4f4f4",
133
+  brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
134
+  brandInfo: '#62B1F6',
135
+  brandSuccess: '#5cb85c',
136
+  brandDanger: '#d9534f',
137
+  brandWarning: '#f0ad4e',
138
+  brandDark: '#000',
139
+  brandLight: '#f4f4f4',
140
+
141
+  // Container
142
+  containerBgColor: '#fff',
115 143
 
116
-  //Container
117
-  containerBgColor: "#fff",
144
+  // Date Picker
145
+  datePickerTextColor: '#000',
146
+  datePickerBg: 'transparent',
118 147
 
119
-  //Date Picker
120
-  datePickerTextColor: "#000",
121
-  datePickerBg: "transparent",
148
+  // FAB
149
+  fabWidth: 56,
122 150
 
123 151
   // Font
124 152
   DefaultFontSize: 16,
125
-  fontFamily: platform === "ios" ? "System" : "Roboto",
153
+  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
126 154
   fontSizeBase: 15,
127 155
   get fontSizeH1() {
128 156
     return this.fontSizeBase * 1.8;
@@ -136,28 +164,28 @@ export default {
136 164
 
137 165
   // Footer
138 166
   footerHeight: 55,
139
-  footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
167
+  footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
140 168
   footerPaddingBottom: 0,
141 169
 
142 170
   // FooterTab
143
-  tabBarTextColor: platform === "ios" ? "#737373" : "#bfc6ea",
144
-  tabBarTextSize: platform === "ios" ? 14 : 11,
145
-  activeTab: platform === "ios" ? "#007aff" : "#fff",
146
-  sTabBarActiveTextColor: "#007aff",
147
-  tabBarActiveTextColor: platform === "ios" ? "#2874F0" : "#fff",
148
-  tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
171
+  tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea',
172
+  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
173
+  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
174
+  sTabBarActiveTextColor: '#007aff',
175
+  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff',
176
+  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
149 177
 
150 178
   // Header
151
-  toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff",
152
-  toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
153
-  toolbarHeight: platform === "ios" ? 64 : 56,
154
-  toolbarSearchIconSize: platform === "ios" ? 20 : 23,
155
-  toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
156
-  searchBarHeight: platform === "ios" ? 30 : 40,
157
-  searchBarInputHeight: platform === "ios" ? 30 : 50,
158
-  toolbarBtnTextColor: platform === "ios" ? "#007aff" : "#fff",
159
-  iosStatusbar: "dark-content",
160
-  toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5",
179
+  toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
180
+  toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
181
+  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
182
+  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
183
+  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
184
+  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
185
+  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
186
+  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
187
+  iosStatusbar: 'dark-content',
188
+  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
161 189
   get statusBarColor() {
162 190
     return color(this.toolbarDefaultBg)
163 191
       .darken(0.2)
@@ -170,102 +198,102 @@ export default {
170 198
   },
171 199
 
172 200
   // Icon
173
-  iconFamily: "Ionicons",
174
-  iconFontSize: platform === "ios" ? 30 : 28,
175
-  iconHeaderSize: platform === "ios" ? 33 : 24,
201
+  iconFamily: 'Ionicons',
202
+  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
203
+  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
176 204
 
177 205
   // InputGroup
178 206
   inputFontSize: 17,
179
-  inputBorderColor: "#D9D5DC",
180
-  inputSuccessBorderColor: "#2b8339",
181
-  inputErrorBorderColor: "#ed2f2f",
207
+  inputBorderColor: '#D9D5DC',
208
+  inputSuccessBorderColor: '#2b8339',
209
+  inputErrorBorderColor: '#ed2f2f',
182 210
   inputHeightBase: 50,
183 211
   get inputColor() {
184 212
     return this.textColor;
185 213
   },
186 214
   get inputColorPlaceholder() {
187
-    return "#575757";
215
+    return '#575757';
188 216
   },
189 217
 
190 218
   // Line Height
191
-  btnLineHeight: 19,
219
+  buttonLineHeight: 19,
192 220
   lineHeightH1: 32,
193 221
   lineHeightH2: 27,
194 222
   lineHeightH3: 22,
195
-  lineHeight: platform === "ios" ? 20 : 24,
223
+  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
196 224
 
197 225
   // List
198
-  listBg: "transparent",
199
-  listBorderColor: "#c9c9c9",
200
-  listDividerBg: "#f4f4f4",
201
-  listBtnUnderlayColor: "#DDD",
202
-  listItemPadding: platform === "ios" ? 10 : 12,
203
-  listNoteColor: "#808080",
226
+  listBg: 'transparent',
227
+  listBorderColor: '#c9c9c9',
228
+  listDividerBg: '#f4f4f4',
229
+  listBtnUnderlayColor: '#DDD',
230
+  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
231
+  listNoteColor: '#808080',
204 232
   listNoteSize: 13,
205
-  listItemSelected: platform === "ios" ? "#007aff" : "#3F51B5",
233
+  listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
206 234
 
207 235
   // Progress Bar
208
-  defaultProgressColor: "#E4202D",
209
-  inverseProgressColor: "#1A191B",
236
+  defaultProgressColor: '#E4202D',
237
+  inverseProgressColor: '#1A191B',
210 238
 
211 239
   // Radio Button
212
-  radioBtnSize: platform === "ios" ? 25 : 23,
213
-  radioSelectedColorAndroid: "#3F51B5",
214
-  radioBtnLineHeight: platform === "ios" ? 29 : 24,
240
+  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
241
+  radioSelectedColorAndroid: '#3F51B5',
242
+  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
215 243
   get radioColor() {
216 244
     return this.brandPrimary;
217 245
   },
218 246
 
219 247
   // Segment
220
-  segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
221
-  segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
222
-  segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
223
-  segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
224
-  segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
225
-  segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
248
+  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
249
+  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
250
+  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
251
+  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
252
+  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
253
+  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
226 254
 
227 255
   // Spinner
228
-  defaultSpinnerColor: "#45D56E",
229
-  inverseSpinnerColor: "#1A191B",
256
+  defaultSpinnerColor: '#45D56E',
257
+  inverseSpinnerColor: '#1A191B',
230 258
 
231 259
   // Tab
232
-  tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
233
-  topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
234
-  topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
235
-  topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
236
-  topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff",
260
+  tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
261
+  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
262
+  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
263
+  topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
264
+  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
237 265
 
238 266
   // Tabs
239
-  tabBgColor: "#F8F8F8",
267
+  tabBgColor: '#F8F8F8',
240 268
   tabFontSize: 15,
241 269
 
242 270
   // Text
243
-  textColor: "#000",
244
-  inverseTextColor: "#fff",
271
+  textColor: '#000',
272
+  inverseTextColor: '#fff',
245 273
   noteFontSize: 14,
246 274
   get defaultTextColor() {
247 275
     return this.textColor;
248 276
   },
249 277
 
250 278
   // Title
251
-  titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
252
-  titleFontSize: platform === "ios" ? 17 : 19,
253
-  subTitleFontSize: platform === "ios" ? 11 : 14,
254
-  subtitleColor: platform === "ios" ? "#000" : "#fff",
255
-  titleFontColor: platform === "ios" ? "#000" : "#fff",
279
+  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
280
+  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
281
+  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
282
+  subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff',
283
+  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff',
256 284
 
257 285
   // Other
258
-  borderRadiusBase: platform === "ios" ? 5 : 2,
286
+  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
259 287
   borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
260 288
   contentPadding: 10,
261
-  dropdownLinkColor: "#414142",
289
+  dropdownLinkColor: '#414142',
262 290
   inputLineHeight: 24,
263 291
   deviceWidth,
264 292
   deviceHeight,
265 293
   isIphoneX,
266 294
   inputGroupRoundedBorderRadius: 30,
267 295
 
268
-  //iPhoneX SafeArea
296
+  // iPhoneX SafeArea
269 297
   Inset: {
270 298
     portrait: {
271 299
       topInset: 24,

+ 121
- 100
native-base-theme/variables/material.js View File

@@ -1,79 +1,97 @@
1 1
 // @flow
2 2
 
3
-import color from "color";
3
+import color from 'color';
4
+import { Platform, Dimensions, PixelRatio } from 'react-native';
4 5
 
5
-import { Platform, Dimensions, PixelRatio } from "react-native";
6
+import { PLATFORM } from './commonColor';
6 7
 
7
-const deviceHeight = Dimensions.get("window").height;
8
-const deviceWidth = Dimensions.get("window").width;
8
+const deviceHeight = Dimensions.get('window').height;
9
+const deviceWidth = Dimensions.get('window').width;
9 10
 const platform = Platform.OS;
10
-const platformStyle = "material";
11
+const platformStyle = PLATFORM.MATERIAL;
11 12
 const isIphoneX =
12
-platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
13
+  platform === PLATFORM.IOS &&
14
+  (deviceHeight === 812 ||
15
+    deviceWidth === 812 ||
16
+    deviceHeight === 896 ||
17
+    deviceWidth === 896);
13 18
 
14 19
 export default {
15 20
   platformStyle,
16 21
   platform,
17 22
 
18
-  //Accordion
19
-  headerStyle: "#edebed",
20
-  iconStyle: "#000",
21
-  contentStyle: "#f5f4f5",
22
-  expandedIconStyle: "#000",
23
-  accordionBorderColor: "#d3d3d3",
23
+  // Accordion
24
+  headerStyle: '#edebed',
25
+  iconStyle: '#000',
26
+  contentStyle: '#f5f4f5',
27
+  expandedIconStyle: '#000',
28
+  accordionBorderColor: '#d3d3d3',
29
+
30
+  // ActionSheet
31
+  elevation: 4,
32
+  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
33
+  innerTouchableBackgroundColor: '#fff',
34
+  listItemHeight: 50,
35
+  listItemBorderColor: 'transparent',
36
+  marginHorizontal: -15,
37
+  marginLeft: 14,
38
+  marginTop: 15,
39
+  minHeight: 56,
40
+  padding: 15,
41
+  touchableTextColor: '#757575',
24 42
 
25 43
   // Android
26 44
   androidRipple: true,
27
-  androidRippleColor: "rgba(256, 256, 256, 0.3)",
28
-  androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
29
-  btnUppercaseAndroidText: true,
45
+  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
46
+  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
47
+  buttonUppercaseAndroidText: true,
30 48
 
31 49
   // Badge
32
-  badgeBg: "#ED1727",
33
-  badgeColor: "#fff",
50
+  badgeBg: '#ED1727',
51
+  badgeColor: '#fff',
34 52
   badgePadding: 0,
35 53
 
36 54
   // Button
37
-  btnFontFamily: "Roboto",
38
-  btnDisabledBg: "#b5b5b5",
55
+  buttonFontFamily: 'Roboto',
56
+  buttonDisabledBg: '#b5b5b5',
39 57
   buttonPadding: 6,
40
-  get btnPrimaryBg() {
58
+  get buttonPrimaryBg() {
41 59
     return this.brandPrimary;
42 60
   },
43
-  get btnPrimaryColor() {
61
+  get buttonPrimaryColor() {
44 62
     return this.inverseTextColor;
45 63
   },
46
-  get btnInfoBg() {
64
+  get buttonInfoBg() {
47 65
     return this.brandInfo;
48 66
   },
49
-  get btnInfoColor() {
67
+  get buttonInfoColor() {
50 68
     return this.inverseTextColor;
51 69
   },
52
-  get btnSuccessBg() {
70
+  get buttonSuccessBg() {
53 71
     return this.brandSuccess;
54 72
   },
55
-  get btnSuccessColor() {
73
+  get buttonSuccessColor() {
56 74
     return this.inverseTextColor;
57 75
   },
58
-  get btnDangerBg() {
76
+  get buttonDangerBg() {
59 77
     return this.brandDanger;
60 78
   },
61
-  get btnDangerColor() {
79
+  get buttonDangerColor() {
62 80
     return this.inverseTextColor;
63 81
   },
64
-  get btnWarningBg() {
82
+  get buttonWarningBg() {
65 83
     return this.brandWarning;
66 84
   },
67
-  get btnWarningColor() {
85
+  get buttonWarningColor() {
68 86
     return this.inverseTextColor;
69 87
   },
70
-  get btnTextSize() {
88
+  get buttonTextSize() {
71 89
     return this.fontSizeBase - 1;
72 90
   },
73
-  get btnTextSizeLarge() {
91
+  get buttonTextSizeLarge() {
74 92
     return this.fontSizeBase * 1.5;
75 93
   },
76
-  get btnTextSizeSmall() {
94
+  get buttonTextSizeSmall() {
77 95
     return this.fontSizeBase * 0.8;
78 96
   },
79 97
   get borderRadiusLarge() {
@@ -87,10 +105,10 @@ export default {
87 105
   },
88 106
 
89 107
   // Card
90
-  cardDefaultBg: "#fff",
91
-  cardBorderColor: "#ccc",
108
+  cardDefaultBg: '#fff',
109
+  cardBorderColor: '#ccc',
92 110
   cardBorderRadius: 2,
93
-  cardItemPadding: platform === "ios" ? 10 : 12,
111
+  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
94 112
 
95 113
   // CheckBox
96 114
   CheckboxRadius: 0,
@@ -100,29 +118,32 @@ export default {
100 118
   CheckboxIconSize: 16,
101 119
   CheckboxIconMarginTop: 1,
102 120
   CheckboxFontSize: 17,
103
-  checkboxBgColor: "#039BE5",
121
+  checkboxBgColor: '#039BE5',
104 122
   checkboxSize: 20,
105
-  checkboxTickColor: "#fff",
123
+  checkboxTickColor: '#fff',
106 124
 
107 125
   // Color
108
-  brandPrimary: "#3F51B5",
109
-  brandInfo: "#62B1F6",
110
-  brandSuccess: "#5cb85c",
111
-  brandDanger: "#d9534f",
112
-  brandWarning: "#f0ad4e",
113
-  brandDark: "#000",
114
-  brandLight: "#f4f4f4",
126
+  brandPrimary: '#3F51B5',
127
+  brandInfo: '#62B1F6',
128
+  brandSuccess: '#5cb85c',
129
+  brandDanger: '#d9534f',
130
+  brandWarning: '#f0ad4e',
131
+  brandDark: '#000',
132
+  brandLight: '#f4f4f4',
133
+
134
+  // Container
135
+  containerBgColor: '#fff',
115 136
 
116
-  //Container
117
-  containerBgColor: "#fff",
137
+  // Date Picker
138
+  datePickerTextColor: '#000',
139
+  datePickerBg: 'transparent',
118 140
 
119
-  //Date Picker
120
-  datePickerTextColor: "#000",
121
-  datePickerBg: "transparent",
141
+  // FAB
142
+  fabWidth: 56,
122 143
 
123 144
   // Font
124 145
   DefaultFontSize: 16,
125
-  fontFamily: "Roboto",
146
+  fontFamily: 'Roboto',
126 147
   fontSizeBase: 15,
127 148
   get fontSizeH1() {
128 149
     return this.fontSizeBase * 1.8;
@@ -136,28 +157,28 @@ export default {
136 157
 
137 158
   // Footer
138 159
   footerHeight: 55,
139
-  footerDefaultBg: "#3F51B5",
160
+  footerDefaultBg: '#3F51B5',
140 161
   footerPaddingBottom: 0,
141 162
 
142 163
   // FooterTab
143
-  tabBarTextColor: "#bfc6ea",
164
+  tabBarTextColor: '#bfc6ea',
144 165
   tabBarTextSize: 11,
145
-  activeTab: "#fff",
146
-  sTabBarActiveTextColor: "#007aff",
147
-  tabBarActiveTextColor: "#fff",
148
-  tabActiveBgColor: "#3F51B5",
166
+  activeTab: '#fff',
167
+  sTabBarActiveTextColor: '#007aff',
168
+  tabBarActiveTextColor: '#fff',
169
+  tabActiveBgColor: '#3F51B5',
149 170
 
150 171
   // Header
151
-  toolbarBtnColor: "#fff",
152
-  toolbarDefaultBg: "#3F51B5",
172
+  toolbarBtnColor: '#fff',
173
+  toolbarDefaultBg: '#3F51B5',
153 174
   toolbarHeight: 56,
154 175
   toolbarSearchIconSize: 23,
155
-  toolbarInputColor: "#fff",
156
-  searchBarHeight: platform === "ios" ? 30 : 40,
157
-  searchBarInputHeight: platform === "ios" ? 40 : 50,
158
-  toolbarBtnTextColor: "#fff",
159
-  toolbarDefaultBorder: "#3F51B5",
160
-  iosStatusbar: "light-content",
176
+  toolbarInputColor: '#fff',
177
+  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
178
+  searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50,
179
+  toolbarBtnTextColor: '#fff',
180
+  toolbarDefaultBorder: '#3F51B5',
181
+  iosStatusbar: 'light-content',
161 182
   get statusBarColor() {
162 183
     return color(this.toolbarDefaultBg)
163 184
       .darken(0.2)
@@ -170,102 +191,102 @@ export default {
170 191
   },
171 192
 
172 193
   // Icon
173
-  iconFamily: "Ionicons",
194
+  iconFamily: 'Ionicons',
174 195
   iconFontSize: 28,
175 196
   iconHeaderSize: 24,
176 197
 
177 198
   // InputGroup
178 199
   inputFontSize: 17,
179
-  inputBorderColor: "#D9D5DC",
180
-  inputSuccessBorderColor: "#2b8339",
181
-  inputErrorBorderColor: "#ed2f2f",
200
+  inputBorderColor: '#D9D5DC',
201
+  inputSuccessBorderColor: '#2b8339',
202
+  inputErrorBorderColor: '#ed2f2f',
182 203
   inputHeightBase: 50,
183 204
   get inputColor() {
184 205
     return this.textColor;
185 206
   },
186 207
   get inputColorPlaceholder() {
187
-    return "#575757";
208
+    return '#575757';
188 209
   },
189 210
 
190 211
   // Line Height
191
-  btnLineHeight: 19,
212
+  buttonLineHeight: 19,
192 213
   lineHeightH1: 32,
193 214
   lineHeightH2: 27,
194 215
   lineHeightH3: 22,
195 216
   lineHeight: 24,
196 217
 
197 218
   // List
198
-  listBg: "transparent",
199
-  listBorderColor: "#c9c9c9",
200
-  listDividerBg: "#f4f4f4",
201
-  listBtnUnderlayColor: "#DDD",
219
+  listBg: 'transparent',
220
+  listBorderColor: '#c9c9c9',
221
+  listDividerBg: '#f4f4f4',
222
+  listBtnUnderlayColor: '#DDD',
202 223
   listItemPadding: 12,
203
-  listNoteColor: "#808080",
224
+  listNoteColor: '#808080',
204 225
   listNoteSize: 13,
205
-  listItemSelected: "#3F51B5",
226
+  listItemSelected: '#3F51B5',
206 227
 
207 228
   // Progress Bar
208
-  defaultProgressColor: "#E4202D",
209
-  inverseProgressColor: "#1A191B",
229
+  defaultProgressColor: '#E4202D',
230
+  inverseProgressColor: '#1A191B',
210 231
 
211 232
   // Radio Button
212 233
   radioBtnSize: 23,
213
-  radioSelectedColorAndroid: "#3F51B5",
234
+  radioSelectedColorAndroid: '#3F51B5',
214 235
   radioBtnLineHeight: 24,
215 236
   get radioColor() {
216 237
     return this.brandPrimary;
217 238
   },
218 239
 
219 240
   // Segment
220
-  segmentBackgroundColor: "#3F51B5",
221
-  segmentActiveBackgroundColor: "#fff",
222
-  segmentTextColor: "#fff",
223
-  segmentActiveTextColor: "#3F51B5",
224
-  segmentBorderColor: "#fff",
225
-  segmentBorderColorMain: "#3F51B5",
241
+  segmentBackgroundColor: '#3F51B5',
242
+  segmentActiveBackgroundColor: '#fff',
243
+  segmentTextColor: '#fff',
244
+  segmentActiveTextColor: '#3F51B5',
245
+  segmentBorderColor: '#fff',
246
+  segmentBorderColorMain: '#3F51B5',
226 247
 
227 248
   // Spinner
228
-  defaultSpinnerColor: "#45D56E",
229
-  inverseSpinnerColor: "#1A191B",
249
+  defaultSpinnerColor: '#45D56E',
250
+  inverseSpinnerColor: '#1A191B',
230 251
 
231 252
   // Tab
232
-  tabDefaultBg: "#3F51B5",
233
-  topTabBarTextColor: "#b3c7f9",
234
-  topTabBarActiveTextColor: "#fff",
235
-  topTabBarBorderColor: "#fff",
236
-  topTabBarActiveBorderColor: "#fff",
253
+  tabDefaultBg: '#3F51B5',
254
+  topTabBarTextColor: '#b3c7f9',
255
+  topTabBarActiveTextColor: '#fff',
256
+  topTabBarBorderColor: '#fff',
257
+  topTabBarActiveBorderColor: '#fff',
237 258
 
238 259
   // Tabs
239
-  tabBgColor: "#F8F8F8",
260
+  tabBgColor: '#F8F8F8',
240 261
   tabFontSize: 15,
241 262
 
242 263
   // Text
243
-  textColor: "#000",
244
-  inverseTextColor: "#fff",
264
+  textColor: '#000',
265
+  inverseTextColor: '#fff',
245 266
   noteFontSize: 14,
246 267
   get defaultTextColor() {
247 268
     return this.textColor;
248 269
   },
249 270
 
250 271
   // Title
251
-  titleFontfamily: "Roboto",
272
+  titleFontfamily: 'Roboto',
252 273
   titleFontSize: 19,
253 274
   subTitleFontSize: 14,
254
-  subtitleColor: "#FFF",
255
-  titleFontColor: "#FFF",
275
+  subtitleColor: '#FFF',
276
+  titleFontColor: '#FFF',
256 277
 
257 278
   // Other
258 279
   borderRadiusBase: 2,
259 280
   borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
260 281
   contentPadding: 10,
261
-  dropdownLinkColor: "#414142",
282
+  dropdownLinkColor: '#414142',
262 283
   inputLineHeight: 24,
263 284
   deviceWidth,
264 285
   deviceHeight,
265 286
   isIphoneX,
266 287
   inputGroupRoundedBorderRadius: 30,
267 288
 
268
-  //iPhoneX SafeArea
289
+  // iPhoneX SafeArea
269 290
   Inset: {
270 291
     portrait: {
271 292
       topInset: 24,

+ 349
- 299
native-base-theme/variables/platform.js View File

@@ -1,311 +1,361 @@
1 1
 // @flow
2 2
 
3
-import color from "color";
3
+import color from 'color';
4
+import { Platform, Dimensions, PixelRatio } from 'react-native';
4 5
 
5
-import {Dimensions, PixelRatio, Platform} from "react-native";
6
+import { PLATFORM } from './commonColor';
6 7
 
7
-const deviceHeight = Dimensions.get("window").height;
8
-const deviceWidth = Dimensions.get("window").width;
8
+const deviceHeight = Dimensions.get('window').height;
9
+const deviceWidth = Dimensions.get('window').width;
9 10
 const platform = Platform.OS;
10 11
 const platformStyle = undefined;
11 12
 const isIphoneX =
12
-    platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
13
+  platform === PLATFORM.IOS &&
14
+  (deviceHeight === 812 ||
15
+    deviceWidth === 812 ||
16
+    deviceHeight === 896 ||
17
+    deviceWidth === 896);
13 18
 
14 19
 export default {
15
-    platformStyle,
16
-    platform,
17
-
18
-    //Accordion
19
-    headerStyle: "#edebed",
20
-    iconStyle: "#000",
21
-    contentStyle: "#f5f4f5",
22
-    expandedIconStyle: "#000",
23
-    accordionBorderColor: "#d3d3d3",
24
-
25
-    // Android
26
-    androidRipple: true,
27
-    androidRippleColor: "rgba(256, 256, 256, 0.3)",
28
-    androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
29
-    btnUppercaseAndroidText: true,
30
-
31
-    // Badge
32
-    badgeBg: "#ED1727",
33
-    badgeColor: "#fff",
34
-    badgePadding: platform === "ios" ? 3 : 0,
35
-
36
-    // Button
37
-    btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
38
-    btnTextColor: '#fff',
39
-    btnDisabledBg: "#b5b5b5",
40
-    buttonPadding: 6,
41
-    get btnPrimaryBg() {
42
-        return this.brandPrimary;
20
+  platformStyle,
21
+  platform,
22
+
23
+  // Accordion
24
+  accordionBorderColor: '#d3d3d3',
25
+  accordionContentPadding: 10,
26
+  accordionIconFontSize: 18,
27
+  contentStyle: '#f5f4f5',
28
+  expandedIconStyle: '#000',
29
+  headerStyle: '#edebed',
30
+  iconStyle: '#000',
31
+
32
+  // ActionSheet
33
+  elevation: 4,
34
+  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
35
+  innerTouchableBackgroundColor: '#fff',
36
+  listItemHeight: 50,
37
+  listItemBorderColor: 'transparent',
38
+  marginHorizontal: -15,
39
+  marginLeft: 14,
40
+  marginTop: 15,
41
+  minHeight: 56,
42
+  padding: 15,
43
+  touchableTextColor: '#757575',
44
+
45
+  // Android
46
+  androidRipple: true,
47
+  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
48
+  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
49
+  buttonUppercaseAndroidText: true,
50
+
51
+  // Badge
52
+  badgeBg: '#ED1727',
53
+  badgeColor: '#fff',
54
+  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
55
+
56
+  // Button
57
+  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
58
+  buttonTextColor: '#fff',
59
+  buttonDisabledBg: '#b5b5b5',
60
+  buttonPadding: 6,
61
+  buttonDefaultActiveOpacity: 0.5,
62
+  buttonDefaultFlex: 1,
63
+  buttonDefaultBorderRadius: 2,
64
+  buttonDefaultBorderWidth: 1,
65
+  get buttonPrimaryBg() {
66
+    return this.brandPrimary;
67
+  },
68
+  get buttonPrimaryColor() {
69
+    return this.inverseTextColor;
70
+  },
71
+  get buttonInfoBg() {
72
+    return this.brandInfo;
73
+  },
74
+  get buttonInfoColor() {
75
+    return this.inverseTextColor;
76
+  },
77
+  get buttonSuccessBg() {
78
+    return this.brandSuccess;
79
+  },
80
+  get buttonSuccessColor() {
81
+    return this.inverseTextColor;
82
+  },
83
+  get buttonDangerBg() {
84
+    return this.brandDanger;
85
+  },
86
+  get buttonDangerColor() {
87
+    return this.inverseTextColor;
88
+  },
89
+  get buttonWarningBg() {
90
+    return this.brandWarning;
91
+  },
92
+  get buttonWarningColor() {
93
+    return this.inverseTextColor;
94
+  },
95
+  get buttonTextSize() {
96
+    return platform === PLATFORM.IOS
97
+      ? this.fontSizeBase * 1.1
98
+      : this.fontSizeBase - 1;
99
+  },
100
+  get buttonTextSizeLarge() {
101
+    return this.fontSizeBase * 1.5;
102
+  },
103
+  get buttonTextSizeSmall() {
104
+    return this.fontSizeBase * 0.8;
105
+  },
106
+  get borderRadiusLarge() {
107
+    return this.fontSizeBase * 3.8;
108
+  },
109
+  get iconSizeLarge() {
110
+    return this.iconFontSize * 1.5;
111
+  },
112
+  get iconSizeSmall() {
113
+    return this.iconFontSize * 0.6;
114
+  },
115
+
116
+  // Card
117
+  cardDefaultBg: '#fff',
118
+  cardBorderColor: '#ccc',
119
+  cardBorderRadius: 2,
120
+  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
121
+
122
+  // CheckBox
123
+  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
124
+  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
125
+  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
126
+  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
127
+  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
128
+  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
129
+  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
130
+  checkboxBgColor: '#be1522',
131
+  checkboxSize: 20,
132
+  checkboxTickColor: '#fff',
133
+  checkboxDefaultColor: 'transparent',
134
+  checkboxTextShadowRadius: 0,
135
+
136
+  // Color
137
+  brandPrimary: '#be1522',
138
+  brandInfo: '#62B1F6',
139
+  brandSuccess: '#5cb85c',
140
+  brandDanger: '#d9534f',
141
+  brandWarning: '#f0ad4e',
142
+  brandDark: '#000',
143
+  brandLight: '#f4f4f4',
144
+
145
+  // Container
146
+  containerBgColor: '#fff',
147
+  sideMenuBgColor: "#f2f2f2",
148
+
149
+  // Date Picker
150
+  datePickerFlex: 1,
151
+  datePickerPadding: 10,
152
+  datePickerTextColor: '#000',
153
+  datePickerBg: 'transparent',
154
+
155
+  // FAB
156
+  fabBackgroundColor: 'blue',
157
+  fabBorderRadius: 28,
158
+  fabBottom: 0,
159
+  fabButtonBorderRadius: 20,
160
+  fabButtonHeight: 40,
161
+  fabButtonLeft: 7,
162
+  fabButtonMarginBottom: 10,
163
+  fabContainerBottom: 20,
164
+  fabDefaultPosition: 20,
165
+  fabElevation: 4,
166
+  fabIconColor: '#fff',
167
+  fabIconSize: 24,
168
+  fabShadowColor: '#000',
169
+  fabShadowOffsetHeight: 2,
170
+  fabShadowOffsetWidth: 0,
171
+  fabShadowOpacity: 0.4,
172
+  fabShadowRadius: 2,
173
+  fabWidth: 56,
174
+
175
+  // Font
176
+  DefaultFontSize: 16,
177
+  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
178
+  fontSizeBase: 15,
179
+  get fontSizeH1() {
180
+    return this.fontSizeBase * 1.8;
181
+  },
182
+  get fontSizeH2() {
183
+    return this.fontSizeBase * 1.6;
184
+  },
185
+  get fontSizeH3() {
186
+    return this.fontSizeBase * 1.4;
187
+  },
188
+
189
+  // Footer
190
+  footerHeight: 55,
191
+  footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
192
+  footerPaddingBottom: 0,
193
+
194
+  // FooterTab
195
+  tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
196
+  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
197
+  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
198
+  sTabBarActiveTextColor: '#007aff',
199
+  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
200
+  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
201
+
202
+  // Header
203
+  toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
204
+  toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
205
+  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
206
+  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
207
+  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
208
+  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
209
+  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
210
+  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
211
+  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#be1522',
212
+  iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
213
+  get statusBarColor() {
214
+    return color(this.toolbarDefaultBg)
215
+      .darken(0.2)
216
+      .hex();
217
+  },
218
+  get darkenHeader() {
219
+    return color(this.tabBgColor)
220
+      .darken(0.03)
221
+      .hex();
222
+  },
223
+
224
+  // Icon
225
+  iconFamily: 'Ionicons',
226
+  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
227
+  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
228
+
229
+  // InputGroup
230
+  inputFontSize: 17,
231
+  inputBorderColor: '#D9D5DC',
232
+  inputSuccessBorderColor: '#2b8339',
233
+  inputErrorBorderColor: '#ed2f2f',
234
+  inputHeightBase: 50,
235
+  get inputColor() {
236
+    return this.textColor;
237
+  },
238
+  get inputColorPlaceholder() {
239
+    return '#575757';
240
+  },
241
+
242
+  // Line Height
243
+  buttonLineHeight: 19,
244
+  lineHeightH1: 32,
245
+  lineHeightH2: 27,
246
+  lineHeightH3: 22,
247
+  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
248
+  listItemSelected: '#be1522',
249
+
250
+  // List
251
+  listBg: 'transparent',
252
+  listBorderColor: '#c9c9c9',
253
+  listDividerBg: '#f4f4f4',
254
+  listBtnUnderlayColor: '#DDD',
255
+  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
256
+  listNoteColor: '#808080',
257
+  listNoteSize: 13,
258
+
259
+  // Progress Bar
260
+  defaultProgressColor: '#E4202D',
261
+  inverseProgressColor: '#1A191B',
262
+
263
+  // Radio Button
264
+  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
265
+  radioSelectedColorAndroid: '#be1522',
266
+  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
267
+  get radioColor() {
268
+    return this.brandPrimary;
269
+  },
270
+
271
+  // Segment
272
+  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
273
+  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
274
+  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
275
+  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
276
+  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
277
+  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
278
+
279
+  // Spinner
280
+  defaultSpinnerColor: '#be1522',
281
+  inverseSpinnerColor: '#1A191B',
282
+
283
+  // Tab
284
+  tabBarDisabledTextColor: '#BDBDBD',
285
+  tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
286
+  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
287
+  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
288
+  topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
289
+  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
290
+
291
+  // Tabs
292
+  tabBgColor: '#F8F8F8',
293
+  tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
294
+  tabFontSize: 15,
295
+
296
+  // Text
297
+  textColor: '#000',
298
+  textDisabledColor: "#c1c1c1",
299
+  inverseTextColor: '#fff',
300
+  noteFontSize: 14,
301
+  get defaultTextColor() {
302
+    return this.textColor;
303
+  },
304
+
305
+  // Title
306
+  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
307
+  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
308
+  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
309
+  subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
310
+  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
311
+
312
+  // CUSTOM
313
+  customMaterialIconColor: "#5d5d5d",
314
+  fetchedDataSectionListErrorText: "#898989",
315
+
316
+  // Calendar/Agenda
317
+  agendaBackgroundColor: '#f3f3f4',
318
+  agendaEmptyLine: '#dbdbdc',
319
+
320
+  // PROXIWASH
321
+  proxiwashFinishedColor: "rgba(54,165,22,0.31)",
322
+  proxiwashReadyColor: "transparent",
323
+  proxiwashRunningColor: "rgba(94,104,241,0.3)",
324
+  proxiwashBrokenColor: "rgba(162,162,162,0.31)",
325
+  proxiwashErrorColor: "rgba(204,7,0,0.31)",
326
+
327
+  // Screens
328
+  planningColor: '#d9b10a',
329
+  proximoColor: '#ec5904',
330
+  proxiwashColor: '#1fa5ee',
331
+  menuColor: '#e91314',
332
+  tutorinsaColor: '#f93943',
333
+
334
+
335
+  // Other
336
+  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
337
+  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
338
+  contentPadding: 10,
339
+  dropdownLinkColor: '#414142',
340
+  inputLineHeight: 24,
341
+  deviceWidth,
342
+  deviceHeight,
343
+  isIphoneX,
344
+  inputGroupRoundedBorderRadius: 30,
345
+
346
+  // iPhoneX SafeArea
347
+  Inset: {
348
+    portrait: {
349
+      topInset: 24,
350
+      leftInset: 0,
351
+      rightInset: 0,
352
+      bottomInset: 34
43 353
     },
44
-    get btnPrimaryColor() {
45
-        return this.inverseTextColor;
46
-    },
47
-    get btnInfoBg() {
48
-        return this.brandInfo;
49
-    },
50
-    get btnInfoColor() {
51
-        return this.inverseTextColor;
52
-    },
53
-    get btnSuccessBg() {
54
-        return this.brandSuccess;
55
-    },
56
-    get btnSuccessColor() {
57
-        return this.inverseTextColor;
58
-    },
59
-    get btnDangerBg() {
60
-        return this.brandDanger;
61
-    },
62
-    get btnDangerColor() {
63
-        return this.inverseTextColor;
64
-    },
65
-    get btnWarningBg() {
66
-        return this.brandWarning;
67
-    },
68
-    get btnWarningColor() {
69
-        return this.inverseTextColor;
70
-    },
71
-    get btnTextSize() {
72
-        return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
73
-    },
74
-    get btnTextSizeLarge() {
75
-        return this.fontSizeBase * 1.5;
76
-    },
77
-    get btnTextSizeSmall() {
78
-        return this.fontSizeBase * 0.8;
79
-    },
80
-    get borderRadiusLarge() {
81
-        return this.fontSizeBase * 3.8;
82
-    },
83
-    get iconSizeLarge() {
84
-        return this.iconFontSize * 1.5;
85
-    },
86
-    get iconSizeSmall() {
87
-        return this.iconFontSize * 0.6;
88
-    },
89
-
90
-    // Card
91
-    cardDefaultBg: "#fff",
92
-    cardBorderColor: "#ccc",
93
-    cardBorderRadius: 2,
94
-    cardItemPadding: platform === "ios" ? 10 : 12,
95
-
96
-    // CheckBox
97
-    CheckboxRadius: platform === "ios" ? 13 : 0,
98
-    CheckboxBorderWidth: platform === "ios" ? 1 : 2,
99
-    CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
100
-    CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
101
-    CheckboxIconSize: platform === "ios" ? 21 : 16,
102
-    CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
103
-    CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
104
-    checkboxBgColor: "#be1522",
105
-    checkboxSize: 20,
106
-    checkboxTickColor: "#fff",
107
-
108
-    // Color
109
-    brandPrimary: "#be1522",
110
-    brandInfo: "#62B1F6",
111
-    brandSuccess: "#5cb85c",
112
-    brandDanger: "#d9534f",
113
-    brandWarning: "#f0ad4e",
114
-    brandDark: "#000",
115
-    brandLight: "#f4f4f4",
116
-
117
-    //Container
118
-    containerBgColor: "#fff",
119
-    sideMenuBgColor: "#f2f2f2",
120
-    //Date Picker
121
-    datePickerTextColor: "#000",
122
-    datePickerBg: "transparent",
123
-
124
-    // Font
125
-    DefaultFontSize: 16,
126
-    fontFamily: platform === "ios" ? "System" : "Roboto",
127
-    fontSizeBase: 15,
128
-    get fontSizeH1() {
129
-        return this.fontSizeBase * 1.8;
130
-    },
131
-    get fontSizeH2() {
132
-        return this.fontSizeBase * 1.6;
133
-    },
134
-    get fontSizeH3() {
135
-        return this.fontSizeBase * 1.4;
136
-    },
137
-
138
-    // Footer
139
-    footerHeight: 55,
140
-    footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
141
-    footerPaddingBottom: 0,
142
-
143
-    // FooterTab
144
-    tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
145
-    tabBarTextSize: platform === "ios" ? 14 : 11,
146
-    activeTab: platform === "ios" ? "#007aff" : "#fff",
147
-    sTabBarActiveTextColor: "#007aff",
148
-    tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
149
-    tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
150
-
151
-    // Header
152
-    toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff",
153
-    toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
154
-    toolbarHeight: platform === "ios" ? 64 : 56,
155
-    toolbarSearchIconSize: platform === "ios" ? 20 : 23,
156
-    toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
157
-    toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
158
-    searchBarHeight: platform === "ios" ? 30 : 40,
159
-    searchBarInputHeight: platform === "ios" ? 30 : 50,
160
-    toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
161
-    toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
162
-    iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
163
-    get statusBarColor() {
164
-        return color(this.toolbarDefaultBg)
165
-            .darken(0.2)
166
-            .hex();
167
-    },
168
-    get darkenHeader() {
169
-        return color(this.tabBgColor)
170
-            .darken(0.03)
171
-            .hex();
172
-    },
173
-
174
-    // Icon
175
-    iconFamily: "Ionicons",
176
-    iconFontSize: platform === "ios" ? 30 : 28,
177
-    iconHeaderSize: platform === "ios" ? 33 : 24,
178
-
179
-    // InputGroup
180
-    inputFontSize: 17,
181
-    inputBorderColor: "#D9D5DC",
182
-    inputSuccessBorderColor: "#2b8339",
183
-    inputErrorBorderColor: "#ed2f2f",
184
-    inputHeightBase: 50,
185
-    get inputColor() {
186
-        return this.textColor;
187
-    },
188
-    get inputColorPlaceholder() {
189
-        return "#575757";
190
-    },
191
-
192
-    // Line Height
193
-    btnLineHeight: 19,
194
-    lineHeightH1: 32,
195
-    lineHeightH2: 27,
196
-    lineHeightH3: 22,
197
-    lineHeight: platform === "ios" ? 20 : 24,
198
-    listItemSelected: platform === "ios" ? "#be1522" : "#be1522",
199
-
200
-    // List
201
-    listBg: "transparent",
202
-    listBorderColor: "#c9c9c9",
203
-    listDividerBg: "#f4f4f4",
204
-    listBtnUnderlayColor: "#DDD",
205
-    listItemPadding: platform === "ios" ? 10 : 12,
206
-    listNoteColor: "#808080",
207
-    listNoteSize: 13,
208
-
209
-    // Progress Bar
210
-    defaultProgressColor: "#E4202D",
211
-    inverseProgressColor: "#1A191B",
212
-
213
-    // Radio Button
214
-    radioBtnSize: platform === "ios" ? 25 : 23,
215
-    radioSelectedColorAndroid: "#E4202D",
216
-    radioBtnLineHeight: platform === "ios" ? 29 : 24,
217
-    get radioColor() {
218
-        return this.brandPrimary;
219
-    },
220
-
221
-    // Segment
222
-    segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
223
-    segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
224
-    segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
225
-    segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
226
-    segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
227
-    segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
228
-
229
-    // Spinner
230
-    defaultSpinnerColor: "#be1522",
231
-    inverseSpinnerColor: "#1A191B",
232
-
233
-    // Tab
234
-    tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
235
-    topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
236
-    topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
237
-    topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
238
-    topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
239
-
240
-    // Tabs
241
-    tabBgColor: "#F8F8F8",
242
-    tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
243
-    tabFontSize: 15,
244
-
245
-    // Text
246
-    textColor: "#000",
247
-    textDisabledColor: "#c1c1c1",
248
-    inverseTextColor: "#fff",
249
-    noteFontSize: 14,
250
-    get defaultTextColor() {
251
-        return this.textColor;
252
-    },
253
-
254
-    // Title
255
-    titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
256
-    titleFontSize: platform === "ios" ? 17 : 19,
257
-    subTitleFontSize: platform === "ios" ? 11 : 14,
258
-    subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
259
-    titleFontColor: platform === "ios" ? "#000" : "#FFF",
260
-
261
-
262
-    // CUSTOM
263
-    customMaterialIconColor: "#5d5d5d",
264
-    fetchedDataSectionListErrorText: "#898989",
265
-
266
-    // Calendar/Agenda
267
-    agendaBackgroundColor: '#f3f3f4',
268
-    agendaEmptyLine: '#dbdbdc',
269
-
270
-    // PROXIWASH
271
-    proxiwashFinishedColor: "rgba(54,165,22,0.31)",
272
-    proxiwashReadyColor: "transparent",
273
-    proxiwashRunningColor: "rgba(94,104,241,0.3)",
274
-    proxiwashBrokenColor: "rgba(162,162,162,0.31)",
275
-    proxiwashErrorColor: "rgba(204,7,0,0.31)",
276
-
277
-    // Screens
278
-    planningColor: '#d9b10a',
279
-    proximoColor: '#ec5904',
280
-    proxiwashColor: '#1fa5ee',
281
-    menuColor: '#e91314',
282
-    tutorinsaColor: '#f93943',
283
-
284
-
285
-    // Other
286
-    borderRadiusBase: platform === "ios" ? 5 : 2,
287
-    borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
288
-    contentPadding: 10,
289
-    dropdownLinkColor: "#414142",
290
-    inputLineHeight: 24,
291
-    deviceWidth,
292
-    deviceHeight,
293
-    isIphoneX,
294
-    inputGroupRoundedBorderRadius: 30,
295
-
296
-    //iPhoneX SafeArea
297
-    Inset: {
298
-        portrait: {
299
-            topInset: 24,
300
-            leftInset: 0,
301
-            rightInset: 0,
302
-            bottomInset: 34
303
-        },
304
-        landscape: {
305
-            topInset: 0,
306
-            leftInset: 44,
307
-            rightInset: 44,
308
-            bottomInset: 21
309
-        }
354
+    landscape: {
355
+      topInset: 0,
356
+      leftInset: 44,
357
+      rightInset: 44,
358
+      bottomInset: 21
310 359
     }
360
+  }
311 361
 };

+ 349
- 299
native-base-theme/variables/platformDark.js View File

@@ -1,311 +1,361 @@
1 1
 // @flow
2 2
 
3
-import color from "color";
3
+import color from 'color';
4
+import { Platform, Dimensions, PixelRatio } from 'react-native';
4 5
 
5
-import {Dimensions, PixelRatio, Platform} from "react-native";
6
+import { PLATFORM } from './commonColor';
6 7
 
7
-const deviceHeight = Dimensions.get("window").height;
8
-const deviceWidth = Dimensions.get("window").width;
8
+const deviceHeight = Dimensions.get('window').height;
9
+const deviceWidth = Dimensions.get('window').width;
9 10
 const platform = Platform.OS;
10 11
 const platformStyle = undefined;
11 12
 const isIphoneX =
12
-    platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
13
+  platform === PLATFORM.IOS &&
14
+  (deviceHeight === 812 ||
15
+    deviceWidth === 812 ||
16
+    deviceHeight === 896 ||
17
+    deviceWidth === 896);
13 18
 
14 19
 export default {
15
-    platformStyle,
16
-    platform,
17
-
18
-    //Accordion
19
-    headerStyle: "#edebed",
20
-    iconStyle: "#000",
21
-    contentStyle: "#f5f4f5",
22
-    expandedIconStyle: "#000",
23
-    accordionBorderColor: "#d3d3d3",
24
-
25
-    // Android
26
-    androidRipple: true,
27
-    androidRippleColor: "rgba(256, 256, 256, 0.3)",
28
-    androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
29
-    btnUppercaseAndroidText: true,
30
-
31
-    // Badge
32
-    badgeBg: "#ED1727",
33
-    badgeColor: "#fff",
34
-    badgePadding: platform === "ios" ? 3 : 0,
35
-
36
-    // Button
37
-    btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
38
-    btnTextColor: '#fff',
39
-    btnDisabledBg: "#b5b5b5",
40
-    buttonPadding: 6,
41
-    get btnPrimaryBg() {
42
-        return this.brandPrimary;
20
+  platformStyle,
21
+  platform,
22
+
23
+  // Accordion
24
+  accordionBorderColor: '#d3d3d3',
25
+  accordionContentPadding: 10,
26
+  accordionIconFontSize: 18,
27
+  contentStyle: '#f5f4f5',
28
+  expandedIconStyle: '#000',
29
+  headerStyle: '#edebed',
30
+  iconStyle: '#000',
31
+
32
+  // ActionSheet
33
+  elevation: 4,
34
+  containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
35
+  innerTouchableBackgroundColor: '#fff',
36
+  listItemHeight: 50,
37
+  listItemBorderColor: 'transparent',
38
+  marginHorizontal: -15,
39
+  marginLeft: 14,
40
+  marginTop: 15,
41
+  minHeight: 56,
42
+  padding: 15,
43
+  touchableTextColor: '#757575',
44
+
45
+  // Android
46
+  androidRipple: true,
47
+  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
48
+  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
49
+  buttonUppercaseAndroidText: true,
50
+
51
+  // Badge
52
+  badgeBg: '#ED1727',
53
+  badgeColor: '#fff',
54
+  badgePadding: platform === PLATFORM.IOS ? 3 : 0,
55
+
56
+  // Button
57
+  buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
58
+  buttonTextColor: '#fff',
59
+  buttonDisabledBg: '#b5b5b5',
60
+  buttonPadding: 6,
61
+  buttonDefaultActiveOpacity: 0.5,
62
+  buttonDefaultFlex: 1,
63
+  buttonDefaultBorderRadius: 2,
64
+  buttonDefaultBorderWidth: 1,
65
+  get buttonPrimaryBg() {
66
+    return this.brandPrimary;
67
+  },
68
+  get buttonPrimaryColor() {
69
+    return this.textColor;
70
+  },
71
+  get buttonInfoBg() {
72
+    return this.brandInfo;
73
+  },
74
+  get buttonInfoColor() {
75
+    return this.textColor;
76
+  },
77
+  get buttonSuccessBg() {
78
+    return this.brandSuccess;
79
+  },
80
+  get buttonSuccessColor() {
81
+    return this.textColor;
82
+  },
83
+  get buttonDangerBg() {
84
+    return this.brandDanger;
85
+  },
86
+  get buttonDangerColor() {
87
+    return this.textColor;
88
+  },
89
+  get buttonWarningBg() {
90
+    return this.brandWarning;
91
+  },
92
+  get buttonWarningColor() {
93
+    return this.textColor;
94
+  },
95
+  get buttonTextSize() {
96
+    return platform === PLATFORM.IOS
97
+      ? this.fontSizeBase * 1.1
98
+      : this.fontSizeBase - 1;
99
+  },
100
+  get buttonTextSizeLarge() {
101
+    return this.fontSizeBase * 1.5;
102
+  },
103
+  get buttonTextSizeSmall() {
104
+    return this.fontSizeBase * 0.8;
105
+  },
106
+  get borderRadiusLarge() {
107
+    return this.fontSizeBase * 3.8;
108
+  },
109
+  get iconSizeLarge() {
110
+    return this.iconFontSize * 1.5;
111
+  },
112
+  get iconSizeSmall() {
113
+    return this.iconFontSize * 0.6;
114
+  },
115
+
116
+  // Card
117
+  cardDefaultBg: '#2A2A2A',
118
+  cardBorderColor: '#1a1a1a',
119
+  cardBorderRadius: 2,
120
+  cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
121
+
122
+  // CheckBox
123
+  CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
124
+  CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
125
+  CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
126
+  CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
127
+  CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
128
+  CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
129
+  CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
130
+  checkboxBgColor: '#be1522',
131
+  checkboxSize: 20,
132
+  checkboxTickColor: '#fff',
133
+  checkboxDefaultColor: 'transparent',
134
+  checkboxTextShadowRadius: 0,
135
+
136
+  // Color
137
+  brandPrimary: '#be1522',
138
+  brandInfo: '#62B1F6',
139
+  brandSuccess: '#5cb85c',
140
+  brandDanger: '#d9534f',
141
+  brandWarning: '#f0ad4e',
142
+  brandDark: '#000',
143
+  brandLight: '#f4f4f4',
144
+
145
+  // Container
146
+  containerBgColor: '#222222',
147
+  sideMenuBgColor: "#1c1c1c",
148
+
149
+  // Date Picker
150
+  datePickerFlex: 1,
151
+  datePickerPadding: 10,
152
+  datePickerTextColor: '#fff',
153
+  datePickerBg: 'transparent',
154
+
155
+  // FAB
156
+  fabBackgroundColor: 'blue',
157
+  fabBorderRadius: 28,
158
+  fabBottom: 0,
159
+  fabButtonBorderRadius: 20,
160
+  fabButtonHeight: 40,
161
+  fabButtonLeft: 7,
162
+  fabButtonMarginBottom: 10,
163
+  fabContainerBottom: 20,
164
+  fabDefaultPosition: 20,
165
+  fabElevation: 4,
166
+  fabIconColor: '#fff',
167
+  fabIconSize: 24,
168
+  fabShadowColor: '#000',
169
+  fabShadowOffsetHeight: 2,
170
+  fabShadowOffsetWidth: 0,
171
+  fabShadowOpacity: 0.4,
172
+  fabShadowRadius: 2,
173
+  fabWidth: 56,
174
+
175
+  // Font
176
+  DefaultFontSize: 16,
177
+  fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
178
+  fontSizeBase: 15,
179
+  get fontSizeH1() {
180
+    return this.fontSizeBase * 1.8;
181
+  },
182
+  get fontSizeH2() {
183
+    return this.fontSizeBase * 1.6;
184
+  },
185
+  get fontSizeH3() {
186
+    return this.fontSizeBase * 1.4;
187
+  },
188
+
189
+  // Footer
190
+  footerHeight: 55,
191
+  footerDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
192
+  footerPaddingBottom: 0,
193
+
194
+  // FooterTab
195
+  tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
196
+  tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
197
+  activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
198
+  sTabBarActiveTextColor: '#007aff',
199
+  tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
200
+  tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
201
+
202
+  // Header
203
+  toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
204
+  toolbarDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
205
+  toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
206
+  toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
207
+  toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
208
+  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
209
+  searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
210
+  toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
211
+  toolbarDefaultBorder: platform === PLATFORM.IOS ? '#3f3f3f' : '#be1522',
212
+  iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
213
+  get statusBarColor() {
214
+    return color(this.toolbarDefaultBg)
215
+      .darken(0.2)
216
+      .hex();
217
+  },
218
+  get darkenHeader() {
219
+    return color(this.tabBgColor)
220
+      .darken(0.03)
221
+      .hex();
222
+  },
223
+
224
+  // Icon
225
+  iconFamily: 'Ionicons',
226
+  iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
227
+  iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
228
+
229
+  // InputGroup
230
+  inputFontSize: 17,
231
+  inputBorderColor: '#D9D5DC',
232
+  inputSuccessBorderColor: '#2b8339',
233
+  inputErrorBorderColor: '#ed2f2f',
234
+  inputHeightBase: 50,
235
+  get inputColor() {
236
+    return this.textColor;
237
+  },
238
+  get inputColorPlaceholder() {
239
+    return '#575757';
240
+  },
241
+
242
+  // Line Height
243
+  buttonLineHeight: 19,
244
+  lineHeightH1: 32,
245
+  lineHeightH2: 27,
246
+  lineHeightH3: 22,
247
+  lineHeight: platform === PLATFORM.IOS ? 20 : 24,
248
+  listItemSelected: '#be1522',
249
+
250
+  // List
251
+  listBg: 'transparent',
252
+  listBorderColor: '#3e3e3e',
253
+  listDividerBg: '#f4f4f4',
254
+  listBtnUnderlayColor: '#3a3a3a',
255
+  listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
256
+  listNoteColor: '#acacac',
257
+  listNoteSize: 13,
258
+
259
+  // Progress Bar
260
+  defaultProgressColor: '#E4202D',
261
+  inverseProgressColor: '#1A191B',
262
+
263
+  // Radio Button
264
+  radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
265
+  radioSelectedColorAndroid: '#be1522',
266
+  radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
267
+  get radioColor() {
268
+    return this.brandPrimary;
269
+  },
270
+
271
+  // Segment
272
+  segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
273
+  segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
274
+  segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
275
+  segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
276
+  segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
277
+  segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
278
+
279
+  // Spinner
280
+  defaultSpinnerColor: '#be1522',
281
+  inverseSpinnerColor: '#1A191B',
282
+
283
+  // Tab
284
+  tabBarDisabledTextColor: '#BDBDBD',
285
+  tabDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
286
+  topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
287
+  topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
288
+  topTabBarBorderColor: platform === PLATFORM.IOS ? '#3f3f3f' : '#fff',
289
+  topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
290
+
291
+  // Tabs
292
+  tabBgColor: '#2b2b2b',
293
+  tabIconColor: "#fff",
294
+  tabFontSize: 15,
295
+
296
+  // Text
297
+  textColor: '#ebebeb',
298
+  textDisabledColor: "#5b5b5b",
299
+  inverseTextColor: '#000',
300
+  noteFontSize: 14,
301
+  get defaultTextColor() {
302
+    return this.textColor;
303
+  },
304
+
305
+  // Title
306
+  titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
307
+  titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
308
+  subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
309
+  subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
310
+  titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
311
+
312
+  // CUSTOM
313
+  customMaterialIconColor: "#b3b3b3",
314
+  fetchedDataSectionListErrorText: "#acacac",
315
+
316
+  // Calendar/Agenda
317
+  agendaBackgroundColor: '#373737',
318
+  agendaEmptyLine: '#464646',
319
+
320
+  // PROXIWASH
321
+  proxiwashFinishedColor: "rgba(17,149,32,0.53)",
322
+  proxiwashReadyColor: "transparent",
323
+  proxiwashRunningColor: "rgba(29,59,175,0.65)",
324
+  proxiwashBrokenColor: "#000000",
325
+  proxiwashErrorColor: "rgba(213,8,0,0.57)",
326
+
327
+  // Screens
328
+  planningColor: '#d99e09',
329
+  proximoColor: '#ec5904',
330
+  proxiwashColor: '#1fa5ee',
331
+  menuColor: '#b81213',
332
+  tutorinsaColor: '#f93943',
333
+
334
+
335
+  // Other
336
+  borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
337
+  borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
338
+  contentPadding: 10,
339
+  dropdownLinkColor: '#414142',
340
+  inputLineHeight: 24,
341
+  deviceWidth,
342
+  deviceHeight,
343
+  isIphoneX,
344
+  inputGroupRoundedBorderRadius: 30,
345
+
346
+  // iPhoneX SafeArea
347
+  Inset: {
348
+    portrait: {
349
+      topInset: 24,
350
+      leftInset: 0,
351
+      rightInset: 0,
352
+      bottomInset: 34
43 353
     },
44
-    get btnPrimaryColor() {
45
-        return this.textColor;
46
-    },
47
-    get btnInfoBg() {
48
-        return this.brandInfo;
49
-    },
50
-    get btnInfoColor() {
51
-        return this.textColor;
52
-    },
53
-    get btnSuccessBg() {
54
-        return this.brandSuccess;
55
-    },
56
-    get btnSuccessColor() {
57
-        return this.textColor;
58
-    },
59
-    get btnDangerBg() {
60
-        return this.brandDanger;
61
-    },
62
-    get btnDangerColor() {
63
-        return this.textColor;
64
-    },
65
-    get btnWarningBg() {
66
-        return this.brandWarning;
67
-    },
68
-    get btnWarningColor() {
69
-        return this.textColor;
70
-    },
71
-    get btnTextSize() {
72
-        return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
73
-    },
74
-    get btnTextSizeLarge() {
75
-        return this.fontSizeBase * 1.5;
76
-    },
77
-    get btnTextSizeSmall() {
78
-        return this.fontSizeBase * 0.8;
79
-    },
80
-    get borderRadiusLarge() {
81
-        return this.fontSizeBase * 3.8;
82
-    },
83
-    get iconSizeLarge() {
84
-        return this.iconFontSize * 1.5;
85
-    },
86
-    get iconSizeSmall() {
87
-        return this.iconFontSize * 0.6;
88
-    },
89
-
90
-    // Card
91
-    cardDefaultBg: "#2A2A2A",
92
-    cardBorderColor: "#1a1a1a",
93
-    cardBorderRadius: 2,
94
-    cardItemPadding: platform === "ios" ? 10 : 12,
95
-
96
-    // CheckBox
97
-    CheckboxRadius: platform === "ios" ? 13 : 0,
98
-    CheckboxBorderWidth: platform === "ios" ? 1 : 2,
99
-    CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
100
-    CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
101
-    CheckboxIconSize: platform === "ios" ? 21 : 16,
102
-    CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
103
-    CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
104
-    checkboxBgColor: "#E4202D",
105
-    checkboxSize: 20,
106
-    checkboxTickColor: "#fff",
107
-
108
-    // Color
109
-    brandPrimary: "#be1522",
110
-    brandInfo: "#62B1F6",
111
-    brandSuccess: "#5cb85c",
112
-    brandDanger: "#d9534f",
113
-    brandWarning: "#f0ad4e",
114
-    brandDark: "#000",
115
-    brandLight: "#f4f4f4",
116
-
117
-    //Container
118
-    containerBgColor: "#222222",
119
-    sideMenuBgColor: "#1c1c1c",
120
-
121
-    //Date Picker
122
-    datePickerTextColor: "#fff",
123
-    datePickerBg: "transparent",
124
-
125
-    // Font
126
-    DefaultFontSize: 16,
127
-    fontFamily: platform === "ios" ? "System" : "Roboto",
128
-    fontSizeBase: 15,
129
-    get fontSizeH1() {
130
-        return this.fontSizeBase * 1.8;
131
-    },
132
-    get fontSizeH2() {
133
-        return this.fontSizeBase * 1.6;
134
-    },
135
-    get fontSizeH3() {
136
-        return this.fontSizeBase * 1.4;
137
-    },
138
-
139
-    // Footer
140
-    footerHeight: 55,
141
-    footerDefaultBg: platform === "ios" ? "#333333" : "#be1522",
142
-    footerPaddingBottom: 0,
143
-
144
-    // FooterTab
145
-    tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
146
-    tabBarTextSize: platform === "ios" ? 14 : 11,
147
-    activeTab: platform === "ios" ? "#007aff" : "#fff",
148
-    sTabBarActiveTextColor: "#007aff",
149
-    tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
150
-    tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
151
-
152
-    // Header
153
-    toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff",
154
-    toolbarDefaultBg: platform === "ios" ? "#333333" : "#be1522",
155
-    toolbarHeight: platform === "ios" ? 64 : 56,
156
-    toolbarSearchIconSize: platform === "ios" ? 20 : 23,
157
-    toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
158
-    toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
159
-    searchBarHeight: platform === "ios" ? 30 : 40,
160
-    searchBarInputHeight: platform === "ios" ? 30 : 50,
161
-    toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
162
-    toolbarDefaultBorder: platform === "ios" ? "#3f3f3f" : "#ba1f0f",
163
-    iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
164
-    get statusBarColor() {
165
-        return color(this.toolbarDefaultBg)
166
-            .darken(0.2)
167
-            .hex();
168
-    },
169
-    get darkenHeader() {
170
-        return color(this.tabBgColor)
171
-            .darken(0.03)
172
-            .hex();
173
-    },
174
-
175
-    // Icon
176
-    iconFamily: "Ionicons",
177
-    iconFontSize: platform === "ios" ? 30 : 28,
178
-    iconHeaderSize: platform === "ios" ? 33 : 24,
179
-
180
-    // InputGroup
181
-    inputFontSize: 17,
182
-    inputBorderColor: "#D9D5DC",
183
-    inputSuccessBorderColor: "#2b8339",
184
-    inputErrorBorderColor: "#ed2f2f",
185
-    inputHeightBase: 50,
186
-    get inputColor() {
187
-        return this.textColor;
188
-    },
189
-    get inputColorPlaceholder() {
190
-        return "#575757";
191
-    },
192
-
193
-    // Line Height
194
-    btnLineHeight: 19,
195
-    lineHeightH1: 32,
196
-    lineHeightH2: 27,
197
-    lineHeightH3: 22,
198
-    lineHeight: platform === "ios" ? 20 : 24,
199
-    listItemSelected: "#be1522",
200
-
201
-    // List
202
-    listBg: "transparent",
203
-    listBorderColor: "#3e3e3e",
204
-    listDividerBg: "#f4f4f4",
205
-    listBtnUnderlayColor: "#3a3a3a",
206
-    listItemPadding: platform === "ios" ? 10 : 12,
207
-    listNoteColor: "#acacac",
208
-    listNoteSize: 13,
209
-
210
-    // Progress Bar
211
-    defaultProgressColor: "#E4202D",
212
-    inverseProgressColor: "#1A191B",
213
-
214
-    // Radio Button
215
-    radioBtnSize: platform === "ios" ? 25 : 23,
216
-    radioSelectedColorAndroid: "#E4202D",
217
-    radioBtnLineHeight: platform === "ios" ? 29 : 24,
218
-    get radioColor() {
219
-        return "#be1522";
220
-    },
221
-
222
-    // Segment
223
-    segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
224
-    segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
225
-    segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
226
-    segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
227
-    segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
228
-    segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
229
-
230
-    // Spinner
231
-    defaultSpinnerColor: "#be1522",
232
-    inverseSpinnerColor: "#1A191B",
233
-
234
-    // Tab
235
-    tabDefaultBg: platform === "ios" ? "#333333" : "#be1522",
236
-    topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
237
-    topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
238
-    topTabBarBorderColor: platform === "ios" ? "#3f3f3f" : "#fff",
239
-    topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
240
-
241
-    // Tabs
242
-    tabBgColor: "#2b2b2b",
243
-    tabIconColor: "#fff",
244
-    tabFontSize: 15,
245
-
246
-    // Text
247
-    textColor: "#ebebeb",
248
-    textDisabledColor: "#5b5b5b",
249
-    inverseTextColor: "#000",
250
-    noteFontSize: 14,
251
-    get defaultTextColor() {
252
-        return this.textColor;
253
-    },
254
-
255
-    // Title
256
-    titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
257
-    titleFontSize: platform === "ios" ? 17 : 19,
258
-    subTitleFontSize: platform === "ios" ? 11 : 14,
259
-    subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
260
-    titleFontColor: platform === "ios" ? "#FFF" : "#FFF",
261
-
262
-
263
-    // CUSTOM
264
-    customMaterialIconColor: "#b3b3b3",
265
-    fetchedDataSectionListErrorText: "#acacac",
266
-
267
-    // Calendar/Agenda
268
-    agendaBackgroundColor: '#373737',
269
-    agendaEmptyLine: '#464646',
270
-
271
-    // PROXIWASH
272
-    proxiwashFinishedColor: "rgba(17,149,32,0.53)",
273
-    proxiwashReadyColor: "transparent",
274
-    proxiwashRunningColor: "rgba(29,59,175,0.65)",
275
-    proxiwashBrokenColor: "#000000",
276
-    proxiwashErrorColor: "rgba(213,8,0,0.57)",
277
-
278
-    // Screens
279
-    planningColor: '#d99e09',
280
-    proximoColor: '#ec5904',
281
-    proxiwashColor: '#1fa5ee',
282
-    menuColor: '#b81213',
283
-    tutorinsaColor: '#f93943',
284
-
285
-    // Other
286
-    borderRadiusBase: platform === "ios" ? 5 : 2,
287
-    borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
288
-    contentPadding: 10,
289
-    dropdownLinkColor: "#414142",
290
-    inputLineHeight: 24,
291
-    deviceWidth,
292
-    deviceHeight,
293
-    isIphoneX,
294
-    inputGroupRoundedBorderRadius: 30,
295
-
296
-    //iPhoneX SafeArea
297
-    Inset: {
298
-        portrait: {
299
-            topInset: 24,
300
-            leftInset: 0,
301
-            rightInset: 0,
302
-            bottomInset: 34
303
-        },
304
-        landscape: {
305
-            topInset: 0,
306
-            leftInset: 44,
307
-            rightInset: 44,
308
-            bottomInset: 21
309
-        }
354
+    landscape: {
355
+      topInset: 0,
356
+      leftInset: 44,
357
+      rightInset: 44,
358
+      bottomInset: 21
310 359
     }
360
+  }
311 361
 };

Loading…
Cancel
Save