Browse Source

Updated native base theme

keplyx 2 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