vergnet
/
application-amicale
Watch 5
Star 5
Fork 5
Code Issues 0 Pull Requests 0 Releases 5 Wiki Activity
Browse Source

Added first application draft

keplyx 4 years ago
parent
2d641579aa
commit
dd2cb38c58
73 changed files with 6788 additions and 259 deletions
Unified View Show Diff Stats
  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 
 import React from 'react';
 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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": {
333 
+            marginHorizontal: null,
334 
+            fontSize: variables.iconFontSize - 5
335 
+          },
336 
+          "NativeBase.Icon": {
337 
+            marginHorizontal: null,
338 
+            fontSize: variables.iconFontSize - 8
339 
+          },
340 
+          alignSelf: "center",
341 
+          height: 29,
342 
+          width: 29,
343 
+          borderRadius: 6,
344 
+          paddingVertical: null,
345 
+          paddingHorizontal: null,
346 
+          alignItems: "center",
347 
+          justifyContent: "center"
348 
+        },
349 
+        "NativeBase.Icon": {
350 
+          width: variables.iconFontSize - 5,
351 
+          fontSize: variables.iconFontSize - 2
352 
+        },
353 
+        "NativeBase.IconNB": {
354 
+          width: variables.iconFontSize - 5,
355 
+          fontSize: variables.iconFontSize - 2
356 
+        },
357 
+        paddingRight: variables.listItemPadding + 5,
358 
+        flex: 0,
359 
+        height: 44,
360 
+        justifyContent: "center",
361 
+        alignItems: "center"
362 
+      },
363 
+      "NativeBase.Body": {
364 
+        "NativeBase.Text": {
365 
+          marginLeft: null,
366 
+          fontSize: 17
367 
+        },
368 
+        flex: 1,
369 
+        height: 44,
370 
+        justifyContent: "center",
371 
+        borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
372 
+        borderColor: variables.listBorderColor
373 
+      },
374 
+      "NativeBase.Right": {
375 
+        "NativeBase.Text": {
376 
+          textAlign: "center",
377 
+          color: "#8F8E95",
378 
+          fontSize: 17
379 
+        },
380 
+        "NativeBase.IconNB": {
381 
+          color: "#C8C7CC",
382 
+          fontSize: variables.iconFontSize - 10,
383 
+          alignSelf: "center",
384 
+          paddingLeft: 10,
385 
+          paddingTop: 3
386 
+        },
387 
+        "NativeBase.Icon": {
388 
+          color: "#C8C7CC",
389 
+          fontSize: variables.iconFontSize - 10,
390 
+          alignSelf: "center",
391 
+          paddingLeft: 10,
392 
+          paddingTop: 3
393 
+        },
394 
+        "NativeBase.Switch": {
395 
+          marginRight: Platform.OS === "ios" ? undefined : -5,
396 
+          alignSelf: null
397 
+        },
398 
+        "NativeBase.PickerNB": {
399 
+          ...pickerTheme()
400 
+        },
401 
+        flexDirection: "row",
402 
+        alignItems: "center",
403 
+        flex: 0,
404 
+        alignSelf: "stretch",
405 
+        height: 44,
406 
+        justifyContent: "flex-end",
407 
+        borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
408 
+        borderColor: variables.listBorderColor,
409 
+        paddingRight: variables.listItemPadding + 5
410 
+      },
411 
+      ".noBorder": {
412 
+        "NativeBase.Body": {
413 
+          borderBottomWidth: null
414 
+        },
415 
+        "NativeBase.Right": {
416 
+          borderBottomWidth: null
417 
+        }
418 
+      },
419 
+      borderBottomWidth: null,
420 
+      paddingVertical: null,
421 
+      paddingRight: null,
422 
+      height: 44,
423 
+      justifyContent: "center"
424 
+    },
425 
+    ".noBorder": {
426 
+      borderBottomWidth: null
427 
+    },
428 
+    ".noIndent": {
429 
+      marginLeft: null,
430 
+      padding: variables.listItemPadding,
431 
+      paddingLeft: variables.listItemPadding + 6
432 
+    },
433 
+    alignItems: "center",
434 
+    flexDirection: "row",
435 
+    paddingRight: variables.listItemPadding + 6,
436 
+    paddingVertical: variables.listItemPadding + 3,
437 
+    marginLeft: variables.listItemPadding + 6,
438 
+    borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
439 
+    backgroundColor: variables.listBg,
440 
+    borderColor: variables.listBorderColor
441 
+  };
442 
+
443 
+  return listItemTheme;
444 
+};

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

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

+ 9
- 0
native-base-theme/components/Picker.ios.js View File

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

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

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

+ 28
- 0
native-base-theme/components/Radio.js View File

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

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

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

+ 56
- 0
native-base-theme/components/Segment.js View File

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

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

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

+ 11
- 0
native-base-theme/components/Spinner.js View File

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

+ 18
- 0
native-base-theme/components/Subtitle.js View File

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

+ 48
- 0
native-base-theme/components/SwipeRow.js View File

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

+ 11
- 0
native-base-theme/components/Switch.js View File

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

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

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

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

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

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

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

+ 39
- 0
native-base-theme/components/TabHeading.js View File

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

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

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

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

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

+ 42
- 0
native-base-theme/components/Thumbnail.js View File

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

+ 20
- 0
native-base-theme/components/Title.js View File

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

+ 40
- 0
native-base-theme/components/Toast.js View File

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

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

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

+ 242
- 0
native-base-theme/components/index.js View File

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

+ 283
- 0
native-base-theme/variables/commonColor.js View File

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

+ 283
- 0
native-base-theme/variables/material.js View File

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

+ 283
- 0
native-base-theme/variables/platform.js View File

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

+ 283
- 0
native-base-theme/variables/platformDark.js View File

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

+ 9
- 0
navigation/AppNavigator.js View File

1 
+import { createAppContainer, createSwitchNavigator } from 'react-navigation';
2 
+
3 
+import MainDrawerNavigator from './MainDrawerNavigator';
4 
+
5 
+export default createAppContainer(
6 
+    createSwitchNavigator({
7 
+        Main: MainDrawerNavigator,
8 
+    })
9 
+);

+ 24
- 0
navigation/MainDrawerNavigator.js View File

1 
+import React from 'react';
2 
+import {createDrawerNavigator} from 'react-navigation';
3 
+
4 
+import HomeScreen from '../screens/HomeScreen';
5 
+import PlanningScreen from '../screens/PlanningScreen';
6 
+import ProxiwashScreen from '../screens/ProxiwashScreen';
7 
+import ProximoScreen from '../screens/ProximoScreen';
8 
+import SettingsScreen from '../screens/SettingsScreen';
9 
+import AboutScreen from '../screens/AboutScreen';
10 
+import SideMenu from "../components/SideMenu";
11 
+
12 
+
13 
+export default createDrawerNavigator({
14 
+        Home: {screen: HomeScreen},
15 
+        Planning: {screen: PlanningScreen,},
16 
+        Proxiwash: {screen: ProxiwashScreen,},
17 
+        Proximo: {screen: ProximoScreen,},
18 
+        Settings: {screen: SettingsScreen,},
19 
+        About: {screen: AboutScreen,},
20 
+    }, {
21 
+        contentComponent: SideMenu,
22 
+    }
23 
+);
24 
+

+ 58
- 0
navigation/MainTabNavigator.js View File

1 
+import React from 'react';
2 
+import {Platform} from 'react-native';
3 
+import {createStackNavigator} from 'react-navigation';
4 
+import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs";
5 
+import TabBarIcon from '../components/TabBarIcon';
6 
+
7 
+import HomeScreen from '../screens/HomeScreen';
8 
+import PlanningScreen from '../screens/PlanningScreen';
9 
+
10 
+const HomeStack = createStackNavigator({
11 
+    Home: HomeScreen,
12 
+});
13 
+
14 
+HomeStack.navigationOptions = {
15 
+    tabBarLabel: 'Home',
16 
+    tabBarIcon: ({focused}) => (
17 
+        <TabBarIcon
18 
+            focused={focused}
19 
+            name={
20 
+                Platform.OS === 'ios'
21 
+                    ? 'ios-home'
22 
+                    : 'md-home'
23 
+            }
24 
+        />
25 
+    ),
26 
+};
27 
+
28 
+const ProfileStack = createStackNavigator({
29 
+    Profile: PlanningScreen,
30 
+});
31 
+
32 
+ProfileStack.navigationOptions = {
33 
+    tabBarLabel: 'Profile',
34 
+    tabBarIcon: ({focused}) => (
35 
+        <TabBarIcon
36 
+            focused={focused}
37 
+            name={
38 
+                Platform.OS === 'ios'
39 
+                    ? 'ios-people'
40 
+                    : 'md-people'
41 
+            }
42 
+        />
43 
+    ),
44 
+};
45 
+
46 
+
47 
+export default createMaterialBottomTabNavigator(
48 
+    {
49 
+        Home: HomeStack,
50 
+        Profile: ProfileStack
51 
+    }, {
52 
+        initialRouteName: 'Home',
53 
+        shifting: true,
54 
+        activeColor: Colors.tabIconSelected,
55 
+        inactiveColor: Colors.tabIconDefault,
56 
+        barStyle: {backgroundColor: Colors.mainColor},
57 
+    }
58 
+);

+ 1522
- 242
package-lock.json
File diff suppressed because it is too large
View File


+ 14
- 1
package.json View File

8 
     "eject": "expo eject"
 8 
     "eject": "expo eject"
9 
   },
 9 
   },
10 
   "dependencies": {
 10 
   "dependencies": {
11 
+    "@expo/vector-icons": "latest",
11 
     "expo": "^33.0.0",
 12 
     "expo": "^33.0.0",
13 
+    "expo-font": "^5.0.1",
14 
+    "expo-localization": "^5.0.1",
15 
+    "i18n-js": "^3.3.0",
16 
+    "i18next": "latest",
17 
+    "native-base": "latest",
12 
     "react": "16.8.3",
 18 
     "react": "16.8.3",
13 
     "react-dom": "^16.8.6",
 19 
     "react-dom": "^16.8.6",
20 
+    "react-i18next": "latest",
14 
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
 21 
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
15 
-    "react-native-web": "^0.11.4"
22 
+    "react-native-paper": "latest",
23 
+    "react-native-settings-page": "latest",
24 
+    "react-native-status-bar-height": "latest",
25 
+    "react-native-web": "^0.11.4",
26 
+    "react-native-week-view": "latest",
27 
+    "react-navigation": "latest",
28 
+    "react-navigation-material-bottom-tabs": "latest"
16 
   },
 29 
   },
17 
   "devDependencies": {
 30 
   "devDependencies": {
18 
     "babel-preset-expo": "^5.1.1"
 31 
     "babel-preset-expo": "^5.1.1"

+ 226
- 0
screens/AboutScreen.js View File

1 
+import React from 'react';
2 
+import {Platform, StyleSheet, Linking, Alert} from 'react-native';
3 
+import {Container, Content, Text, Card, CardItem, Body, Icon, Left, Right, Thumbnail, H1} from 'native-base';
4 
+import CustomHeader from "../components/CustomHeader";
5 
+import i18n from "i18n-js";
6 
+
7 
+const version = 'a0.0.1';
8 
+const links = {
9 
+    appstore: 'https://qwant.com',
10 
+    playstore: 'https://qwant.com',
11 
+    gitlab: 'https://qwant.com',
12 
+    bugs: 'https://qwant.com',
13 
+    changelog: 'https://qwant.com',
14 
+    license: 'https://qwant.com',
15 
+    mail: "mailto:arnaud.vergnet@netc.fr?subject=Application Amicale INSA Toulouse&body=",
16 
+    linkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
17 
+    facebook: 'https://www.facebook.com/arnaud.vergnet',
18 
+    react: 'https://facebook.github.io/react-native/',
19 
+};
20 
+
21 
+
22 
+export default class AboutScreen extends React.Component {
23 
+
24 
+    openWebLink(link) {
25 
+        Linking.openURL(link).catch((err) => console.error('Error opening link', err));
26 
+    }
27 
+
28 
+    render() {
29 
+        const nav = this.props.navigation;
30 
+        return (
31 
+            <Container>
32 
+                <CustomHeader navigation={nav} title={i18n.t('screens.about')}/>
33 
+                <Content>
34 
+                    <Card>
35 
+                        <CardItem>
36 
+                            <Left>
37 
+                                <Thumbnail square source={require('../assets/amicale.png')}/>
38 
+                                <Body>
39 
+                                    <H1>Amicale INSA Toulouse</H1>
40 
+                                    <Text note>
41 
+                                        v.{version}
42 
+                                    </Text>
43 
+                                </Body>
44 
+                            </Left>
45 
+                        </CardItem>
46 
+                        <CardItem button
47 
+                                  onPress={() => this.openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore)}>
48 
+                            <Left>
49 
+                                <Icon active name={Platform.OS === "ios" ? 'apple' : 'google-play'}
50 
+                                      type={'MaterialCommunityIcons'}
51 
+                                      style={{color: "#777", fontSize: 26, width: 30}}
52 
+                                />
53 
+                                <Text>{Platform.OS === "ios" ? i18n.t('aboutScreen.appstore') : i18n.t('aboutScreen.playstore')}</Text>
54 
+                            </Left>
55 
+                            <Right>
56 
+                                <Icon name="arrow-forward"/>
57 
+                            </Right>
58 
+                        </CardItem>
59 
+                        <CardItem button
60 
+                                  onPress={() => this.openWebLink(links.gitlab)}>
61 
+                            <Left>
62 
+                                <Icon active name="git"
63 
+                                      type={'MaterialCommunityIcons'}
64 
+                                      style={{color: "#777", fontSize: 26, width: 30}}
65 
+                                />
66 
+                                <Text>Gitlab</Text>
67 
+                            </Left>
68 
+                            <Right>
69 
+                                <Icon name="arrow-forward"/>
70 
+                            </Right>
71 
+                        </CardItem>
72 
+                        <CardItem button
73 
+                                  onPress={() => this.openWebLink(links.bugs)}>
74 
+                            <Left>
75 
+                                <Icon active name="bug"
76 
+                                      type={'MaterialCommunityIcons'}
77 
+                                      style={{color: "#777", fontSize: 26, width: 30}}
78 
+                                />
79 
+                                <Text>{i18n.t('aboutScreen.bugs')}</Text>
80 
+                            </Left>
81 
+                            <Right>
82 
+                                <Icon name="arrow-forward"/>
83 
+                            </Right>
84 
+                        </CardItem>
85 
+                        <CardItem button
86 
+                                  onPress={() => this.openWebLink(links.changelog)}>
87 
+                            <Left>
88 
+                                <Icon active name="refresh"
89 
+                                      type={'MaterialCommunityIcons'}
90 
+                                      style={{color: "#777", fontSize: 26, width: 30}}
91 
+                                />
92 
+                                <Text>
93 
+                                    {i18n.t('aboutScreen.changelog')}
94 
+                                </Text>
95 
+                            </Left>
96 
+                            <Right>
97 
+                                <Icon name="arrow-forward"/>
98 
+                            </Right>
99 
+                        </CardItem>
100 
+                        <CardItem button
101 
+                                  onPress={() => this.openWebLink(links.license)}>
102 
+                            <Left>
103 
+                                <Icon active name="file-document"
104 
+                                      type={'MaterialCommunityIcons'}
105 
+                                      style={{color: "#777", fontSize: 26, width: 30}}
106 
+                                />
107 
+                                <Text>
108 
+                                    {i18n.t('aboutScreen.license')}
109 
+                                </Text>
110 
+                            </Left>
111 
+                            <Right>
112 
+                                <Icon name="arrow-forward"/>
113 
+                            </Right>
114 
+                        </CardItem>
115 
+                    </Card>
116 
+
117 
+                    <Card>
118 
+                        <CardItem header>
119 
+                            <Text>{i18n.t('aboutScreen.author')}</Text>
120 
+                        </CardItem>
121 
+                        <CardItem button
122 
+                        onPress={() => Alert.alert('Coucou', 'Whaou')}>
123 
+                            <Left>
124 
+                                <Icon active name="account-circle"
125 
+                                      type={'MaterialCommunityIcons'}
126 
+                                      style={{color: "#777", fontSize: 26, width: 30}}
127 
+                                />
128 
+                                <Text>Arnaud VERGNET</Text>
129 
+                            </Left>
130 
+                        </CardItem>
131 
+                        <CardItem button
132 
+                                  onPress={() => this.openWebLink(links.mail)}>
133 
+                            <Left>
134 
+                                <Icon active name="email"
135 
+                                      type={'MaterialCommunityIcons'}
136 
+                                      style={{color: "#777", fontSize: 26, width: 30}}
137 
+                                />
138 
+                                <Text>
139 
+                                    {i18n.t('aboutScreen.mail')}
140 
+                                </Text>
141 
+                            </Left>
142 
+                            <Right>
143 
+                                <Icon name="arrow-forward"/>
144 
+                            </Right>
145 
+                        </CardItem>
146 
+                        <CardItem button
147 
+                                  onPress={() => this.openWebLink(links.linkedin)}>
148 
+                            <Left>
149 
+                                <Icon active name="linkedin"
150 
+                                      type={'MaterialCommunityIcons'}
151 
+                                      style={{color: "#777", fontSize: 26, width: 30}}
152 
+                                />
153 
+                                <Text>
154 
+                                    Linkedin
155 
+                                </Text>
156 
+                            </Left>
157 
+                            <Right>
158 
+                                <Icon name="arrow-forward"/>
159 
+                            </Right>
160 
+                        </CardItem>
161 
+                        <CardItem button
162 
+                                  onPress={() => this.openWebLink(links.facebook)}>
163 
+                            <Left>
164 
+                                <Icon active name="facebook"
165 
+                                      type={'MaterialCommunityIcons'}
166 
+                                      style={{color: "#777", fontSize: 26, width: 30}}
167 
+                                />
168 
+                                <Text>
169 
+                                    Facebook
170 
+                                </Text>
171 
+                            </Left>
172 
+                            <Right>
173 
+                                <Icon name="arrow-forward"/>
174 
+                            </Right>
175 
+                        </CardItem>
176 
+                    </Card>
177 
+
178 
+                    <Card>
179 
+                        <CardItem header>
180 
+                            <Text>{i18n.t('aboutScreen.technologies')}</Text>
181 
+                        </CardItem>
182 
+                        <CardItem button
183 
+                                  onPress={() => this.openWebLink(links.react)}>
184 
+                            <Left>
185 
+                                <Icon active name="react"
186 
+                                      type={'MaterialCommunityIcons'}
187 
+                                      style={{color: "#777", fontSize: 26, width: 30}}
188 
+                                />
189 
+                                <Text>
190 
+                                    {i18n.t('aboutScreen.reactNative')}
191 
+                                </Text>
192 
+                            </Left>
193 
+                            <Right>
194 
+                                <Icon name="arrow-forward"/>
195 
+                            </Right>
196 
+                        </CardItem>
197 
+                        <CardItem button
198 
+                                  onPress={() => console.log('libs')}>
199 
+                            <Left>
200 
+                                <Icon active name="developer-board"
201 
+                                      type={'MaterialCommunityIcons'}
202 
+                                      style={{color: "#777", fontSize: 26, width: 30}}
203 
+                                />
204 
+                                <Text>
205 
+                                    {i18n.t('aboutScreen.libs')}
206 
+                                </Text>
207 
+                            </Left>
208 
+                            <Right>
209 
+                                <Icon name="arrow-forward"/>
210 
+                            </Right>
211 
+                        </CardItem>
212 
+                    </Card>
213 
+                </Content>
214 
+            </Container>
215 
+        );
216 
+    }
217 
+}
218 
+
219 
+const styles = StyleSheet.create({
220 
+    container: {
221 
+        flex: 1,
222 
+        backgroundColor: '#fff',
223 
+        alignItems: 'center',
224 
+        justifyContent: 'center',
225 
+    },
226 
+});

+ 28
- 0
screens/HomeScreen.js View File

1 
+import React from 'react';
2 
+import {Container, Content, Text, Button, Icon} from 'native-base';
3 
+import CustomHeader from '../components/CustomHeader';
4 
+import i18n from "i18n-js";
5 
+
6 
+import { Notifications } from 'expo';
7 
+
8 
+
9 
+export default class HomeScreen extends React.Component {
10 
+    render() {
11 
+        const nav = this.props.navigation;
12 
+        return (
13 
+            <Container>
14 
+                <CustomHeader navigation={nav} title={i18n.t('screens.home')}/>
15 
+                <Content>
16 
+                    <Button>
17 
+                        <Icon
18 
+                            active
19 
+                            name={'bell-ring'}
20 
+                            type={'MaterialCommunityIcons'}
21 
+                        />
22 
+                        <Text>Notif</Text>
23 
+                    </Button>
24 
+                </Content>
25 
+            </Container>
26 
+        );
27 
+    }
28 
+}

+ 24
- 0
screens/PlanningScreen.js View File

1 
+import React from 'react';
2 
+import { StyleSheet, View } from 'react-native';
3 
+import {Container, Text} from 'native-base';
4 
+import CustomHeader from "../components/CustomHeader";
5 
+import i18n from "i18n-js";
6 
+
7 
+export default class PlanningScreen extends React.Component {
8 
+    render() {
9 
+        const nav = this.props.navigation;
10 
+        return (
11 
+            <Container>
12 
+                <CustomHeader navigation={nav} title={i18n.t('screens.planning')}/>
13 
+            </Container>
14 
+        );
15 
+    }
16 
+}
17 
+const styles = StyleSheet.create({
18 
+    container: {
19 
+        flex: 1,
20 
+        backgroundColor: '#fff',
21 
+        alignItems: 'center',
22 
+        justifyContent: 'center',
23 
+    },
24 
+});

+ 113
- 0
screens/ProximoScreen.js View File

1 
+import React from 'react';
2 
+import {StyleSheet, View, Alert, ScrollView, RefreshControl, FlatList} from 'react-native';
3 
+import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Badge} from 'native-base';
4 
+import CustomHeader from "../components/CustomHeader";
5 
+
6 
+const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/data.txt";
7 
+const IMG_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/img/";
8 
+
9 
+const defaultImage = require('../assets/image-missing.png');
10 
+
11 
+export default class ProximoScreen extends React.Component {
12 
+
13 
+    constructor(props) {
14 
+        super(props);
15 
+        this.state = {
16 
+            refreshing: false,
17 
+            data: undefined
18 
+        };
19 
+    }
20 
+
21 
+    async readData() {
22 
+        try {
23 
+            let response = await fetch(
24 
+                'https://etud.insa-toulouse.fr/~vergnet/appli-amicale/data.txt',
25 
+            );
26 
+            let responseText = await response.text();
27 
+            let responseArray = responseText.split('\n');
28 
+            let responseFinal = [];
29 
+            for (let i = 0; i < responseArray.length; i++) {
30 
+                if (responseArray[i] !== "") {
31 
+                    let itemArray = responseArray[i]
32 
+                        .replace('[', '')
33 
+                        .replace(']', '')
34 
+                        .split(',')[1]
35 
+                        .split(';');
36 
+                    let object = {
37 
+                        name: itemArray[0],
38 
+                        price: itemArray[1],
39 
+                        image: defaultImage
40 
+                    };
41 
+                    responseFinal.push(object);
42 
+                }
43 
+            }
44 
+            this.setState({data: responseFinal});
45 
+        } catch (error) {
46 
+            console.error(error);
47 
+            return undefined;
48 
+        }
49 
+    }
50 
+
51 
+    componentDidMount() {
52 
+        this._onRefresh();
53 
+    }
54 
+
55 
+    _onRefresh = () => {
56 
+        this.setState({refreshing: true});
57 
+        this.readData().then(() => {
58 
+            this.setState({refreshing: false});
59 
+            // console.log(this.state.data);
60 
+        });
61 
+    };
62 
+
63 
+
64 
+    render() {
65 
+        const nav = this.props.navigation;
66 
+        return (
67 
+            <Container>
68 
+                <CustomHeader navigation={nav} title={'Proximo'}/>
69 
+                <Content>
70 
+                    <FlatList
71 
+                        data={this.state.data}
72 
+                        extraData={this.state}
73 
+                        keyExtractor={(item, index) => item.name}
74 
+                        refreshControl={
75 
+                            <RefreshControl
76 
+                                refreshing={this.state.refreshing}
77 
+                                onRefresh={this._onRefresh}
78 
+                            />
79 
+                        }
80 
+                        style={{minHeight: 300, width: '100%'}}
81 
+                        renderItem={({item}) =>
82 
+                            <ListItem
83 
+                                onPress={() => {
84 
+                                    console.log(IMG_URL + item.name + '.jpg')
85 
+                                }}
86 
+                            >
87 
+                                <Left>
88 
+                                    <Thumbnail square source={{ uri: IMG_URL + item.name + '.jpg' }} />
89 
+                                    <Text style={{marginLeft: 20}}>
90 
+                                        {item.name}
91 
+                                    </Text>
92 
+                                </Left>
93 
+                                <Right style={{ flex: 1 }}>
94 
+                                    <Text>
95 
+                                        {item.price}€
96 
+                                    </Text>
97 
+                                </Right>
98 
+                            </ListItem>}
99 
+                        />
100 
+                </Content>
101 
+            </Container>
102 
+        );
103 
+    }
104 
+}
105 
+
106 
+const styles = StyleSheet.create({
107 
+    container: {
108 
+        flex: 1,
109 
+        backgroundColor: '#fff',
110 
+        alignItems: 'center',
111 
+        justifyContent: 'center',
112 
+    },
113 
+});

+ 24
- 0
screens/ProxiwashScreen.js View File

1 
+import React from 'react';
2 
+import {StyleSheet, View} from 'react-native';
3 
+import {Container, Text} from 'native-base';
4 
+import CustomHeader from "../components/CustomHeader";
5 
+
6 
+export default class ProxiwashScreen extends React.Component {
7 
+    render() {
8 
+        const nav = this.props.navigation;
9 
+        return (
10 
+            <Container>
11 
+                <CustomHeader navigation={nav} title={'Proxiwash'}/>
12 
+            </Container>
13 
+        );
14 
+    }
15 
+}
16 
+
17 
+const styles = StyleSheet.create({
18 
+    container: {
19 
+        flex: 1,
20 
+        backgroundColor: '#fff',
21 
+        alignItems: 'center',
22 
+        justifyContent: 'center',
23 
+    },
24 
+});

+ 56
- 0
screens/SettingsScreen.js View File

1 
+import React from 'react';
2 
+import {Alert} from 'react-native'
3 
+import {Badge, Container, Content, Icon, Left, ListItem, Right, Text, List, CheckBox} from "native-base";
4 
+import CustomHeader from "../components/CustomHeader";
5 
+import ThemeManager from '../utils/ThemeManager';
6 
+import i18n from "i18n-js";
7 
+
8 
+
9 
+const nightModeKey = 'nightMode';
10 
+
11 
+export default class SettingsScreen extends React.Component {
12 
+    state = {
13 
+        nightMode: ThemeManager.getInstance().getNightMode(),
14 
+    };
15 
+
16 
+    toggleNightMode() {
17 
+        this.setState({nightMode: !this.state.nightMode});
18 
+        ThemeManager.getInstance().setNightmode(!this.state.nightMode);
19 
+        Alert.alert(i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.restart'));
20 
+
21 
+    }
22 
+
23 
+    render() {
24 
+        const nav = this.props.navigation;
25 
+        return (
26 
+            <Container>
27 
+                <CustomHeader navigation={nav} title={i18n.t('screens.settings')}/>
28 
+                <Content>
29 
+                    <List>
30 
+                        <ListItem
31 
+                            button
32 
+                            onPress={() => this.toggleNightMode()}
33 
+                        >
34 
+                            <Left>
35 
+                                <Icon
36 
+                                    active
37 
+                                    name={'theme-light-dark'}
38 
+                                    type={'MaterialCommunityIcons'}
39 
+                                    style={{color: "#777", fontSize: 26, width: 30}}
40 
+                                />
41 
+                                <Text>
42 
+                                    {i18n.t('settingsScreen.nightMode')}
43 
+                                </Text>
44 
+                            </Left>
45 
+                            <Right style={{flex: 1}}>
46 
+                                <CheckBox checked={this.state.nightMode}
47 
+                                          onPress={() => this.toggleNightMode()}/>
48 
+                            </Right>
49 
+                        </ListItem>
50 
+                    </List>
51 
+                </Content>
52 
+            </Container>
53 
+
54 
+        );
55 
+    }
56 
+}

+ 24
- 0
translations/en.json View File

1 
+{
2 
+  "screens": {
3 
+    "home": "Home",
4 
+    "planning": "Planning",
5 
+    "settings": "Settings",
6 
+    "about": "About"
7 
+  },
8 
+  "settingsScreen": {
9 
+    "nightMode": "Night Mode",
10 
+    "restart": "Restart the app to apply changes"
11 
+  },
12 
+  "aboutScreen": {
13 
+    "appstore": "See on the Appstore",
14 
+    "playstore": "See on the Playstore",
15 
+    "bugs": "Report Bugs",
16 
+    "changelog": "Changelog",
17 
+    "license": "License",
18 
+    "author": "Author",
19 
+    "mail": "Send an email",
20 
+    "technologies": "Technologies",
21 
+    "reactNative": "Made with React Native",
22 
+    "libs": "Libraries used"
23 
+  },
24 
+}

+ 24
- 0
translations/fr.json View File

1 
+{
2 
+  "screens": {
3 
+    "home": "Accueil",
4 
+    "planning": "Planning",
5 
+    "settings": "Paramètres",
6 
+    "about": "À Propos"
7 
+  },
8 
+  "settingsScreen": {
9 
+    "nightMode": "Mode Nuit",
10 
+    "restart": "Redémarrez l'application pour appliquer les changements"
11 
+  },
12 
+  "aboutScreen": {
13 
+    "appstore": "Voir sur l'Appstore",
14 
+    "playstore": "Voir sur le Playstore",
15 
+    "bugs": "Rapporter des Bugs",
16 
+    "changelog": "Historique des modifications",
17 
+    "license": "Licence",
18 
+    "author": "Auteur",
19 
+    "mail": "Envoyer un mail",
20 
+    "technologies": "Technologies",
21 
+    "reactNative": "Créé avec React Native",
22 
+    "libs": "Librairies utilisées"
23 
+  }
24 
+}

+ 23
- 0
utils/LocaleManager.js View File

1 
+import i18n from 'i18n-js';
2 
+import * as Localization from 'expo-localization';
3 
+
4 
+import en from '../translations/en';
5 
+import fr from '../translations/fr';
6 
+
7 
+export default class LocaleManager {
8 
+
9 
+    static instance = null;
10 
+
11 
+    static getInstance() {
12 
+        if (LocaleManager.instance == null) {
13 
+            LocaleManager.instance = new LocaleManager();
14 
+        }
15 
+        return this.instance;
16 
+    }
17 
+
18 
+    initTranslations() {
19 
+        i18n.fallbacks = true;
20 
+        i18n.translations = {fr, en};
21 
+        i18n.locale = Localization.locale;
22 
+    }
23 
+}

+ 57
- 0
utils/ThemeManager.js View File

1 
+import {DefaultTheme} from 'react-native-paper';
2 
+import {AsyncStorage} from 'react-native'
3 
+import platform from '../native-base-theme/variables/platform';
4 
+import platformDark from '../native-base-theme/variables/platformDark';
5 
+import getTheme from '../native-base-theme/components';
6 
+
7 
+const nightModeKey = 'nightMode';
8 
+
9 
+export default class ThemeManager {
10 
+
11 
+    static instance = null;
12 
+
13 
+    constructor() {
14 
+        this.nightMode = false;
15 
+        this.updateThemeCallback = undefined;
16 
+    }
17 
+
18 
+    static getInstance() {
19 
+        if (ThemeManager.instance == null) {
20 
+            ThemeManager.instance = new ThemeManager();
21 
+        }
22 
+        return this.instance;
23 
+    }
24 
+
25 
+    setUpdateThemeCallback(callback) {
26 
+        this.updateThemeCallback = callback;
27 
+        console.log(this.updateThemeCallback);
28 
+
29 
+    }
30 
+
31 
+    async getDataFromPreferences() {
32 
+        let result = await AsyncStorage.getItem(nightModeKey);
33 
+
34 
+        if (result === '1')
35 
+            this.nightMode = true;
36 
+        console.log('nightmode: ' + this.nightMode);
37 
+    }
38 
+
39 
+    setNightmode(isNightMode) {
40 
+        this.nightMode = isNightMode;
41 
+        AsyncStorage.setItem(nightModeKey, isNightMode ? '1' : '0');
42 
+        if (this.updateThemeCallback !== undefined)
43 
+            this.updateThemeCallback();
44 
+    }
45 
+
46 
+    getNightMode() {
47 
+        return this.nightMode;
48 
+    }
49 
+
50 
+    getCurrentTheme() {
51 
+        if (this.nightMode)
52 
+            return getTheme(platformDark);
53 
+        else
54 
+            return getTheme(platform);
55 
+    }
56 
+
57 
+};

Write Preview
Loading…
Cancel
Save