Browse Source

Added first application draft

keplyx 2 years ago
parent
commit
dd2cb38c58
73 changed files with 6788 additions and 259 deletions
  1. 51
    16
      App.js
  2. BIN
      assets/amicale.png
  3. BIN
      assets/drawer-cover.png
  4. BIN
      assets/icon.png
  5. BIN
      assets/image-missing.png
  6. BIN
      assets/splash.png
  7. 33
    0
      components/CustomHeader.js
  8. 146
    0
      components/SideMenu.js
  9. 16
    0
      components/TabBarIcon.js
  10. 38
    0
      native-base-theme/components/Badge.js
  11. 13
    0
      native-base-theme/components/Body.js
  12. 396
    0
      native-base-theme/components/Button.js
  13. 37
    0
      native-base-theme/components/Card.js
  14. 196
    0
      native-base-theme/components/CardItem.js
  15. 38
    0
      native-base-theme/components/CheckBox.js
  16. 16
    0
      native-base-theme/components/Container.js
  17. 16
    0
      native-base-theme/components/Content.js
  18. 29
    0
      native-base-theme/components/Fab.js
  19. 118
    0
      native-base-theme/components/Footer.js
  20. 79
    0
      native-base-theme/components/FooterTab.js
  21. 90
    0
      native-base-theme/components/Form.js
  22. 13
    0
      native-base-theme/components/H1.js
  23. 13
    0
      native-base-theme/components/H2.js
  24. 13
    0
      native-base-theme/components/H3.js
  25. 394
    0
      native-base-theme/components/Header.js
  26. 12
    0
      native-base-theme/components/Icon.js
  27. 19
    0
      native-base-theme/components/Input.js
  28. 132
    0
      native-base-theme/components/InputGroup.js
  29. 240
    0
      native-base-theme/components/Item.js
  30. 14
    0
      native-base-theme/components/Label.js
  31. 13
    0
      native-base-theme/components/Left.js
  32. 444
    0
      native-base-theme/components/ListItem.js
  33. 16
    0
      native-base-theme/components/Picker.android.js
  34. 9
    0
      native-base-theme/components/Picker.ios.js
  35. 16
    0
      native-base-theme/components/Picker.js
  36. 28
    0
      native-base-theme/components/Radio.js
  37. 16
    0
      native-base-theme/components/Right.js
  38. 56
    0
      native-base-theme/components/Segment.js
  39. 49
    0
      native-base-theme/components/Separator.js
  40. 11
    0
      native-base-theme/components/Spinner.js
  41. 18
    0
      native-base-theme/components/Subtitle.js
  42. 48
    0
      native-base-theme/components/SwipeRow.js
  43. 11
    0
      native-base-theme/components/Switch.js
  44. 12
    0
      native-base-theme/components/Tab.js
  45. 57
    0
      native-base-theme/components/TabBar.js
  46. 26
    0
      native-base-theme/components/TabContainer.js
  47. 39
    0
      native-base-theme/components/TabHeading.js
  48. 17
    0
      native-base-theme/components/Text.js
  49. 25
    0
      native-base-theme/components/Textarea.js
  50. 42
    0
      native-base-theme/components/Thumbnail.js
  51. 20
    0
      native-base-theme/components/Title.js
  52. 40
    0
      native-base-theme/components/Toast.js
  53. 13
    0
      native-base-theme/components/View.js
  54. 242
    0
      native-base-theme/components/index.js
  55. 283
    0
      native-base-theme/variables/commonColor.js
  56. 283
    0
      native-base-theme/variables/material.js
  57. 283
    0
      native-base-theme/variables/platform.js
  58. 283
    0
      native-base-theme/variables/platformDark.js
  59. 9
    0
      navigation/AppNavigator.js
  60. 24
    0
      navigation/MainDrawerNavigator.js
  61. 58
    0
      navigation/MainTabNavigator.js
  62. 1522
    242
      package-lock.json
  63. 14
    1
      package.json
  64. 226
    0
      screens/AboutScreen.js
  65. 28
    0
      screens/HomeScreen.js
  66. 24
    0
      screens/PlanningScreen.js
  67. 113
    0
      screens/ProximoScreen.js
  68. 24
    0
      screens/ProxiwashScreen.js
  69. 56
    0
      screens/SettingsScreen.js
  70. 24
    0
      translations/en.json
  71. 24
    0
      translations/fr.json
  72. 23
    0
      utils/LocaleManager.js
  73. 57
    0
      utils/ThemeManager.js

+ 51
- 16
App.js View File

@@ -1,19 +1,54 @@
1 1
 import React from 'react';
2
-import { StyleSheet, Text, View } from 'react-native';
2
+import {Dimensions, StyleSheet, View, Text} from 'react-native';
3
+import {StyleProvider} from 'native-base';
4
+import AppNavigator from './navigation/AppNavigator';
5
+import ThemeManager from './utils/ThemeManager';
6
+import LocaleManager from './utils/LocaleManager';
7
+import * as Font from 'expo-font';
3 8
 
4
-export default function App() {
5
-  return (
6
-    <View style={styles.container}>
7
-      <Text>Open up App.js to start working on your app!</Text>
8
-    </View>
9
-  );
10
-}
11 9
 
12
-const styles = StyleSheet.create({
13
-  container: {
14
-    flex: 1,
15
-    backgroundColor: '#fff',
16
-    alignItems: 'center',
17
-    justifyContent: 'center',
18
-  },
19
-});
10
+export default class App extends React.Component {
11
+
12
+    constructor(props) {
13
+        super(props);
14
+        LocaleManager.getInstance().initTranslations();
15
+        this.updateTheme = this.updateTheme.bind(this);
16
+        this.state = {
17
+            isLoading: true,
18
+            currentTheme: undefined,
19
+        };
20
+    }
21
+
22
+    async componentWillMount() {
23
+        await Font.loadAsync({
24
+            'Roboto': require('native-base/Fonts/Roboto.ttf'),
25
+            'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
26
+        });
27
+        ThemeManager.getInstance().setUpdateThemeCallback(this.updateTheme);
28
+        await ThemeManager.getInstance().getDataFromPreferences();
29
+        this.setState({
30
+            isLoading: false,
31
+            currentTheme: ThemeManager.getInstance().getCurrentTheme()
32
+        });
33
+    }
34
+
35
+    updateTheme() {
36
+        console.log('update theme called');
37
+        // Change not propagating, need to restart the app
38
+        // this.setState({
39
+        //     currentTheme: ThemeManager.getInstance().getCurrentTheme()
40
+        // });
41
+    }
42
+
43
+    render() {
44
+        if (this.state.isLoading) {
45
+            return <View/>;
46
+        }
47
+        console.log('rendering');
48
+        // console.log(this.state.currentTheme.variables.containerBgColor);
49
+        return (
50
+            <StyleProvider style={this.state.currentTheme}>
51
+                <AppNavigator/>
52
+            </StyleProvider>);
53
+    }
54
+}

BIN
assets/amicale.png View File


BIN
assets/drawer-cover.png View File


BIN
assets/icon.png View File


BIN
assets/image-missing.png View File


BIN
assets/splash.png View File


+ 33
- 0
components/CustomHeader.js View File

@@ -0,0 +1,33 @@
1
+import React from "react";
2
+import {Body, Button, Header, Icon, Left, Right, Title} from "native-base";
3
+import {StyleSheet} from "react-native";
4
+import {getStatusBarHeight} from "react-native-status-bar-height";
5
+
6
+export default class CustomHeader extends React.Component {
7
+    render() {
8
+        return (
9
+            <Header style={styles.header}>
10
+                <Left>
11
+                    <Button
12
+                        transparent
13
+                        onPress={() => this.props.navigation.toggleDrawer()}
14
+                    >
15
+                        <Icon name="menu"/>
16
+                    </Button>
17
+                </Left>
18
+                <Body>
19
+                    <Title>{this.props.title}</Title>
20
+                </Body>
21
+                <Right/>
22
+            </Header>);
23
+    }
24
+};
25
+
26
+
27
+// Fix header in status bar on Android
28
+const styles = StyleSheet.create({
29
+    header: {
30
+        paddingTop: getStatusBarHeight(),
31
+        height: 54 + getStatusBarHeight(),
32
+    },
33
+});

+ 146
- 0
components/SideMenu.js View File

@@ -0,0 +1,146 @@
1
+import React from 'react';
2
+import {Platform, Dimensions, ScrollView, StyleSheet, View, Image, FlatList} from 'react-native';
3
+import {Drawer} from 'react-native-paper';
4
+import {Badge, Text, Container, Content, Icon, Left, List, ListItem, Right} from "native-base";
5
+import i18n from "i18n-js";
6
+
7
+const deviceHeight = Dimensions.get("window").height;
8
+
9
+const drawerCover = require("../assets/drawer-cover.png");
10
+
11
+export default class SideBar extends React.Component {
12
+
13
+    constructor(props) {
14
+        super(props);
15
+        this.state = {
16
+            active: 'Home',
17
+        };
18
+        this.dataSet = [
19
+            {
20
+                name: i18n.t('screens.home'),
21
+                route: "Home",
22
+                icon: "home",
23
+                bg: "#C5F442"
24
+                // types: "11" // Shows the badge
25
+            },
26
+            {
27
+                name: i18n.t('screens.planning'),
28
+                route: "Planning",
29
+                icon: "calendar-range",
30
+                bg: "#477EEA",
31
+                // types: "11"
32
+            },
33
+            {
34
+                name: "Proxiwash",
35
+                route: "Proxiwash",
36
+                icon: "washing-machine",
37
+                bg: "#477EEA",
38
+                // types: "11"
39
+            },
40
+            {
41
+                name: "Proximo",
42
+                route: "Proximo",
43
+                icon: "shopping",
44
+                bg: "#477EEA",
45
+                // types: "11"
46
+            },
47
+            {
48
+                name: i18n.t('screens.settings'),
49
+                route: "Settings",
50
+                icon: "settings",
51
+                bg: "#477EEA",
52
+                // types: "11"
53
+            },
54
+            {
55
+                name: i18n.t('screens.about'),
56
+                route: "About",
57
+                icon: "information",
58
+                bg: "#477EEA",
59
+                // types: "11"
60
+            },
61
+        ];
62
+    }
63
+
64
+    navigateToScreen = (route) => () => {
65
+        this.props.navigation.navigate(route);
66
+        this.props.navigation.closeDrawer();
67
+        this.setState({active: route});
68
+    };
69
+
70
+    render() {
71
+        return (
72
+            <Container>
73
+                <Content
74
+                    bounces={false}
75
+                    style={{ flex: 1, top: -1 }}
76
+                >
77
+                    <Image source={drawerCover} style={styles.drawerCover} />
78
+
79
+                    <FlatList
80
+                        data={this.dataSet}
81
+                        extraData={this.state}
82
+                        keyExtractor={(item, index) => item.route}
83
+                        renderItem={({item}) =>
84
+                            <ListItem
85
+                                button
86
+                                noBorder={item.route !== 'Proximo'} // Display a separator before settings
87
+                                selected={this.state.active === item.route}
88
+                                onPress={
89
+                                    this.navigateToScreen(item.route)
90
+                                }
91
+                            >
92
+                                <Left>
93
+                                    <Icon
94
+                                        active
95
+                                        name={item.icon}
96
+                                        type={'MaterialCommunityIcons'}
97
+                                        style={{ color: "#777", fontSize: 26, width: 30 }}
98
+                                    />
99
+                                    <Text style={styles.text}>
100
+                                        {item.name}
101
+                                    </Text>
102
+                                </Left>
103
+                                {item.types &&
104
+                                <Right style={{ flex: 1 }}>
105
+                                    <Badge
106
+                                        style={{
107
+                                            borderRadius: 3,
108
+                                            height: 25,
109
+                                            width: 72,
110
+                                            backgroundColor: item.bg
111
+                                        }}
112
+                                    >
113
+                                        <Text
114
+                                            style={styles.badgeText}
115
+                                        >{`${item.types} Types`}</Text>
116
+                                    </Badge>
117
+                                </Right>}
118
+                            </ListItem>}
119
+                    />
120
+                </Content>
121
+            </Container>
122
+        );
123
+    }
124
+}
125
+
126
+const styles = StyleSheet.create({
127
+    drawerCover: {
128
+        alignSelf: "stretch",
129
+        height: deviceHeight / 4,
130
+        width: null,
131
+        position: "relative",
132
+        marginBottom: 10,
133
+        marginTop: 20
134
+    },
135
+    text: {
136
+        fontWeight: Platform.OS === "ios" ? "500" : "400",
137
+        fontSize: 16,
138
+        marginLeft: 20
139
+    },
140
+    badgeText: {
141
+        fontSize: Platform.OS === "ios" ? 13 : 11,
142
+        fontWeight: "400",
143
+        textAlign: "center",
144
+        marginTop: Platform.OS === "android" ? -3 : undefined
145
+    }
146
+});

+ 16
- 0
components/TabBarIcon.js View File

@@ -0,0 +1,16 @@
1
+import React from 'react';
2
+import {Ionicons} from '@expo/vector-icons/build/Icons';
3
+
4
+export default class TabBarIcon extends React.Component {
5
+    render() {
6
+        return (
7
+            <Ionicons
8
+                name={this.props.name}
9
+                size={26}
10
+                style={{marginBottom: -3}}
11
+                color={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
12
+            />
13
+        );
14
+    }
15
+
16
+}

+ 38
- 0
native-base-theme/components/Badge.js View File

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

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

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

+ 396
- 0
native-base-theme/components/Button.js View File

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

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

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

+ 196
- 0
native-base-theme/components/CardItem.js View File

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

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

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

+ 16
- 0
native-base-theme/components/Container.js View File

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

+ 16
- 0
native-base-theme/components/Content.js View File

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

+ 29
- 0
native-base-theme/components/Fab.js View File

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

+ 118
- 0
native-base-theme/components/Footer.js View File

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

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

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

+ 90
- 0
native-base-theme/components/Form.js View File

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

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

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

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

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

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

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

+ 394
- 0
native-base-theme/components/Header.js View File

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

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

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

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

@@ -0,0 +1,19 @@
1
+// @flow
2
+
3
+import variable from './../variables/platform';
4
+
5
+export default (variables /*: * */ = variable) => {
6
+  const inputTheme = {
7
+    '.multiline': {
8
+      height: null,
9
+    },
10
+    height: variables.inputHeightBase,
11
+    color: variables.inputColor,
12
+    paddingLeft: 5,
13
+    paddingRight: 5,
14
+    flex: 1,
15
+    fontSize: variables.inputFontSize
16
+  };
17
+
18
+  return inputTheme;
19
+};

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

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

+ 240
- 0
native-base-theme/components/Item.js View File

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

+ 14
- 0
native-base-theme/components/Label.js View File

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

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

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

+ 444
- 0
native-base-theme/components/ListItem.js View File

@@ -0,0 +1,444 @@
1
+// @flow
2
+
3
+import { Platform, PixelRatio } from "react-native";
4
+
5
+import pickerTheme from "./Picker";
6
+import variable from "./../variables/platform";
7
+
8
+export default (variables /*: * */ = variable) => {
9
+  const platform = variables.platform;
10
+  const selectedStyle = {
11
+    "NativeBase.Text": {
12
+      color: variables.listItemSelected
13
+    },
14
+    "NativeBase.Icon": {
15
+      color: variables.listItemSelected
16
+    }
17
+  };
18
+
19
+  const listItemTheme = {
20
+    "NativeBase.InputGroup": {
21
+      "NativeBase.Icon": {
22
+        paddingRight: 5
23
+      },
24
+      "NativeBase.IconNB": {
25
+        paddingRight: 5
26
+      },
27
+      "NativeBase.Input": {
28
+        paddingHorizontal: 5
29
+      },
30
+      flex: 1,
31
+      borderWidth: null,
32
+      margin: -10,
33
+      borderBottomColor: "transparent"
34
+    },
35
+    ".searchBar": {
36
+      "NativeBase.Item": {
37
+        "NativeBase.Icon": {
38
+          backgroundColor: "transparent",
39
+          color: variables.dropdownLinkColor,
40
+          fontSize:
41
+            platform === "ios"
42
+              ? variables.iconFontSize - 10
43
+              : variables.iconFontSize - 5,
44
+          alignItems: "center",
45
+          marginTop: 2,
46
+          paddingRight: 8
47
+        },
48
+        "NativeBase.IconNB": {
49
+          backgroundColor: "transparent",
50
+          color: null,
51
+          alignSelf: "center"
52
+        },
53
+        "NativeBase.Input": {
54
+          alignSelf: "center"
55
+        },
56
+        alignSelf: "center",
57
+        alignItems: "center",
58
+        justifyContent: "flex-start",
59
+        flex: 1,
60
+        height: platform === "ios" ? 30 : 40,
61
+        borderColor: "transparent",
62
+        backgroundColor: "#fff",
63
+        borderRadius: 5
64
+      },
65
+      "NativeBase.Button": {
66
+        ".transparent": {
67
+          "NativeBase.Text": {
68
+            fontWeight: "500"
69
+          },
70
+          paddingHorizontal: null,
71
+          paddingLeft: platform === "ios" ? 10 : null
72
+        },
73
+        paddingHorizontal: platform === "ios" ? undefined : null,
74
+        width: platform === "ios" ? undefined : 0,
75
+        height: platform === "ios" ? undefined : 0
76
+      },
77
+      backgroundColor: variables.toolbarInputColor,
78
+      padding: 10,
79
+      marginLeft: null
80
+    },
81
+    "NativeBase.CheckBox": {
82
+      marginLeft: -10,
83
+      marginRight: 10
84
+    },
85
+    ".first": {
86
+      ".itemHeader": {
87
+        paddingTop: variables.listItemPadding + 3
88
+      }
89
+    },
90
+    ".itemHeader": {
91
+      ".first": {
92
+        paddingTop: variables.listItemPadding + 3
93
+      },
94
+      borderBottomWidth: platform === "ios" ? variables.borderWidth : null,
95
+      marginLeft: null,
96
+      padding: variables.listItemPadding,
97
+      paddingLeft: variables.listItemPadding + 5,
98
+      paddingTop:
99
+        platform === "ios" ? variables.listItemPadding + 25 : undefined,
100
+      paddingBottom:
101
+        platform === "android" ? variables.listItemPadding + 20 : undefined,
102
+      flexDirection: "row",
103
+      borderColor: variables.listBorderColor,
104
+      "NativeBase.Text": {
105
+        fontSize: 14,
106
+        color: platform === "ios" ? undefined : variables.listNoteColor
107
+      }
108
+    },
109
+    ".itemDivider": {
110
+      borderBottomWidth: null,
111
+      marginLeft: null,
112
+      padding: variables.listItemPadding,
113
+      paddingLeft: variables.listItemPadding + 5,
114
+      backgroundColor: variables.listDividerBg,
115
+      flexDirection: "row",
116
+      borderColor: variables.listBorderColor
117
+    },
118
+    ".selected": {
119
+      "NativeBase.Left": {
120
+        ...selectedStyle
121
+      },
122
+      "NativeBase.Body": {
123
+        ...selectedStyle
124
+      },
125
+      "NativeBase.Right": {
126
+        ...selectedStyle
127
+      },
128
+      ...selectedStyle
129
+    },
130
+    "NativeBase.Left": {
131
+      "NativeBase.Body": {
132
+        "NativeBase.Text": {
133
+          ".note": {
134
+            color: variables.listNoteColor,
135
+            fontWeight: "200"
136
+          },
137
+          fontWeight: "600"
138
+        },
139
+        marginLeft: 10,
140
+        alignItems: null,
141
+        alignSelf: null
142
+      },
143
+      "NativeBase.Icon": {
144
+        width: variables.iconFontSize - 10,
145
+        fontSize: variables.iconFontSize - 10
146
+      },
147
+      "NativeBase.IconNB": {
148
+        width: variables.iconFontSize - 10,
149
+        fontSize: variables.iconFontSize - 10
150
+      },
151
+      "NativeBase.Text": {
152
+        alignSelf: "center"
153
+      },
154
+      flexDirection: "row"
155
+    },
156
+    "NativeBase.Body": {
157
+      "NativeBase.Text": {
158
+        marginHorizontal: variables.listItemPadding,
159
+        ".note": {
160
+          color: variables.listNoteColor,
161
+          fontWeight: "200"
162
+        }
163
+      },
164
+      alignSelf: null,
165
+      alignItems: null
166
+    },
167
+    "NativeBase.Right": {
168
+      "NativeBase.Badge": {
169
+        alignSelf: null
170
+      },
171
+      "NativeBase.PickerNB": {
172
+        "NativeBase.Button": {
173
+          marginRight: -15,
174
+          "NativeBase.Text": {
175
+            color: variables.topTabBarActiveTextColor
176
+          }
177
+        }
178
+      },
179
+      "NativeBase.Button": {
180
+        alignSelf: null,
181
+        ".transparent": {
182
+          "NativeBase.Text": {
183
+            color: variables.topTabBarActiveTextColor
184
+          }
185
+        }
186
+      },
187
+      "NativeBase.Icon": {
188
+        alignSelf: null,
189
+        fontSize: variables.iconFontSize - 8,
190
+        color: "#c9c8cd"
191
+      },
192
+      "NativeBase.IconNB": {
193
+        alignSelf: null,
194
+        fontSize: variables.iconFontSize - 8,
195
+        color: "#c9c8cd"
196
+      },
197
+      "NativeBase.Text": {
198
+        ".note": {
199
+          color: variables.listNoteColor,
200
+          fontWeight: "200"
201
+        },
202
+        alignSelf: null
203
+      },
204
+      "NativeBase.Thumbnail": {
205
+        alignSelf: null
206
+      },
207
+      "NativeBase.Image": {
208
+        alignSelf: null
209
+      },
210
+      "NativeBase.Radio": {
211
+        alignSelf: null
212
+      },
213
+      "NativeBase.Checkbox": {
214
+        alignSelf: null
215
+      },
216
+      "NativeBase.Switch": {
217
+        alignSelf: null
218
+      },
219
+      padding: null,
220
+      flex: 0.28
221
+    },
222
+    "NativeBase.Text": {
223
+      ".note": {
224
+        color: variables.listNoteColor,
225
+        fontWeight: "200"
226
+      },
227
+      alignSelf: "center"
228
+    },
229
+    ".last": {
230
+      marginLeft: -(variables.listItemPadding + 5),
231
+      paddingLeft: (variables.listItemPadding + 5) * 2,
232
+      top: 1
233
+    },
234
+    ".avatar": {
235
+      "NativeBase.Left": {
236
+        flex: 0,
237
+        alignSelf: "flex-start",
238
+        paddingTop: 14
239
+      },
240
+      "NativeBase.Body": {
241
+        "NativeBase.Text": {
242
+          marginLeft: null
243
+        },
244
+        flex: 1,
245
+        paddingVertical: variables.listItemPadding,
246
+        borderBottomWidth: variables.borderWidth,
247
+        borderColor: variables.listBorderColor,
248
+        marginLeft: variables.listItemPadding + 5
249
+      },
250
+      "NativeBase.Right": {
251
+        "NativeBase.Text": {
252
+          ".note": {
253
+            fontSize: variables.noteFontSize - 2
254
+          }
255
+        },
256
+        flex: 0,
257
+        paddingRight: variables.listItemPadding + 5,
258
+        alignSelf: "stretch",
259
+        paddingVertical: variables.listItemPadding,
260
+        borderBottomWidth: variables.borderWidth,
261
+        borderColor: variables.listBorderColor
262
+      },
263
+      ".noBorder": {
264
+        "NativeBase.Body": {
265
+          borderBottomWidth: null
266
+        },
267
+        "NativeBase.Right": {
268
+          borderBottomWidth: null
269
+        }
270
+      },
271
+      borderBottomWidth: null,
272
+      paddingVertical: null,
273
+      paddingRight: null
274
+    },
275
+    ".thumbnail": {
276
+      "NativeBase.Left": {
277
+        flex: 0
278
+      },
279
+      "NativeBase.Body": {
280
+        "NativeBase.Text": {
281
+          marginLeft: null
282
+        },
283
+        flex: 1,
284
+        paddingVertical: variables.listItemPadding + 8,
285
+        borderBottomWidth: variables.borderWidth,
286
+        borderColor: variables.listBorderColor,
287
+        marginLeft: variables.listItemPadding + 5
288
+      },
289
+      "NativeBase.Right": {
290
+        "NativeBase.Button": {
291
+          ".transparent": {
292
+            "NativeBase.Text": {
293
+              fontSize: variables.listNoteSize,
294
+              color: variables.sTabBarActiveTextColor
295
+            }
296
+          },
297
+          height: null
298
+        },
299
+        flex: 0,
300
+        justifyContent: "center",
301
+        alignSelf: "stretch",
302
+        paddingRight: variables.listItemPadding + 5,
303
+        paddingVertical: variables.listItemPadding + 5,
304
+        borderBottomWidth: variables.borderWidth,
305
+        borderColor: variables.listBorderColor
306
+      },
307
+      ".noBorder": {
308
+        "NativeBase.Body": {
309
+          borderBottomWidth: null
310
+        },
311
+        "NativeBase.Right": {
312
+          borderBottomWidth: null
313
+        }
314
+      },
315
+      borderBottomWidth: null,
316
+      paddingVertical: null,
317
+      paddingRight: null
318
+    },
319
+    ".icon": {
320
+      ".last": {
321
+        "NativeBase.Body": {
322
+          borderBottomWidth: null
323
+        },
324
+        "NativeBase.Right": {
325
+          borderBottomWidth: null
326
+        },
327
+        borderBottomWidth: variables.borderWidth,
328
+        borderColor: variables.listBorderColor
329
+      },
330
+      "NativeBase.Left": {
331
+        "NativeBase.Button": {
332
+          "NativeBase.IconNB": {