diff --git a/README.md b/README.md
index 9178d35..5dc30df 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
touch ~/.gradle/gradle.properties && echo -e "org.gradle.daemon=true\norg.gradle.jvmargs=-Xmx2048M" >> ~/.gradle/gradle.properties
# Run android emulator (first avd)
- npm run emulator
+ yarn emulator
# Make sure you have hw.keyboard=yes in your avd config.ini (in $HOME/.android/avd/.../) for reloading when pressing R twice to work.
@@ -24,7 +24,7 @@
DUSKEN_RELEASE_KEY_PASSWORD=
# Build
- npm run build-android
+ yarn build-android
# Output is in android/app/build/outputs/apk
diff --git a/native-base-theme/components/Badge.js b/native-base-theme/components/Badge.js
new file mode 100644
index 0000000..9bc0667
--- /dev/null
+++ b/native-base-theme/components/Badge.js
@@ -0,0 +1,35 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const badgeTheme = {
+ ".primary": {
+ backgroundColor: variables.btnPrimaryBg
+ },
+ ".warning": {
+ backgroundColor: variables.btnWarningBg
+ },
+ ".info": {
+ backgroundColor: variables.btnInfoBg
+ },
+ ".success": {
+ backgroundColor: variables.btnSuccessBg
+ },
+ ".danger": {
+ backgroundColor: variables.btnDangerBg
+ },
+ "NativeBase.Text": {
+ color: variables.badgeColor,
+ fontSize: variables.fontSizeBase,
+ lineHeight: variables.lineHeight - 1,
+ textAlign: "center",
+ paddingHorizontal: 3
+ },
+ backgroundColor: variables.badgeBg,
+ padding: variables.badgePadding,
+ paddingHorizontal: 6,
+ alignSelf: "flex-start",
+ borderRadius: 13.5,
+ height: 27
+ };
+ return badgeTheme;
+};
diff --git a/native-base-theme/components/Body.js b/native-base-theme/components/Body.js
new file mode 100644
index 0000000..3b3d0ea
--- /dev/null
+++ b/native-base-theme/components/Body.js
@@ -0,0 +1,11 @@
+import variable from './../variables/platform';
+
+export default (variables = variable) => {
+ const bodyTheme = {
+ flex: 1,
+ alignItems: 'center',
+ alignSelf: 'center',
+ };
+
+ return bodyTheme;
+};
diff --git a/native-base-theme/components/Button.js b/native-base-theme/components/Button.js
new file mode 100644
index 0000000..cb5cd46
--- /dev/null
+++ b/native-base-theme/components/Button.js
@@ -0,0 +1,479 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const platformStyle = variables.platformStyle;
+ const platform = variables.platform;
+
+ const buttonTheme = {
+ ".disabled": {
+ backgroundColor: variables.btnDisabledBg
+ },
+ ".bordered": {
+ ".dark": {
+ "NativeBase.Text": {
+ color: "#000"
+ },
+ "NativeBase.Icon": {
+ color: "#000"
+ },
+ "NativeBase.IconNB": {
+ color: "#000"
+ },
+ backgroundColor: "transparent",
+ borderColor: "#000",
+ borderWidth: variables.borderWidth * 2
+ },
+ ".light": {
+ "NativeBase.Text": {
+ color: "#f4f4f4"
+ },
+ "NativeBase.Icon": {
+ color: "#f4f4f4"
+ },
+ "NativeBase.IconNB": {
+ color: "#f4f4f4"
+ },
+ backgroundColor: "transparent",
+ borderColor: "#f4f4f4",
+ borderWidth: variables.borderWidth * 2
+ },
+ ".primary": {
+ "NativeBase.Text": {
+ color: variables.btnPrimaryBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnPrimaryBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnPrimaryBg
+ },
+ backgroundColor: "transparent",
+ borderColor: variables.btnPrimaryBg,
+ borderWidth: variables.borderWidth * 2
+ },
+ ".success": {
+ "NativeBase.Text": {
+ color: variables.btnSuccessBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnSuccessBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnSuccessBg
+ },
+ backgroundColor: "transparent",
+ borderColor: variables.btnSuccessBg,
+ borderWidth: variables.borderWidth * 2
+ },
+ ".info": {
+ "NativeBase.Text": {
+ color: variables.btnInfoBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnInfoBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnInfoBg
+ },
+ backgroundColor: "transparent",
+ borderColor: variables.btnInfoBg,
+ borderWidth: variables.borderWidth * 2
+ },
+ ".warning": {
+ "NativeBase.Text": {
+ color: variables.btnWarningBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnWarningBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnWarningBg
+ },
+ backgroundColor: "transparent",
+ borderColor: variables.btnWarningBg,
+ borderWidth: variables.borderWidth * 2
+ },
+ ".danger": {
+ "NativeBase.Text": {
+ color: variables.btnDangerBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnDangerBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnDangerBg
+ },
+ backgroundColor: "transparent",
+ borderColor: variables.btnDangerBg,
+ borderWidth: variables.borderWidth * 2
+ },
+ ".disabled": {
+ backgroundColor: null,
+ borderColor: variables.btnDisabledBg,
+ borderWidth: variables.borderWidth * 2,
+ "NativeBase.Text": {
+ color: variables.btnDisabledBg
+ }
+ },
+ "NativeBase.Text": {
+ color: variables.btnPrimaryBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnPrimaryBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnPrimaryBg
+ },
+ borderWidth: variables.borderWidth * 2,
+ elevation: null,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowOpacity: null,
+ shadowRadius: null,
+ backgroundColor: "transparent"
+ },
+
+ ".dark": {
+ ".bordered": {
+ "NativeBase.Text": {
+ color: "#000"
+ },
+ "NativeBase.Icon": {
+ color: "#000"
+ },
+ "NativeBase.IconNB": {
+ color: "#000"
+ }
+ },
+ backgroundColor: "#000"
+ },
+ ".light": {
+ ".transparent": {
+ "NativeBase.Text": {
+ color: "#f4f4f4"
+ },
+ "NativeBase.Icon": {
+ color: "#f4f4f4"
+ },
+ "NativeBase.IconNB": {
+ color: "#f4f4f4"
+ },
+ backgroundColor: null
+ },
+ ".bordered": {
+ "NativeBase.Text": {
+ color: "#f4f4f4"
+ },
+ "NativeBase.Icon": {
+ color: "#f4f4f4"
+ },
+ "NativeBase.IconNB": {
+ color: "#f4f4f4"
+ }
+ },
+ "NativeBase.Text": {
+ color: "#000"
+ },
+ "NativeBase.Icon": {
+ color: "#000"
+ },
+ "NativeBase.IconNB": {
+ color: "#000"
+ },
+ backgroundColor: "#f4f4f4"
+ },
+
+ ".primary": {
+ ".bordered": {
+ "NativeBase.Text": {
+ color: variables.btnPrimaryBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnPrimaryBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnPrimaryBg
+ }
+ },
+ backgroundColor: variables.btnPrimaryBg
+ },
+
+ ".success": {
+ ".bordered": {
+ "NativeBase.Text": {
+ color: variables.btnSuccessBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnSuccessBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnSuccessBg
+ }
+ },
+ backgroundColor: variables.btnSuccessBg
+ },
+
+ ".info": {
+ ".bordered": {
+ "NativeBase.Text": {
+ color: variables.btnInfoBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnInfoBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnInfoBg
+ }
+ },
+ backgroundColor: variables.btnInfoBg
+ },
+
+ ".warning": {
+ ".bordered": {
+ "NativeBase.Text": {
+ color: variables.btnWarningBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnWarningBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnWarningBg
+ }
+ },
+ backgroundColor: variables.btnWarningBg
+ },
+
+ ".danger": {
+ ".bordered": {
+ "NativeBase.Text": {
+ color: variables.btnDangerBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnDangerBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnDangerBg
+ }
+ },
+ backgroundColor: variables.btnDangerBg
+ },
+
+ ".block": {
+ justifyContent: "center",
+ alignSelf: "stretch"
+ },
+
+ ".full": {
+ justifyContent: "center",
+ alignSelf: "stretch",
+ borderRadius: 0
+ },
+
+ ".rounded": {
+ paddingHorizontal: variables.buttonPadding + 20,
+ borderRadius: variables.borderRadiusLarge
+ },
+
+ ".transparent": {
+ backgroundColor: "transparent",
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null,
+
+ "NativeBase.Text": {
+ color: variables.btnPrimaryBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnPrimaryBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnPrimaryBg
+ },
+ ".dark": {
+ "NativeBase.Text": {
+ color: "#000"
+ },
+ "NativeBase.IconNB": {
+ color: "#000"
+ },
+ "NativeBase.Icon": {
+ color: "#000"
+ },
+ backgroundColor: null
+ },
+ ".danger": {
+ "NativeBase.Text": {
+ color: variables.btnDangerBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnDangerBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnDangerBg
+ },
+ backgroundColor: null
+ },
+ ".warning": {
+ "NativeBase.Text": {
+ color: variables.btnWarningBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnWarningBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnWarningBg
+ },
+ backgroundColor: null
+ },
+ ".info": {
+ "NativeBase.Text": {
+ color: variables.btnInfoBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnInfoBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnInfoBg
+ },
+ backgroundColor: null
+ },
+ ".primary": {
+ "NativeBase.Text": {
+ color: variables.btnPrimaryBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnPrimaryBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnPrimaryBg
+ },
+ backgroundColor: null
+ },
+ ".success": {
+ "NativeBase.Text": {
+ color: variables.btnSuccessBg
+ },
+ "NativeBase.IconNB": {
+ color: variables.btnSuccessBg
+ },
+ "NativeBase.Icon": {
+ color: variables.btnSuccessBg
+ },
+ backgroundColor: null
+ },
+ ".light": {
+ "NativeBase.Text": {
+ color: "#f4f4f4"
+ },
+ "NativeBase.IconNB": {
+ color: "#f4f4f4"
+ },
+ "NativeBase.Icon": {
+ color: "#f4f4f4"
+ },
+ backgroundColor: null
+ }
+ },
+
+ ".small": {
+ height: 30,
+ "NativeBase.Text": {
+ fontSize: 14
+ }
+ },
+
+ ".large": {
+ height: 60,
+ "NativeBase.Text": {
+ fontSize: 22,
+ lineHeight: 32
+ }
+ },
+
+ ".capitalize": {},
+
+ ".vertical": {
+ flexDirection: "column",
+ height: null
+ },
+
+ "NativeBase.Text": {
+ fontFamily: variables.btnFontFamily,
+ marginLeft: 0,
+ marginRight: 0,
+ color: variables.inverseTextColor,
+ fontSize: variables.btnTextSize,
+ lineHeight: variables.btnLineHeight
+ // childPosition: 1
+ },
+
+ "NativeBase.Icon": {
+ color: variables.inverseTextColor,
+ fontSize: 24,
+ marginHorizontal: 5,
+ paddingTop: platform === "ios" ? 2 : undefined
+ },
+ "NativeBase.IconNB": {
+ color: variables.inverseTextColor,
+ fontSize: 24,
+ marginHorizontal: 5,
+ paddingTop: platform === "ios" ? 2 : undefined
+ },
+
+ ".iconLeft": {
+ "NativeBase.Text": {
+ marginLeft: variables.buttonPadding
+ },
+ "NativeBase.IconNB": {
+ marginRight: 10,
+ marginLeft: 0
+ },
+ "NativeBase.Icon": {
+ marginRight: 10,
+ marginLeft: 0
+ }
+ },
+ ".iconRight": {
+ "NativeBase.Text": {
+ marginRight: variables.buttonPadding
+ },
+ "NativeBase.IconNB": {
+ marginLeft: 10,
+ marginRight: 0
+ },
+ "NativeBase.Icon": {
+ marginLeft: 10,
+ marginRight: 0
+ }
+ },
+ ".picker": {
+ "NativeBase.Text": {
+ ".note": {
+ fontSize: 16,
+ lineHeight: null
+ }
+ }
+ },
+
+ paddingVertical: variables.buttonPadding,
+ paddingHorizontal: variables.buttonPadding + 10,
+ backgroundColor: variables.btnPrimaryBg,
+ borderRadius: variables.borderRadiusBase,
+ borderColor: variables.btnPrimaryBg,
+ borderWidth: null,
+ height: 45,
+ alignSelf: "flex-start",
+ flexDirection: "row",
+ elevation: 2,
+ shadowColor: platformStyle === "material" ? "#000" : undefined,
+ shadowOffset:
+ platformStyle === "material" ? { width: 0, height: 2 } : undefined,
+ shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
+ shadowRadius: platformStyle === "material" ? 1.2 : undefined,
+ alignItems: "center",
+ justifyContent: "space-between"
+ };
+ return buttonTheme;
+};
diff --git a/native-base-theme/components/Card.js b/native-base-theme/components/Card.js
new file mode 100644
index 0000000..ce9bac5
--- /dev/null
+++ b/native-base-theme/components/Card.js
@@ -0,0 +1,28 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const cardTheme = {
+ ".transparent": {
+ shadowColor: null,
+ shadowOffset: null,
+ shadowOpacity: null,
+ shadowRadius: null,
+ elevation: null
+ },
+ marginVertical: 5,
+ marginHorizontal: 2,
+ flex: 1,
+ borderWidth: variables.borderWidth,
+ borderRadius: 2,
+ borderColor: variables.cardBorderColor,
+ flexWrap: "wrap",
+ backgroundColor: variables.cardDefaultBg,
+ shadowColor: "#000",
+ shadowOffset: { width: 0, height: 2 },
+ shadowOpacity: 0.1,
+ shadowRadius: 1.5,
+ elevation: 3
+ };
+
+ return cardTheme;
+};
diff --git a/native-base-theme/components/CardItem.js b/native-base-theme/components/CardItem.js
new file mode 100644
index 0000000..5cab188
--- /dev/null
+++ b/native-base-theme/components/CardItem.js
@@ -0,0 +1,213 @@
+import variable from './../variables/platform';
+
+export default (variables = variable) => {
+ const platform = variables.platform;
+
+ const cardItemTheme = {
+ 'NativeBase.Left': {
+ 'NativeBase.Body': {
+ 'NativeBase.Text': {
+ '.note': {
+ color: variables.listNoteColor,
+ fontWeight: '400',
+ marginRight: 20,
+ },
+ },
+ flex: 1,
+ marginLeft: 10,
+ alignItems: null,
+ },
+ 'NativeBase.Icon': {
+ fontSize: variables.iconFontSize,
+ },
+ 'NativeBase.IconNB': {
+ fontSize: variables.iconFontSize,
+ },
+ 'NativeBase.Text': {
+ marginLeft: 10,
+ alignSelf: 'center',
+ },
+ 'NativeBase.Button': {
+ '.transparent': {
+ 'NativeBase.Text': {
+ fontSize: variables.DefaultFontSize - 4,
+ color: variables.sTabBarActiveTextColor,
+ },
+ 'NativeBase.Icon': {
+ fontSize: variables.iconFontSize - 10,
+ color: variables.sTabBarActiveTextColor,
+ marginHorizontal: null,
+ },
+ 'NativeBase.IconNB': {
+ fontSize: variables.iconFontSize - 10,
+ color: variables.sTabBarActiveTextColor,
+ },
+ paddingVertical: null,
+ paddingHorizontal: null,
+ paddingRight: variables.listItemPadding + 5,
+ },
+ },
+ flex: 1,
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+
+ '.content': {
+ 'NativeBase.Text': {
+ color: platform === 'ios' ? '#555' : '#222',
+ fontSize: variables.DefaultFontSize - 3,
+ },
+ },
+ '.cardBody': {
+ padding: -5,
+ 'NativeBase.Text': {
+ marginTop: 5,
+ },
+ },
+ 'NativeBase.Body': {
+ 'NativeBase.Text': {
+ '.note': {
+ color: variables.listNoteColor,
+ fontWeight: '200',
+ marginRight: 20,
+ },
+ },
+ 'NativeBase.Button': {
+ '.transparent': {
+ 'NativeBase.Text': {
+ fontSize: variables.DefaultFontSize - 4,
+ color: variables.sTabBarActiveTextColor,
+ },
+ 'NativeBase.Icon': {
+ fontSize: variables.iconFontSize - 10,
+ color: variables.sTabBarActiveTextColor,
+ marginHorizontal: null,
+ },
+ 'NativeBase.IconNB': {
+ fontSize: variables.iconFontSize - 10,
+ color: variables.sTabBarActiveTextColor,
+ },
+ paddingVertical: null,
+ paddingHorizontal: null,
+ paddingRight: variables.listItemPadding + 5,
+ alignSelf: 'stretch',
+ },
+ },
+ flex: 1,
+ alignSelf: 'stretch',
+ alignItems: 'flex-start',
+ },
+ 'NativeBase.Right': {
+ 'NativeBase.Badge': {
+ alignSelf: null,
+ },
+ 'NativeBase.Button': {
+ '.transparent': {
+ 'NativeBase.Text': {
+ fontSize: variables.DefaultFontSize - 4,
+ color: variables.sTabBarActiveTextColor,
+ },
+ 'NativeBase.Icon': {
+ fontSize: variables.iconFontSize - 10,
+ color: variables.sTabBarActiveTextColor,
+ marginHorizontal: null,
+ },
+ 'NativeBase.IconNB': {
+ fontSize: variables.iconFontSize - 10,
+ color: variables.sTabBarActiveTextColor,
+ },
+ paddingVertical: null,
+ paddingHorizontal: null,
+ },
+ alignSelf: null,
+ },
+ 'NativeBase.Icon': {
+ alignSelf: null,
+ fontSize: variables.iconFontSize - 8,
+ color: variables.cardBorderColor,
+ },
+ 'NativeBase.IconNB': {
+ alignSelf: null,
+ fontSize: variables.iconFontSize - 8,
+ color: variables.cardBorderColor,
+ },
+ 'NativeBase.Text': {
+ fontSize: variables.DefaultFontSize - 2,
+ alignSelf: null,
+ },
+ 'NativeBase.Thumbnail': {
+ alignSelf: null,
+ },
+ 'NativeBase.Image': {
+ alignSelf: null,
+ },
+ 'NativeBase.Radio': {
+ alignSelf: null,
+ },
+ 'NativeBase.Checkbox': {
+ alignSelf: null,
+ },
+ 'NativeBase.Switch': {
+ alignSelf: null,
+ },
+ flex: 0.8,
+ },
+ '.header': {
+ 'NativeBase.Text': {
+ fontSize: 16,
+ fontWeight: platform === 'ios' ? '500' : undefined,
+ },
+ '.bordered': {
+ 'NativeBase.Text': {
+ color: variables.sTabBarActiveTextColor,
+ fontWeight: platform === 'ios' ? '500' : undefined,
+ },
+ borderBottomWidth: platform === 'ios' ? variables.borderWidth : null,
+ },
+ borderBottomWidth: null,
+ paddingVertical: variables.listItemPadding + 5,
+ },
+ '.footer': {
+ 'NativeBase.Text': {
+ fontSize: 16,
+ fontWeight: platform === 'ios' ? '500' : undefined,
+ },
+ '.bordered': {
+ 'NativeBase.Text': {
+ color: variables.activeTab,
+ fontWeight: '500',
+ },
+ borderTopWidth: platform === 'ios' ? variables.borderWidth : null,
+ },
+ borderBottomWidth: null,
+ },
+ 'NativeBase.Text': {
+ '.note': {
+ color: variables.listNoteColor,
+ fontWeight: '200',
+ },
+ },
+
+ 'NativeBase.Icon': {
+ width: variables.iconFontSize + 5,
+ fontSize: variables.iconFontSize - 2,
+ },
+ 'NativeBase.IconNB': {
+ width: variables.iconFontSize + 5,
+ fontSize: variables.iconFontSize - 2,
+ },
+
+ '.bordered': {
+ borderBottomWidth: variables.borderWidth,
+ borderColor: variables.cardBorderColor,
+ },
+ flexDirection: 'row',
+ alignItems: 'center',
+ borderRadius: 2,
+ padding: variables.listItemPadding + 5,
+ paddingVertical: variables.listItemPadding,
+ backgroundColor: variables.cardDefaultBg,
+ };
+
+ return cardItemTheme;
+};
diff --git a/native-base-theme/components/CheckBox.js b/native-base-theme/components/CheckBox.js
new file mode 100644
index 0000000..f82bdf8
--- /dev/null
+++ b/native-base-theme/components/CheckBox.js
@@ -0,0 +1,36 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const checkBoxTheme = {
+ ".checked": {
+ "NativeBase.Icon": {
+ color: variables.checkboxTickColor
+ },
+ "NativeBase.IconNB": {
+ color: variables.checkboxTickColor
+ }
+ },
+ "NativeBase.Icon": {
+ color: "transparent",
+ lineHeight: variables.CheckboxIconSize,
+ marginTop: variables.CheckboxIconMarginTop,
+ fontSize: variables.CheckboxFontSize
+ },
+ "NativeBase.IconNB": {
+ color: "transparent",
+ lineHeight: variables.CheckboxIconSize,
+ marginTop: variables.CheckboxIconMarginTop,
+ fontSize: variables.CheckboxFontSize
+ },
+ borderRadius: variables.CheckboxRadius,
+ overflow: "hidden",
+ width: variables.checkboxSize,
+ height: variables.checkboxSize,
+ borderWidth: variables.CheckboxBorderWidth,
+ paddingLeft: variables.CheckboxPaddingLeft - 1,
+ paddingBottom: variables.CheckboxPaddingBottom,
+ left: 10
+ };
+
+ return checkBoxTheme;
+};
diff --git a/native-base-theme/components/Container.js b/native-base-theme/components/Container.js
new file mode 100644
index 0000000..9f1fbf4
--- /dev/null
+++ b/native-base-theme/components/Container.js
@@ -0,0 +1,13 @@
+import { Platform, Dimensions } from "react-native";
+
+import variable from "./../variables/platform";
+
+const deviceHeight = Dimensions.get("window").height;
+export default (variables = variable) => {
+ const theme = {
+ flex: 1,
+ height: Platform.OS === "ios" ? deviceHeight : deviceHeight - 20
+ };
+
+ return theme;
+};
diff --git a/native-base-theme/components/Content.js b/native-base-theme/components/Content.js
new file mode 100644
index 0000000..17d66c8
--- /dev/null
+++ b/native-base-theme/components/Content.js
@@ -0,0 +1,17 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const contentTheme = {
+ ".padder": {
+ padding: variables.contentPadding
+ },
+ flex: 1,
+ backgroundColor: "transparent",
+ "NativeBase.Segment": {
+ borderWidth: 0,
+ backgroundColor: "transparent"
+ }
+ };
+
+ return contentTheme;
+};
diff --git a/native-base-theme/components/Fab.js b/native-base-theme/components/Fab.js
new file mode 100644
index 0000000..b76f4fb
--- /dev/null
+++ b/native-base-theme/components/Fab.js
@@ -0,0 +1,23 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const platform = variables.platform;
+
+ const fabTheme = {
+ "NativeBase.Button": {
+ alignItems: "center",
+ padding: null,
+ justifyContent: "center",
+ "NativeBase.Icon": {
+ alignSelf: "center"
+ },
+ "NativeBase.IconNB": {
+ alignSelf: "center",
+ fontSize: 20,
+ lineHeight: platform === "ios" ? 24 : undefined
+ }
+ }
+ };
+
+ return fabTheme;
+};
diff --git a/native-base-theme/components/Footer.js b/native-base-theme/components/Footer.js
new file mode 100644
index 0000000..8f74e28
--- /dev/null
+++ b/native-base-theme/components/Footer.js
@@ -0,0 +1,98 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const platformStyle = variables.platformStyle;
+ const platform = variables.platform;
+
+ const footerTheme = {
+ "NativeBase.Left": {
+ "NativeBase.Button": {
+ ".transparent": {
+ backgroundColor: "transparent",
+ borderColor: null,
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null
+ },
+ "NativeBase.Icon": {
+ color: variables.topTabBarActiveTextColor
+ },
+ "NativeBase.IconNB": {
+ color: variables.topTabBarActiveTextColor
+ },
+ alignSelf: null
+ },
+ flex: 1,
+ alignSelf: "center",
+ alignItems: "flex-start"
+ },
+ "NativeBase.Body": {
+ flex: 1,
+ alignItems: "center",
+ alignSelf: "center",
+ flexDirection: "row",
+ "NativeBase.Button": {
+ alignSelf: "center",
+ ".transparent": {
+ backgroundColor: "transparent",
+ borderColor: null,
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null
+ },
+ ".full": {
+ height: variables.footerHeight,
+ flex: 1
+ },
+ "NativeBase.Icon": {
+ color: variables.topTabBarActiveTextColor
+ },
+ "NativeBase.IconNB": {
+ color: variables.topTabBarActiveTextColor
+ }
+ }
+ },
+ "NativeBase.Right": {
+ "NativeBase.Button": {
+ ".transparent": {
+ backgroundColor: "transparent",
+ borderColor: null,
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null
+ },
+ "NativeBase.Icon": {
+ color: variables.topTabBarActiveTextColor
+ },
+ "NativeBase.IconNB": {
+ color: variables.topTabBarActiveTextColor
+ },
+ alignSelf: null
+ },
+ flex: 1,
+ alignSelf: "center",
+ alignItems: "flex-end"
+ },
+ backgroundColor: variables.footerDefaultBg,
+ flexDirection: "row",
+ justifyContent: "center",
+ borderTopWidth: platform === "ios" && platformStyle !== "material"
+ ? variables.borderWidth
+ : undefined,
+ borderColor: platform === "ios" && platformStyle !== "material"
+ ? "#cbcbcb"
+ : undefined,
+ height: variables.footerHeight,
+ elevation: 3,
+ left: 0,
+ right: 0
+ };
+
+ return footerTheme;
+};
diff --git a/native-base-theme/components/FooterTab.js b/native-base-theme/components/FooterTab.js
new file mode 100644
index 0000000..f1e9a81
--- /dev/null
+++ b/native-base-theme/components/FooterTab.js
@@ -0,0 +1,77 @@
+import { Platform } from "react-native";
+
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const platform = variables.platform;
+
+ const footerTabTheme = {
+ "NativeBase.Button": {
+ ".active": {
+ "NativeBase.Text": {
+ color: variables.tabBarActiveTextColor,
+ fontSize: variables.tabBarTextSize,
+ lineHeight: 16
+ },
+ "NativeBase.Icon": {
+ color: variables.tabBarActiveTextColor
+ },
+ "NativeBase.IconNB": {
+ color: variables.tabBarActiveTextColor
+ },
+ backgroundColor: variables.tabActiveBgColor
+ },
+ flexDirection: null,
+ backgroundColor: "transparent",
+ borderColor: null,
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null,
+ alignSelf: "center",
+ flex: 1,
+ height: variables.footerHeight,
+ justifyContent: "center",
+ ".badge": {
+ "NativeBase.Badge": {
+ "NativeBase.Text": {
+ fontSize: 11,
+ fontWeight: platform === "ios" ? "600" : undefined,
+ lineHeight: 14
+ },
+ top: -3,
+ alignSelf: "center",
+ left: 10,
+ zIndex: 99,
+ height: 18,
+ padding: 1.7,
+ paddingHorizontal: 3
+ },
+ "NativeBase.Icon": {
+ marginTop: -18
+ }
+ },
+ "NativeBase.Icon": {
+ color: variables.tabBarTextColor
+ },
+ "NativeBase.IconNB": {
+ color: variables.tabBarTextColor
+ },
+ "NativeBase.Text": {
+ color: variables.tabBarTextColor,
+ fontSize: variables.tabBarTextSize,
+ lineHeight: 16
+ }
+ },
+ backgroundColor: Platform.OS === "android"
+ ? variables.tabActiveBgColor
+ : undefined,
+ flexDirection: "row",
+ justifyContent: "space-between",
+ flex: 1,
+ alignSelf: "stretch"
+ };
+
+ return footerTabTheme;
+};
diff --git a/native-base-theme/components/Form.js b/native-base-theme/components/Form.js
new file mode 100644
index 0000000..d022d50
--- /dev/null
+++ b/native-base-theme/components/Form.js
@@ -0,0 +1,88 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const platform = variables.platform;
+
+ const theme = {
+ "NativeBase.Item": {
+ ".fixedLabel": {
+ "NativeBase.Label": {
+ paddingLeft: null
+ },
+ marginLeft: 15
+ },
+ ".inlineLabel": {
+ "NativeBase.Label": {
+ paddingLeft: null
+ },
+ marginLeft: 15
+ },
+ ".placeholderLabel": {
+ "NativeBase.Input": {}
+ },
+ ".stackedLabel": {
+ "NativeBase.Label": {
+ top: 5,
+ paddingLeft: null
+ },
+ "NativeBase.Input": {
+ paddingLeft: null,
+ marginLeft: platform === "ios" ? undefined : -5
+ },
+ "NativeBase.Icon": {
+ marginTop: 36
+ },
+ marginLeft: 15
+ },
+ ".floatingLabel": {
+ "NativeBase.Input": {
+ paddingLeft: null,
+ top: 10,
+ marginLeft: platform === "ios" ? undefined : -5
+ },
+ "NativeBase.Label": {
+ left: 0,
+ top: 8
+ },
+ "NativeBase.Icon": {
+ top: 6
+ },
+ marginTop: 15,
+ marginLeft: 15
+ },
+ ".regular": {
+ "NativeBase.Label": {
+ left: 0
+ },
+ marginLeft: 0
+ },
+ ".rounded": {
+ "NativeBase.Label": {
+ left: 0
+ },
+ marginLeft: 0
+ },
+ ".underline": {
+ "NativeBase.Label": {
+ left: 0,
+ top: 0,
+ position: "relative"
+ },
+ "NativeBase.Input": {
+ left: -15
+ },
+ marginLeft: 15
+ },
+ ".last": {
+ marginLeft: 0,
+ paddingLeft: 15
+ },
+ "NativeBase.Label": {
+ paddingRight: 5
+ },
+ marginLeft: 15
+ }
+ };
+
+ return theme;
+};
diff --git a/native-base-theme/components/H1.js b/native-base-theme/components/H1.js
new file mode 100644
index 0000000..7ce6b1d
--- /dev/null
+++ b/native-base-theme/components/H1.js
@@ -0,0 +1,11 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const h1Theme = {
+ color: variables.textColor,
+ fontSize: variables.fontSizeH1,
+ lineHeight: variables.lineHeightH1,
+ };
+
+ return h1Theme;
+};
diff --git a/native-base-theme/components/H2.js b/native-base-theme/components/H2.js
new file mode 100644
index 0000000..aaf2b79
--- /dev/null
+++ b/native-base-theme/components/H2.js
@@ -0,0 +1,11 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const h2Theme = {
+ color: variables.textColor,
+ fontSize: variables.fontSizeH2,
+ lineHeight: variables.lineHeightH2,
+ };
+
+ return h2Theme;
+};
diff --git a/native-base-theme/components/H3.js b/native-base-theme/components/H3.js
new file mode 100644
index 0000000..be85213
--- /dev/null
+++ b/native-base-theme/components/H3.js
@@ -0,0 +1,11 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const h3Theme = {
+ color: variables.textColor,
+ fontSize: variables.fontSizeH3,
+ lineHeight: variables.lineHeightH3
+ };
+
+ return h3Theme;
+};
diff --git a/native-base-theme/components/Header.js b/native-base-theme/components/Header.js
new file mode 100644
index 0000000..b8f2468
--- /dev/null
+++ b/native-base-theme/components/Header.js
@@ -0,0 +1,312 @@
+import { PixelRatio } from "react-native";
+
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const platformStyle = variables.platformStyle;
+ const platform = variables.platform;
+
+ const headerTheme = {
+ ".span": {
+ height: 128,
+ "NativeBase.Left": {
+ alignSelf: "flex-start",
+ },
+ "NativeBase.Body": {
+ alignSelf: "flex-end",
+ alignItems: "flex-start",
+ justifyContent: "center",
+ paddingBottom: 26,
+ },
+ "NativeBase.Right": {
+ alignSelf: "flex-start",
+ },
+ },
+ ".hasSubtitle": {
+ "NativeBase.Body": {
+ "NativeBase.Title": {
+ fontSize: variables.titleFontSize - 2,
+ fontFamily: variables.titleFontfamily,
+ textAlign: "center",
+ },
+ "NativeBase.Subtitle": {
+ fontSize: variables.subTitleFontSize,
+ fontFamily: variables.titleFontfamily,
+ color: variables.subtitleColor,
+ textAlign: "center",
+ },
+ },
+ },
+ ".noShadow": {
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null,
+ },
+ ".hasTabs": {
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null,
+ borderBottomWidth: null,
+ },
+ ".hasSegment": {
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null,
+ borderBottomWidth: null,
+ },
+ "NativeBase.Button": {
+ justifyContent: "center",
+ alignSelf: "center",
+ alignItems: "center",
+ ".transparent": {
+ "NativeBase.Text": {
+ color: variables.toolbarBtnColor,
+ fontWeight: "600",
+ },
+ "NativeBase.Icon": {
+ color: variables.toolbarBtnColor,
+ },
+ "NativeBase.IconNB": {
+ color: variables.toolbarBtnColor,
+ },
+ paddingHorizontal: variables.buttonPadding,
+ },
+ paddingHorizontal: 15,
+ },
+ ".searchBar": {
+ "NativeBase.Item": {
+ "NativeBase.Icon": {
+ backgroundColor: "transparent",
+ color: variables.dropdownLinkColor,
+ fontSize: variables.toolbarSearchIconSize,
+ alignItems: "center",
+ marginTop: 2,
+ paddingRight: 10,
+ paddingLeft: 10,
+ },
+ "NativeBase.IconNB": {
+ backgroundColor: "transparent",
+ color: null,
+ alignSelf: "center",
+ },
+ "NativeBase.Input": {
+ alignSelf: "center",
+ lineHeight: 24,
+ height: variables.searchBarHeight,
+ },
+ alignSelf: "center",
+ alignItems: "center",
+ justifyContent: "flex-start",
+ flex: 1,
+ height: variables.searchBarHeight,
+ borderColor: "transparent",
+ backgroundColor: variables.toolbarInputColor,
+ },
+ "NativeBase.Button": {
+ ".transparent": {
+ "NativeBase.Text": {
+ fontWeight: "500",
+ },
+ paddingHorizontal: null,
+ paddingLeft: platform === "ios" ? 10 : null,
+ },
+ paddingHorizontal: platform === "ios" ? undefined : null,
+ width: platform === "ios" ? undefined : 0,
+ height: platform === "ios" ? undefined : 0,
+ },
+ },
+ ".rounded": {
+ "NativeBase.Item": {
+ borderRadius: platform === "ios" && platformStyle !== "material" ? 25 : 3,
+ },
+ },
+ "NativeBase.Left": {
+ "NativeBase.Button": {
+ ".hasText": {
+ marginLeft: -10,
+ height: 30,
+ "NativeBase.Icon": {
+ color: variables.toolbarBtnColor,
+ fontSize: variables.iconHeaderSize,
+ marginTop: 2,
+ marginRight: 5,
+ marginLeft: 2,
+ },
+ "NativeBase.Text": {
+ color: variables.toolbarBtnColor,
+ fontSize: 17,
+ marginLeft: 2,
+ lineHeight: 21,
+ },
+ "NativeBase.IconNB": {
+ color: variables.toolbarBtnColor,
+ fontSize: variables.iconHeaderSize,
+ marginTop: 2,
+ marginRight: 5,
+ marginLeft: 2,
+ },
+ },
+ ".transparent": {
+ marginLeft: -3,
+ "NativeBase.Icon": {
+ color: variables.toolbarBtnColor,
+ fontSize: variables.iconHeaderSize,
+ marginTop: 2,
+ marginRight: 2,
+ marginLeft: 2,
+ },
+ "NativeBase.IconNB": {
+ color: variables.toolbarBtnColor,
+ fontSize: variables.iconHeaderSize,
+ marginTop: 2,
+ marginRight: 2,
+ marginLeft: 2,
+ },
+ "NativeBase.Text": {
+ color: variables.toolbarBtnColor,
+ fontSize: 17,
+ top: platform === "ios" ? undefined : -1.5,
+ },
+ backgroundColor: "transparent",
+ borderColor: null,
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null,
+ },
+ "NativeBase.Icon": {
+ color: variables.toolbarBtnColor,
+ },
+ "NativeBase.IconNB": {
+ color: variables.toolbarBtnColor,
+ },
+ alignSelf: null,
+ paddingHorizontal: variables.buttonPadding,
+ },
+ flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.5,
+ alignSelf: "center",
+ alignItems: "flex-start",
+ },
+ "NativeBase.Body": {
+ flex: 1,
+ alignItems: platform === "ios" && platformStyle !== "material" ? "center" : "flex-start",
+ alignSelf: "center",
+ "NativeBase.Segment": {
+ borderWidth: 0,
+ alignSelf: "flex-end",
+ marginRight: platform === "ios" ? -40 : -55,
+ },
+ "NativeBase.Button": {
+ alignSelf: "center",
+ ".transparent": {
+ backgroundColor: "transparent",
+ },
+ "NativeBase.Icon": {
+ color: variables.toolbarBtnColor,
+ },
+ "NativeBase.IconNB": {
+ color: variables.toolbarBtnColor,
+ },
+ "NativeBase.Text": {
+ color: variables.inverseTextColor,
+ backgroundColor: "transparent",
+ },
+ },
+ },
+ "NativeBase.Right": {
+ "NativeBase.Button": {
+ ".hasText": {
+ height: 30,
+ "NativeBase.Icon": {
+ color: variables.toolbarBtnColor,
+ fontSize: variables.iconHeaderSize - 2,
+ marginTop: 2,
+ marginRight: 2,
+ marginLeft: 5,
+ },
+ "NativeBase.Text": {
+ color: variables.toolbarBtnColor,
+ fontSize: 17,
+ lineHeight: 21,
+ },
+ "NativeBase.IconNB": {
+ color: variables.toolbarBtnColor,
+ fontSize: variables.iconHeaderSize - 2,
+ marginTop: 2,
+ marginRight: 2,
+ marginLeft: 5,
+ },
+ },
+ ".transparent": {
+ marginRight: -8,
+ paddingHorizontal: 15,
+ borderRadius: 50,
+ "NativeBase.Icon": {
+ color: variables.toolbarBtnColor,
+ fontSize: platform === "ios" ? variables.iconHeaderSize - 6 : variables.iconHeaderSize - 2,
+ marginTop: 2,
+ marginLeft: 2,
+ marginRight: 2,
+ },
+ "NativeBase.IconNB": {
+ color: variables.toolbarBtnColor,
+ fontSize: platform === "ios" ? variables.iconHeaderSize - 6 : variables.iconHeaderSize - 2,
+ marginTop: 2,
+ marginLeft: 2,
+ marginRight: 2,
+ },
+ "NativeBase.Text": {
+ color: variables.toolbarBtnColor,
+ fontSize: 17,
+ top: platform === "ios" ? undefined : -1.5,
+ },
+ backgroundColor: "transparent",
+ borderColor: null,
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null,
+ },
+ "NativeBase.Icon": {
+ color: variables.toolbarBtnColor,
+ },
+ "NativeBase.IconNB": {
+ color: variables.toolbarBtnColor,
+ },
+ alignSelf: null,
+ paddingHorizontal: variables.buttonPadding,
+ },
+ flex: 1,
+ alignSelf: "center",
+ alignItems: "flex-end",
+ flexDirection: "row",
+ justifyContent: "flex-end",
+ },
+ backgroundColor: variables.toolbarDefaultBg,
+ flexDirection: "row",
+ paddingHorizontal: 10,
+ justifyContent: "center",
+ paddingTop: platform === "ios" ? 15 : 0,
+ borderBottomWidth: platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0,
+ borderBottomColor: variables.toolbarDefaultBorder,
+ height: variables.toolbarHeight,
+ elevation: 3,
+ shadowColor: platformStyle === "material" ? "#000" : undefined,
+ shadowOffset: platformStyle === "material" ? { width: 0, height: 2 } : undefined,
+ shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
+ shadowRadius: platformStyle === "material" ? 1.2 : undefined,
+ top: 0,
+ left: 0,
+ right: 0,
+ };
+
+ return headerTheme;
+};
diff --git a/native-base-theme/components/Icon.js b/native-base-theme/components/Icon.js
new file mode 100644
index 0000000..697d90e
--- /dev/null
+++ b/native-base-theme/components/Icon.js
@@ -0,0 +1,10 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const iconTheme = {
+ fontSize: variables.iconFontSize,
+ color: "#000"
+ };
+
+ return iconTheme;
+};
diff --git a/native-base-theme/components/Input.js b/native-base-theme/components/Input.js
new file mode 100644
index 0000000..0f971e8
--- /dev/null
+++ b/native-base-theme/components/Input.js
@@ -0,0 +1,18 @@
+import variable from './../variables/platform';
+
+export default (variables = variable) => {
+ const inputTheme = {
+ '.multiline': {
+ height: null,
+ },
+ height: variables.inputHeightBase,
+ color: variables.inputColor,
+ paddingLeft: 5,
+ paddingRight: 5,
+ flex: 1,
+ fontSize: variables.inputFontSize,
+ lineHeight: variables.inputLineHeight,
+ };
+
+ return inputTheme;
+};
diff --git a/native-base-theme/components/InputGroup.js b/native-base-theme/components/InputGroup.js
new file mode 100644
index 0000000..9baa8a6
--- /dev/null
+++ b/native-base-theme/components/InputGroup.js
@@ -0,0 +1,130 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const inputGroupTheme = {
+ "NativeBase.Icon": {
+ fontSize: 24,
+ color: variables.sTabBarActiveTextColor,
+ paddingHorizontal: 5
+ },
+ "NativeBase.IconNB": {
+ fontSize: 24,
+ color: variables.sTabBarActiveTextColor,
+ paddingHorizontal: 5
+ },
+ "NativeBase.Input": {
+ height: variables.inputHeightBase,
+ color: variables.inputColor,
+ paddingLeft: 5,
+ paddingRight: 5,
+ flex: 1,
+ fontSize: variables.inputFontSize,
+ lineHeight: variables.inputLineHeight
+ },
+ ".underline": {
+ ".success": {
+ borderColor: variables.inputSuccessBorderColor
+ },
+ ".error": {
+ borderColor: variables.inputErrorBorderColor
+ },
+ paddingLeft: 5,
+ borderWidth: variables.borderWidth,
+ borderTopWidth: 0,
+ borderRightWidth: 0,
+ borderLeftWidth: 0,
+ borderColor: variables.inputBorderColor
+ },
+ ".regular": {
+ ".success": {
+ borderColor: variables.inputSuccessBorderColor
+ },
+ ".error": {
+ borderColor: variables.inputErrorBorderColor
+ },
+ paddingLeft: 5,
+ borderWidth: variables.borderWidth,
+ borderColor: variables.inputBorderColor
+ },
+ ".rounded": {
+ ".success": {
+ borderColor: variables.inputSuccessBorderColor
+ },
+ ".error": {
+ borderColor: variables.inputErrorBorderColor
+ },
+ paddingLeft: 5,
+ borderWidth: variables.borderWidth,
+ borderRadius: variables.inputGroupRoundedBorderRadius,
+ borderColor: variables.inputBorderColor
+ },
+
+ ".success": {
+ "NativeBase.Icon": {
+ color: variables.inputSuccessBorderColor
+ },
+ "NativeBase.IconNB": {
+ color: variables.inputSuccessBorderColor
+ },
+ ".rounded": {
+ borderRadius: 30,
+ borderColor: variables.inputSuccessBorderColor
+ },
+ ".regular": {
+ borderColor: variables.inputSuccessBorderColor
+ },
+ ".underline": {
+ borderWidth: variables.borderWidth,
+ borderTopWidth: 0,
+ borderRightWidth: 0,
+ borderLeftWidth: 0,
+ borderColor: variables.inputSuccessBorderColor
+ },
+ borderColor: variables.inputSuccessBorderColor
+ },
+
+ ".error": {
+ "NativeBase.Icon": {
+ color: variables.inputErrorBorderColor
+ },
+ "NativeBase.IconNB": {
+ color: variables.inputErrorBorderColor
+ },
+ ".rounded": {
+ borderRadius: 30,
+ borderColor: variables.inputErrorBorderColor
+ },
+ ".regular": {
+ borderColor: variables.inputErrorBorderColor
+ },
+ ".underline": {
+ borderWidth: variables.borderWidth,
+ borderTopWidth: 0,
+ borderRightWidth: 0,
+ borderLeftWidth: 0,
+ borderColor: variables.inputErrorBorderColor
+ },
+ borderColor: variables.inputErrorBorderColor
+ },
+ ".disabled": {
+ "NativeBase.Icon": {
+ color: "#384850"
+ },
+ "NativeBase.IconNB": {
+ color: "#384850"
+ }
+ },
+
+ paddingLeft: 5,
+ borderWidth: variables.borderWidth,
+ borderTopWidth: 0,
+ borderRightWidth: 0,
+ borderLeftWidth: 0,
+ borderColor: variables.inputBorderColor,
+ backgroundColor: "transparent",
+ flexDirection: "row",
+ alignItems: "center"
+ };
+
+ return inputGroupTheme;
+};
diff --git a/native-base-theme/components/Item.js b/native-base-theme/components/Item.js
new file mode 100644
index 0000000..ffb7eaf
--- /dev/null
+++ b/native-base-theme/components/Item.js
@@ -0,0 +1,215 @@
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+
+export default (variables = variable) => {
+ const itemTheme = {
+ '.floatingLabel': {
+ 'NativeBase.Input': {
+ height: 60,
+ top: 8,
+ },
+ 'NativeBase.Label': {
+ top: 8,
+ },
+ 'NativeBase.Icon': {
+ top: 6,
+ },
+ },
+ '.fixedLabel': {
+ 'NativeBase.Label': {
+ position: null,
+ top: null,
+ left: null,
+ right: null,
+ flex: 1,
+ height: null,
+ width: null,
+ fontSize: variables.inputFontSize,
+ },
+ 'NativeBase.Input': {
+ flex: 2,
+ fontSize: variables.inputFontSize,
+ },
+ },
+ '.stackedLabel': {
+ 'NativeBase.Label': {
+ position: null,
+ top: null,
+ left: null,
+ right: null,
+ paddingTop: 5,
+ alignSelf: 'flex-start',
+ fontSize: variables.inputFontSize - 2,
+ },
+ 'NativeBase.Icon': {
+ marginTop: 36,
+ },
+ 'NativeBase.Input': {
+ alignSelf: Platform.OS === 'ios' ? 'stretch' : 'flex-start',
+ flex: 1,
+ width: Platform.OS === 'ios' ? null : variables.deviceWidth - 25,
+ fontSize: variables.inputFontSize,
+ },
+ flexDirection: null,
+ },
+ '.inlineLabel': {
+ 'NativeBase.Label': {
+ position: null,
+ top: null,
+ left: null,
+ right: null,
+ paddingRight: 20,
+ height: null,
+ width: null,
+ fontSize: variables.inputFontSize,
+ },
+ 'NativeBase.Input': {
+ paddingLeft: 5,
+ fontSize: variables.inputFontSize,
+ },
+ flexDirection: 'row',
+ },
+ 'NativeBase.Label': {
+ fontSize: variables.inputFontSize,
+ color: variables.inputColorPlaceholder,
+ paddingRight: 5,
+ },
+ 'NativeBase.Icon': {
+ fontSize: 24,
+ paddingRight: 8,
+ },
+ 'NativeBase.IconNB': {
+ fontSize: 24,
+ paddingRight: 8,
+ },
+ 'NativeBase.Input': {
+ '.multiline': {
+ height: null,
+ },
+ height: variables.inputHeightBase,
+ color: variables.inputColor,
+ flex: 1,
+ top: Platform.OS === 'ios' ? 1.5 : undefined,
+ fontSize: variables.inputFontSize,
+ lineHeight: variables.inputLineHeight,
+ },
+ '.underline': {
+ 'NativeBase.Input': {
+ paddingLeft: 15,
+ },
+ '.success': {
+ borderColor: variables.inputSuccessBorderColor,
+ },
+ '.error': {
+ borderColor: variables.inputErrorBorderColor,
+ },
+ borderWidth: variables.borderWidth * 2,
+ borderTopWidth: 0,
+ borderRightWidth: 0,
+ borderLeftWidth: 0,
+ borderColor: variables.inputBorderColor,
+ },
+ '.regular': {
+ 'NativeBase.Input': {
+ paddingLeft: 8,
+ },
+ 'NativeBase.Icon': {
+ paddingLeft: 10,
+ },
+ '.success': {
+ borderColor: variables.inputSuccessBorderColor,
+ },
+ '.error': {
+ borderColor: variables.inputErrorBorderColor,
+ },
+ borderWidth: variables.borderWidth * 2,
+ borderColor: variables.inputBorderColor,
+ },
+ '.rounded': {
+ 'NativeBase.Input': {
+ paddingLeft: 8,
+ },
+ 'NativeBase.Icon': {
+ paddingLeft: 10,
+ },
+ '.success': {
+ borderColor: variables.inputSuccessBorderColor,
+ },
+ '.error': {
+ borderColor: variables.inputErrorBorderColor,
+ },
+ borderWidth: variables.borderWidth * 2,
+ borderRadius: 30,
+ borderColor: variables.inputBorderColor,
+ },
+
+ '.success': {
+ 'NativeBase.Icon': {
+ color: variables.inputSuccessBorderColor,
+ },
+ 'NativeBase.IconNB': {
+ color: variables.inputSuccessBorderColor,
+ },
+ '.rounded': {
+ borderRadius: 30,
+ borderColor: variables.inputSuccessBorderColor,
+ },
+ '.regular': {
+ borderColor: variables.inputSuccessBorderColor,
+ },
+ '.underline': {
+ borderWidth: variables.borderWidth * 2,
+ borderTopWidth: 0,
+ borderRightWidth: 0,
+ borderLeftWidth: 0,
+ borderColor: variables.inputSuccessBorderColor,
+ },
+ borderColor: variables.inputSuccessBorderColor,
+ },
+
+ '.error': {
+ 'NativeBase.Icon': {
+ color: variables.inputErrorBorderColor,
+ },
+ 'NativeBase.IconNB': {
+ color: variables.inputErrorBorderColor,
+ },
+ '.rounded': {
+ borderRadius: 30,
+ borderColor: variables.inputErrorBorderColor,
+ },
+ '.regular': {
+ borderColor: variables.inputErrorBorderColor,
+ },
+ '.underline': {
+ borderWidth: variables.borderWidth * 2,
+ borderTopWidth: 0,
+ borderRightWidth: 0,
+ borderLeftWidth: 0,
+ borderColor: variables.inputErrorBorderColor,
+ },
+ borderColor: variables.inputErrorBorderColor,
+ },
+ '.disabled': {
+ 'NativeBase.Icon': {
+ color: '#384850',
+ },
+ 'NativeBase.IconNB': {
+ color: '#384850',
+ },
+ },
+
+ borderWidth: variables.borderWidth * 2,
+ borderTopWidth: 0,
+ borderRightWidth: 0,
+ borderLeftWidth: 0,
+ borderColor: variables.inputBorderColor,
+ backgroundColor: 'transparent',
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginLeft: 2,
+ };
+
+ return itemTheme;
+};
diff --git a/native-base-theme/components/Label.js b/native-base-theme/components/Label.js
new file mode 100644
index 0000000..2f21dcb
--- /dev/null
+++ b/native-base-theme/components/Label.js
@@ -0,0 +1,12 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const labelTheme = {
+ ".focused": {
+ width: 0
+ },
+ fontSize: 17
+ };
+
+ return labelTheme;
+};
diff --git a/native-base-theme/components/Left.js b/native-base-theme/components/Left.js
new file mode 100644
index 0000000..30dfbd1
--- /dev/null
+++ b/native-base-theme/components/Left.js
@@ -0,0 +1,11 @@
+import variable from './../variables/platform';
+
+export default (variables = variable) => {
+ const leftTheme = {
+ flex: 1,
+ alignSelf: 'center',
+ alignItems: 'flex-start',
+ };
+
+ return leftTheme;
+};
diff --git a/native-base-theme/components/ListItem.js b/native-base-theme/components/ListItem.js
new file mode 100644
index 0000000..ac9fd39
--- /dev/null
+++ b/native-base-theme/components/ListItem.js
@@ -0,0 +1,407 @@
+import { Platform, PixelRatio } from "react-native";
+
+import pickerTheme from "./Picker";
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const platform = variables.platform;
+
+ const listItemTheme = {
+ "NativeBase.InputGroup": {
+ "NativeBase.Icon": {
+ paddingRight: 5
+ },
+ "NativeBase.IconNB": {
+ paddingRight: 5
+ },
+ "NativeBase.Input": {
+ paddingHorizontal: 5
+ },
+ flex: 1,
+ borderWidth: null,
+ margin: -10,
+ borderBottomColor: "transparent"
+ },
+ ".searchBar": {
+ "NativeBase.Item": {
+ "NativeBase.Icon": {
+ backgroundColor: "transparent",
+ color: variables.dropdownLinkColor,
+ fontSize: platform === "ios"
+ ? variables.iconFontSize - 10
+ : variables.iconFontSize - 5,
+ alignItems: "center",
+ marginTop: 2,
+ paddingRight: 8
+ },
+ "NativeBase.IconNB": {
+ backgroundColor: "transparent",
+ color: null,
+ alignSelf: "center"
+ },
+ "NativeBase.Input": {
+ alignSelf: "center"
+ },
+ alignSelf: "center",
+ alignItems: "center",
+ justifyContent: "flex-start",
+ flex: 1,
+ height: platform === "ios" ? 30 : 40,
+ borderColor: "transparent",
+ backgroundColor: "#fff",
+ borderRadius: 5
+ },
+ "NativeBase.Button": {
+ ".transparent": {
+ "NativeBase.Text": {
+ fontWeight: "500"
+ },
+ paddingHorizontal: null,
+ paddingLeft: platform === "ios" ? 10 : null
+ },
+ paddingHorizontal: platform === "ios" ? undefined : null,
+ width: platform === "ios" ? undefined : 0,
+ height: platform === "ios" ? undefined : 0
+ },
+ backgroundColor: variables.toolbarInputColor,
+ padding: 10,
+ marginLeft: null
+ },
+ "NativeBase.CheckBox": {
+ marginLeft: -10,
+ marginRight: 10,
+ },
+ ".first": {
+ ".itemHeader": {
+ paddingTop: variables.listItemPadding + 3
+ }
+ },
+ ".itemHeader": {
+ ".first": {
+ paddingTop: variables.listItemPadding + 3
+ },
+ borderBottomWidth: platform === "ios" ? variables.borderWidth : null,
+ marginLeft: null,
+ padding: variables.listItemPadding,
+ paddingLeft: variables.listItemPadding + 5,
+ paddingTop: platform === "ios"
+ ? variables.listItemPadding + 25
+ : undefined,
+ paddingBottom: platform === "android"
+ ? variables.listItemPadding + 20
+ : undefined,
+ flexDirection: "row",
+ borderColor: variables.listBorderColor,
+ "NativeBase.Text": {
+ fontSize: 14,
+ color: platform === "ios" ? undefined : variables.listNoteColor
+ }
+ },
+ ".itemDivider": {
+ borderBottomWidth: null,
+ marginLeft: null,
+ padding: variables.listItemPadding,
+ paddingLeft: variables.listItemPadding + 5,
+ backgroundColor: variables.listDividerBg,
+ flexDirection: "row",
+ borderColor: variables.listBorderColor
+ },
+ ".selected": {
+ "NativeBase.Left": {
+ "NativeBase.Text": {
+ color: variables.brandPrimary
+ }
+ },
+ "NativeBase.Text": {
+ color: variables.brandPrimary
+ }
+ },
+ "NativeBase.Left": {
+ "NativeBase.Body": {
+ "NativeBase.Text": {
+ ".note": {
+ color: variables.listNoteColor,
+ fontWeight: "200"
+ },
+ fontWeight: "600"
+ },
+ marginLeft: 10,
+ alignItems: null,
+ alignSelf: null
+ },
+ "NativeBase.Icon": {
+ width: variables.iconFontSize - 10,
+ fontSize: variables.iconFontSize - 10
+ },
+ "NativeBase.IconNB": {
+ width: variables.iconFontSize - 10,
+ fontSize: variables.iconFontSize - 10
+ },
+ "NativeBase.Text": {
+ marginLeft: 10,
+ alignSelf: "center"
+ },
+ flexDirection: "row"
+ },
+ "NativeBase.Body": {
+ "NativeBase.Text": {
+ marginHorizontal: variables.listItemPadding,
+ ".note": {
+ color: variables.listNoteColor,
+ fontWeight: "200"
+ }
+ },
+ alignSelf: null,
+ alignItems: null
+ },
+ "NativeBase.Right": {
+ "NativeBase.Badge": {
+ alignSelf: null
+ },
+ "NativeBase.PickerNB": {
+ "NativeBase.Button": {
+ marginRight: -15,
+ "NativeBase.Text": {
+ color: variables.topTabBarActiveTextColor
+ }
+ }
+ },
+ "NativeBase.Button": {
+ alignSelf: null,
+ ".transparent": {
+ "NativeBase.Text": {
+ color: variables.topTabBarActiveTextColor
+ }
+ }
+ },
+ "NativeBase.Icon": {
+ alignSelf: null,
+ fontSize: variables.iconFontSize - 8,
+ color: "#c9c8cd"
+ },
+ "NativeBase.IconNB": {
+ alignSelf: null,
+ fontSize: variables.iconFontSize - 8,
+ color: "#c9c8cd"
+ },
+ "NativeBase.Text": {
+ ".note": {
+ color: variables.listNoteColor,
+ fontWeight: "200"
+ },
+ alignSelf: null
+ },
+ "NativeBase.Thumbnail": {
+ alignSelf: null
+ },
+ "NativeBase.Image": {
+ alignSelf: null
+ },
+ "NativeBase.Radio": {
+ alignSelf: null
+ },
+ "NativeBase.Checkbox": {
+ alignSelf: null
+ },
+ "NativeBase.Switch": {
+ alignSelf: null
+ },
+ padding: null,
+ flex: 0.28
+ },
+ "NativeBase.Text": {
+ ".note": {
+ color: variables.listNoteColor,
+ fontWeight: "200"
+ },
+ alignSelf: 'center'
+ },
+
+ ".last": {
+ marginLeft: -(variables.listItemPadding + 5),
+ paddingLeft: (variables.listItemPadding + 5) * 2,
+ top: 1
+ },
+
+ ".avatar": {
+ "NativeBase.Left": {
+ flex: 0
+ },
+ "NativeBase.Body": {
+ "NativeBase.Text": {
+ marginLeft: null
+ },
+ flex: 1,
+ paddingVertical: variables.listItemPadding,
+ borderBottomWidth: variables.borderWidth,
+ borderColor: variables.listBorderColor,
+ marginLeft: variables.listItemPadding + 5
+ },
+ "NativeBase.Right": {
+ "NativeBase.Text": {
+ ".note": {
+ fontSize: variables.noteFontSize - 2
+ }
+ },
+ flex: 0,
+ paddingRight: variables.listItemPadding + 5,
+ alignSelf: "stretch",
+ paddingVertical: variables.listItemPadding,
+ borderBottomWidth: variables.borderWidth,
+ borderColor: variables.listBorderColor
+ },
+ borderBottomWidth: null,
+ paddingVertical: null,
+ paddingRight: null
+ },
+
+ ".thumbnail": {
+ "NativeBase.Left": {
+ flex: 0
+ },
+ "NativeBase.Body": {
+ "NativeBase.Text": {
+ marginLeft: null
+ },
+ flex: 1,
+ paddingVertical: variables.listItemPadding + 5,
+ borderBottomWidth: variables.borderWidth,
+ borderColor: variables.listBorderColor,
+ marginLeft: variables.listItemPadding + 5
+ },
+ "NativeBase.Right": {
+ "NativeBase.Button": {
+ ".transparent": {
+ "NativeBase.Text": {
+ fontSize: variables.listNoteSize,
+ color: variables.sTabBarActiveTextColor
+ }
+ },
+ height: null
+ },
+ flex: 0,
+ justifyContent: "center",
+ alignSelf: "stretch",
+ paddingRight: variables.listItemPadding + 5,
+ paddingVertical: variables.listItemPadding + 5,
+ borderBottomWidth: variables.borderWidth,
+ borderColor: variables.listBorderColor
+ },
+ borderBottomWidth: null,
+ paddingVertical: null,
+ paddingRight: null
+ },
+
+ ".icon": {
+ ".last": {
+ "NativeBase.Body": {
+ borderBottomWidth: null
+ },
+ "NativeBase.Right": {
+ borderBottomWidth: null
+ },
+ borderBottomWidth: variables.borderWidth,
+ borderColor: variables.listBorderColor
+ },
+ "NativeBase.Left": {
+ "NativeBase.Button": {
+ "NativeBase.IconNB": {
+ marginHorizontal: null,
+ fontSize: variables.iconFontSize - 5
+ },
+ "NativeBase.Icon": {
+ marginHorizontal: null,
+ fontSize: variables.iconFontSize - 8
+ },
+ alignSelf: "center",
+ height: 29,
+ width: 29,
+ borderRadius: 6,
+ paddingVertical: null,
+ paddingHorizontal: null,
+ alignItems: "center",
+ justifyContent: "center"
+ },
+ "NativeBase.Icon": {
+ width: variables.iconFontSize - 5,
+ fontSize: variables.iconFontSize - 2
+ },
+ "NativeBase.IconNB": {
+ width: variables.iconFontSize - 5,
+ fontSize: variables.iconFontSize - 2
+ },
+ paddingRight: variables.listItemPadding + 5,
+ flex: 0,
+ height: 44,
+ justifyContent: "center",
+ alignItems: "center"
+ },
+ "NativeBase.Body": {
+ "NativeBase.Text": {
+ marginLeft: null,
+ fontSize: 17
+ },
+ flex: 1,
+ height: 44,
+ justifyContent: "center",
+ borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+ borderColor: variables.listBorderColor
+ },
+ "NativeBase.Right": {
+ "NativeBase.Text": {
+ textAlign: "center",
+ color: "#8F8E95",
+ fontSize: 17
+ },
+ "NativeBase.IconNB": {
+ color: "#C8C7CC",
+ fontSize: variables.iconFontSize - 10,
+ alignSelf: "center",
+ paddingLeft: 10,
+ paddingTop: 3
+ },
+ "NativeBase.Icon": {
+ color: "#C8C7CC",
+ fontSize: variables.iconFontSize - 10,
+ alignSelf: "center",
+ paddingLeft: 10,
+ paddingTop: 3
+ },
+ "NativeBase.Switch": {
+ marginRight: Platform.OS === "ios" ? undefined : -5,
+ alignSelf: null
+ },
+ "NativeBase.PickerNB": {
+ ...pickerTheme()
+ },
+ flexDirection: "row",
+ alignItems: "center",
+ flex: 0,
+ alignSelf: "stretch",
+ height: 44,
+ justifyContent: "flex-end",
+ borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+ borderColor: variables.listBorderColor,
+ paddingRight: variables.listItemPadding + 5
+ },
+ borderBottomWidth: null,
+ paddingVertical: null,
+ paddingRight: null,
+ height: 44,
+ justifyContent: "center"
+ },
+ ".noBorder": {
+ borderBottomWidth: null
+ },
+ alignItems: "center",
+ flexDirection: "row",
+ paddingRight: variables.listItemPadding + 5,
+ paddingVertical: variables.listItemPadding + 3,
+ marginLeft: variables.listItemPadding + 5,
+ borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+ backgroundColor: variables.listBg,
+ borderColor: variables.listBorderColor
+ };
+
+ return listItemTheme;
+};
diff --git a/native-base-theme/components/Picker.android.js b/native-base-theme/components/Picker.android.js
new file mode 100644
index 0000000..be22e10
--- /dev/null
+++ b/native-base-theme/components/Picker.android.js
@@ -0,0 +1,13 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const pickerTheme = {
+ ".note": {
+ color: "#8F8E95"
+ },
+ width: 90,
+ marginRight: -4
+ };
+
+ return pickerTheme;
+};
diff --git a/native-base-theme/components/Picker.ios.js b/native-base-theme/components/Picker.ios.js
new file mode 100644
index 0000000..81e3bfe
--- /dev/null
+++ b/native-base-theme/components/Picker.ios.js
@@ -0,0 +1,7 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const pickerTheme = {};
+
+ return pickerTheme;
+};
diff --git a/native-base-theme/components/Radio.js b/native-base-theme/components/Radio.js
new file mode 100644
index 0000000..e0b0dc9
--- /dev/null
+++ b/native-base-theme/components/Radio.js
@@ -0,0 +1,26 @@
+import { Platform } from "react-native";
+
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const radioTheme = {
+ ".selected": {
+ "NativeBase.IconNB": {
+ color: Platform.OS === "ios"
+ ? variables.brandPrimary
+ : variables.radioSelectedColorAndroid,
+ lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight,
+ height: Platform.OS === "ios" ? 20 : undefined
+ }
+ },
+ "NativeBase.IconNB": {
+ color: Platform.OS === "ios" ? "transparent" : undefined,
+ lineHeight: Platform.OS === "ios"
+ ? undefined
+ : variables.radioBtnLineHeight,
+ fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize
+ }
+ };
+
+ return radioTheme;
+};
diff --git a/native-base-theme/components/Right.js b/native-base-theme/components/Right.js
new file mode 100644
index 0000000..bf2480f
--- /dev/null
+++ b/native-base-theme/components/Right.js
@@ -0,0 +1,14 @@
+import variable from './../variables/platform';
+
+export default (variables = variable) => {
+ const rightTheme = {
+ 'NativeBase.Button': {
+ alignSelf: null,
+ },
+ flex: 1,
+ alignSelf: 'center',
+ alignItems: 'flex-end',
+ };
+
+ return rightTheme;
+};
diff --git a/native-base-theme/components/Segment.js b/native-base-theme/components/Segment.js
new file mode 100644
index 0000000..b9500e0
--- /dev/null
+++ b/native-base-theme/components/Segment.js
@@ -0,0 +1,45 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const platform = variables.platform;
+
+ const segmentTheme = {
+ height: 45,
+ borderColor: variables.segmentBorderColorMain,
+ flexDirection: "row",
+ justifyContent: "center",
+ backgroundColor: variables.segmentBackgroundColor,
+ "NativeBase.Button": {
+ alignSelf: "center",
+ borderRadius: 0,
+ paddingHorizontal: 20,
+ height: 30,
+ backgroundColor: "transparent",
+ borderWidth: 1,
+ borderColor: variables.segmentBorderColor,
+ elevation: 0,
+ ".active": {
+ backgroundColor: variables.segmentActiveBackgroundColor,
+ "NativeBase.Text": {
+ color: variables.segmentActiveTextColor
+ }
+ },
+ ".first": {
+ borderTopLeftRadius: platform === "ios" ? 5 : undefined,
+ borderBottomLeftRadius: platform === "ios" ? 5 : undefined,
+ borderRightWidth: 0
+ },
+ ".last": {
+ borderTopRightRadius: platform === "ios" ? 5 : undefined,
+ borderBottomRightRadius: platform === "ios" ? 5 : undefined,
+ borderLeftWidth: 0
+ },
+ "NativeBase.Text": {
+ color: variables.segmentTextColor,
+ fontSize: 14
+ }
+ }
+ };
+
+ return segmentTheme;
+};
diff --git a/native-base-theme/components/Separator.js b/native-base-theme/components/Separator.js
new file mode 100644
index 0000000..55f6c86
--- /dev/null
+++ b/native-base-theme/components/Separator.js
@@ -0,0 +1,47 @@
+import variable from './../variables/platform';
+
+export default (variables = variable) => {
+ const theme = {
+ '.group': {
+ height: 50,
+ paddingVertical: variables.listItemPadding - 8,
+ paddingTop: variables.listItemPadding + 12,
+ '.bordered': {
+ height: 50,
+ paddingVertical: variables.listItemPadding - 8,
+ paddingTop: variables.listItemPadding + 12,
+ },
+ },
+ '.bordered': {
+ '.noTopBorder': {
+ borderTopWidth: 0,
+ },
+ '.noBottomBorder': {
+ borderBottomWidth: 0,
+ },
+ height: 35,
+ paddingTop: variables.listItemPadding + 2,
+ paddingBottom: variables.listItemPadding,
+ borderBottomWidth: variables.borderWidth,
+ borderTopWidth: variables.borderWidth,
+ borderColor: variables.listBorderColor,
+ },
+ 'NativeBase.Text': {
+ fontSize: variables.tabBarTextSize - 2,
+ color: '#777',
+ },
+ '.noTopBorder': {
+ borderTopWidth: 0,
+ },
+ '.noBottomBorder': {
+ borderBottomWidth: 0,
+ },
+ height: 38,
+ backgroundColor: '#F0EFF5',
+ flex: 1,
+ justifyContent: 'center',
+ paddingLeft: variables.listItemPadding + 5,
+ };
+
+ return theme;
+};
diff --git a/native-base-theme/components/Spinner.js b/native-base-theme/components/Spinner.js
new file mode 100644
index 0000000..af16835
--- /dev/null
+++ b/native-base-theme/components/Spinner.js
@@ -0,0 +1,9 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const spinnerTheme = {
+ height: 80
+ };
+
+ return spinnerTheme;
+};
diff --git a/native-base-theme/components/Subtitle.js b/native-base-theme/components/Subtitle.js
new file mode 100644
index 0000000..d01bf00
--- /dev/null
+++ b/native-base-theme/components/Subtitle.js
@@ -0,0 +1,12 @@
+import variable from './../variables/platform';
+
+export default (variables = variable) => {
+ const subtitleTheme = {
+ fontSize: variables.subTitleFontSize,
+ fontFamily: variables.titleFontfamily,
+ color: variables.subtitleColor,
+ textAlign: 'center',
+ };
+
+ return subtitleTheme;
+};
diff --git a/native-base-theme/components/SwipeRow.js b/native-base-theme/components/SwipeRow.js
new file mode 100644
index 0000000..93879f0
--- /dev/null
+++ b/native-base-theme/components/SwipeRow.js
@@ -0,0 +1,44 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const swipeRowTheme = {
+ "NativeBase.ListItem": {
+ backgroundColor: "#FFF",
+ marginLeft: 0,
+ },
+ "NativeBase.Left": {
+ flex: 0,
+ alignSelf: null,
+ alignItems: null,
+ "NativeBase.Button": {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center",
+ alignSelf: "stretch",
+ borderRadius: 0,
+ },
+ },
+ "NativeBase.Right": {
+ flex: 0,
+ alignSelf: null,
+ alignItems: null,
+ "NativeBase.Button": {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center",
+ alignSelf: "stretch",
+ borderRadius: 0,
+ },
+ },
+ "NativeBase.Button": {
+ flex: 1,
+ height: null,
+ alignItems: "center",
+ justifyContent: "center",
+ alignSelf: "stretch",
+ borderRadius: 0,
+ },
+ };
+
+ return swipeRowTheme;
+};
diff --git a/native-base-theme/components/Switch.js b/native-base-theme/components/Switch.js
new file mode 100644
index 0000000..ed1b78e
--- /dev/null
+++ b/native-base-theme/components/Switch.js
@@ -0,0 +1,9 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const switchTheme = {
+ marginVertical: -5,
+ };
+
+ return switchTheme;
+};
diff --git a/native-base-theme/components/Tab.js b/native-base-theme/components/Tab.js
new file mode 100644
index 0000000..543ea38
--- /dev/null
+++ b/native-base-theme/components/Tab.js
@@ -0,0 +1,10 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const tabTheme = {
+ flex: 1,
+ backgroundColor: "#FFF"
+ };
+
+ return tabTheme;
+};
diff --git a/native-base-theme/components/TabBar.js b/native-base-theme/components/TabBar.js
new file mode 100644
index 0000000..8587514
--- /dev/null
+++ b/native-base-theme/components/TabBar.js
@@ -0,0 +1,55 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const tabBarTheme = {
+ ".tabIcon": {
+ height: undefined
+ },
+ ".vertical": {
+ height: 60
+ },
+ "NativeBase.Button": {
+ ".transparent": {
+ "NativeBase.Text": {
+ fontSize: variables.tabFontSize,
+ color: variables.sTabBarActiveTextColor,
+ fontWeight: "400"
+ },
+ "NativeBase.IconNB": {
+ color: variables.sTabBarActiveTextColor
+ }
+ },
+ "NativeBase.IconNB": {
+ color: variables.sTabBarActiveTextColor
+ },
+ "NativeBase.Text": {
+ fontSize: variables.tabFontSize,
+ color: variables.sTabBarActiveTextColor,
+ fontWeight: "400"
+ },
+ ".isTabActive": {
+ "NativeBase.Text": {
+ fontWeight: "900"
+ }
+ },
+ flex: 1,
+ alignSelf: "stretch",
+ alignItems: "center",
+ justifyContent: "center",
+ borderRadius: null,
+ borderBottomColor: "transparent",
+ backgroundColor: variables.tabBgColor
+ },
+ height: 45,
+ flexDirection: "row",
+ justifyContent: "space-around",
+ borderWidth: 1,
+ borderTopWidth: 0,
+ borderLeftWidth: 0,
+ borderRightWidth: 0,
+ borderBottomColor: "#ccc",
+ backgroundColor: variables.tabBgColor
+ };
+
+ return tabBarTheme;
+};
diff --git a/native-base-theme/components/TabContainer.js b/native-base-theme/components/TabContainer.js
new file mode 100644
index 0000000..bc6c334
--- /dev/null
+++ b/native-base-theme/components/TabContainer.js
@@ -0,0 +1,24 @@
+import variable from "./../variables/platform";
+import { Platform } from "react-native";
+
+export default (variables = variable) => {
+ const platformStyle = variables.platformStyle;
+ const platform = variables.platform;
+
+ const tabContainerTheme = {
+ elevation: 3,
+ height: 50,
+ flexDirection: "row",
+ shadowColor: platformStyle === "material" ? "#000" : undefined,
+ shadowOffset: platformStyle === "material"
+ ? { width: 0, height: 2 }
+ : undefined,
+ shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
+ shadowRadius: platformStyle === "material" ? 1.2 : undefined,
+ justifyContent: "space-around",
+ borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0,
+ borderColor: variables.topTabBarBorderColor
+ };
+
+ return tabContainerTheme;
+};
diff --git a/native-base-theme/components/TabHeading.js b/native-base-theme/components/TabHeading.js
new file mode 100644
index 0000000..c3cbb32
--- /dev/null
+++ b/native-base-theme/components/TabHeading.js
@@ -0,0 +1,37 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const platform = variables.platform;
+
+ const tabHeadingTheme = {
+ flexDirection: "row",
+ backgroundColor: variables.tabDefaultBg,
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center",
+ ".scrollable": {
+ paddingHorizontal: 20,
+ flex: platform === "android" ? 0 : 1,
+ minWidth: platform === "android" ? undefined : 60
+ },
+ "NativeBase.Text": {
+ color: variables.topTabBarTextColor,
+ marginHorizontal: 7
+ },
+ "NativeBase.Icon": {
+ color: variables.topTabBarTextColor,
+ fontSize: platform === "ios" ? 26 : undefined
+ },
+ ".active": {
+ "NativeBase.Text": {
+ color: variables.topTabBarActiveTextColor,
+ fontWeight: "600"
+ },
+ "NativeBase.Icon": {
+ color: variables.topTabBarActiveTextColor
+ }
+ }
+ };
+
+ return tabHeadingTheme;
+};
diff --git a/native-base-theme/components/Text.js b/native-base-theme/components/Text.js
new file mode 100644
index 0000000..1ce7810
--- /dev/null
+++ b/native-base-theme/components/Text.js
@@ -0,0 +1,15 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const textTheme = {
+ fontSize: variables.DefaultFontSize - 1,
+ fontFamily: variables.fontFamily,
+ color: variables.textColor,
+ ".note": {
+ color: "#a7a7a7",
+ fontSize: variables.noteFontSize
+ }
+ };
+
+ return textTheme;
+};
diff --git a/native-base-theme/components/Textarea.js b/native-base-theme/components/Textarea.js
new file mode 100644
index 0000000..085ce3f
--- /dev/null
+++ b/native-base-theme/components/Textarea.js
@@ -0,0 +1,23 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const textAreaTheme = {
+ ".underline": {
+ borderBottomWidth: variables.borderWidth,
+ marginTop: 5,
+ borderColor: variables.inputBorderColor
+ },
+ ".bordered": {
+ borderWidth: 1,
+ marginTop: 5,
+ borderColor: variables.inputBorderColor
+ },
+ color: variables.textColor,
+ paddingLeft: 10,
+ paddingRight: 5,
+ fontSize: 15,
+ textAlignVertical: "top"
+ };
+
+ return textAreaTheme;
+};
diff --git a/native-base-theme/components/Thumbnail.js b/native-base-theme/components/Thumbnail.js
new file mode 100644
index 0000000..2cf3c33
--- /dev/null
+++ b/native-base-theme/components/Thumbnail.js
@@ -0,0 +1,40 @@
+import variable from './../variables/platform';
+
+export default (variables = variable) => {
+ const thumbnailTheme = {
+ '.square': {
+ borderRadius: 0,
+ '.small': {
+ width: 36,
+ height: 36,
+ borderRadius: 0,
+ },
+ '.large': {
+ width: 80,
+ height: 80,
+ borderRadius: 0,
+ },
+ },
+ '.small': {
+ width: 36,
+ height: 36,
+ borderRadius: 18,
+ '.square': {
+ borderRadius: 0,
+ },
+ },
+ '.large': {
+ width: 80,
+ height: 80,
+ borderRadius: 40,
+ '.square': {
+ borderRadius: 0,
+ },
+ },
+ width: 56,
+ height: 56,
+ borderRadius: 28,
+ };
+
+ return thumbnailTheme;
+};
diff --git a/native-base-theme/components/Title.js b/native-base-theme/components/Title.js
new file mode 100644
index 0000000..aedd402
--- /dev/null
+++ b/native-base-theme/components/Title.js
@@ -0,0 +1,15 @@
+import { Platform } from "react-native";
+
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const titleTheme = {
+ fontSize: variables.titleFontSize,
+ fontFamily: variables.titleFontfamily,
+ color: variables.titleFontColor,
+ fontWeight: Platform.OS === "ios" ? "600" : undefined,
+ textAlign: "center"
+ };
+
+ return titleTheme;
+};
diff --git a/native-base-theme/components/Toast.js b/native-base-theme/components/Toast.js
new file mode 100644
index 0000000..2757975
--- /dev/null
+++ b/native-base-theme/components/Toast.js
@@ -0,0 +1,38 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const platform = variables.platform;
+
+ const toastTheme = {
+ ".danger": {
+ backgroundColor: variables.brandDanger
+ },
+ ".warning": {
+ backgroundColor: variables.brandWarning
+ },
+ ".success": {
+ backgroundColor: variables.brandSuccess
+ },
+ backgroundColor: "rgba(0,0,0,0.8)",
+ borderRadius: platform === "ios" ? 5 : 0,
+ flexDirection: "row",
+ justifyContent: "space-between",
+ alignItems: "center",
+ padding: 10,
+ minHeight: 50,
+ "NativeBase.Text": {
+ color: "#fff",
+ flex: 1
+ },
+ "NativeBase.Button": {
+ backgroundColor: "transparent",
+ height: 30,
+ elevation: 0,
+ "NativeBase.Text": {
+ fontSize: 14
+ }
+ }
+ };
+
+ return toastTheme;
+};
diff --git a/native-base-theme/components/View.js b/native-base-theme/components/View.js
new file mode 100644
index 0000000..0af0e6d
--- /dev/null
+++ b/native-base-theme/components/View.js
@@ -0,0 +1,11 @@
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const viewTheme = {
+ ".padder": {
+ padding: variables.contentPadding
+ }
+ };
+
+ return viewTheme;
+};
diff --git a/native-base-theme/components/index.js b/native-base-theme/components/index.js
new file mode 100644
index 0000000..25e9805
--- /dev/null
+++ b/native-base-theme/components/index.js
@@ -0,0 +1,240 @@
+import _ from "lodash";
+import bodyTheme from "./Body";
+import leftTheme from "./Left";
+import rightTheme from "./Right";
+import headerTheme from "./Header";
+import switchTheme from "./Switch";
+import thumbnailTheme from "./Thumbnail";
+import containerTheme from "./Container";
+import contentTheme from "./Content";
+import buttonTheme from "./Button";
+import titleTheme from "./Title";
+import subtitleTheme from "./Subtitle";
+import inputGroupTheme from "./InputGroup";
+import badgeTheme from "./Badge";
+import checkBoxTheme from "./CheckBox";
+import cardTheme from "./Card";
+import radioTheme from "./Radio";
+import h3Theme from "./H3";
+import h2Theme from "./H2";
+import h1Theme from "./H1";
+import footerTheme from "./Footer";
+import footerTabTheme from "./FooterTab";
+import fabTheme from "./Fab";
+import itemTheme from "./Item";
+import labelTheme from "./Label";
+import textAreaTheme from "./Textarea";
+import textTheme from "./Text";
+import toastTheme from "./Toast";
+import tabTheme from "./Tab";
+import tabBarTheme from "./TabBar";
+import tabContainerTheme from "./TabContainer";
+import viewTheme from "./View";
+import tabHeadingTheme from "./TabHeading";
+import iconTheme from "./Icon";
+import inputTheme from "./Input";
+import swipeRowTheme from "./SwipeRow";
+import segmentTheme from "./Segment";
+import spinnerTheme from "./Spinner";
+import cardItemTheme from "./CardItem";
+import listItemTheme from "./ListItem";
+import formTheme from "./Form";
+import separatorTheme from "./Separator";
+import variable from "./../variables/platform";
+
+export default (variables = variable) => {
+ const theme = {
+ variables,
+ "NativeBase.Left": {
+ ...leftTheme(variables)
+ },
+ "NativeBase.Right": {
+ ...rightTheme(variables)
+ },
+ "NativeBase.Body": {
+ ...bodyTheme(variables)
+ },
+
+ "NativeBase.Header": {
+ ...headerTheme(variables)
+ },
+
+ "NativeBase.Button": {
+ ...buttonTheme(variables)
+ },
+
+ "NativeBase.Title": {
+ ...titleTheme(variables)
+ },
+ "NativeBase.Subtitle": {
+ ...subtitleTheme(variables)
+ },
+
+ "NativeBase.InputGroup": {
+ ...inputGroupTheme(variables)
+ },
+
+ "NativeBase.Input": {
+ ...inputTheme(variables)
+ },
+
+ "NativeBase.Badge": {
+ ...badgeTheme(variables)
+ },
+
+ "NativeBase.CheckBox": {
+ ...checkBoxTheme(variables)
+ },
+
+ "NativeBase.Radio": {
+ ...radioTheme(variables)
+ },
+
+ "NativeBase.Card": {
+ ...cardTheme()
+ },
+
+ "NativeBase.CardItem": {
+ ...cardItemTheme(variables)
+ },
+
+ "NativeBase.Toast": {
+ ...toastTheme(variables)
+ },
+
+ "NativeBase.H1": {
+ ...h1Theme(variables)
+ },
+ "NativeBase.H2": {
+ ...h2Theme(variables)
+ },
+ "NativeBase.H3": {
+ ...h3Theme(variables)
+ },
+ "NativeBase.Form": {
+ ...formTheme(variables)
+ },
+
+ "NativeBase.Container": {
+ ...containerTheme(variables)
+ },
+ "NativeBase.Content": {
+ ...contentTheme(variables)
+ },
+
+ "NativeBase.Footer": {
+ ...footerTheme(variables)
+ },
+
+ "NativeBase.Tabs": {
+ flex: 1
+ },
+
+ "NativeBase.FooterTab": {
+ ...footerTabTheme(variables)
+ },
+
+ "NativeBase.ListItem": {
+ ...listItemTheme(variables)
+ },
+
+ "NativeBase.ListItem1": {
+ ...listItemTheme(variables)
+ },
+
+ "NativeBase.Icon": {
+ ...iconTheme(variables)
+ },
+ "NativeBase.IconNB": {
+ ...iconTheme(variables)
+ },
+ "NativeBase.Text": {
+ ...textTheme(variables)
+ },
+ "NativeBase.Spinner": {
+ ...spinnerTheme(variables)
+ },
+
+ "NativeBase.Fab": {
+ ...fabTheme(variables)
+ },
+
+ "NativeBase.Item": {
+ ...itemTheme(variables)
+ },
+
+ "NativeBase.Label": {
+ ...labelTheme(variables)
+ },
+
+ "NativeBase.Textarea": {
+ ...textAreaTheme(variables)
+ },
+
+ "NativeBase.PickerNB": {
+ "NativeBase.Button": {
+ "NativeBase.Text": {}
+ }
+ },
+
+ "NativeBase.Tab": {
+ ...tabTheme(variables)
+ },
+
+ "NativeBase.Segment": {
+ ...segmentTheme(variables)
+ },
+
+ "NativeBase.TabBar": {
+ ...tabBarTheme(variables)
+ },
+ "NativeBase.ViewNB": {
+ ...viewTheme(variables)
+ },
+ "NativeBase.TabHeading": {
+ ...tabHeadingTheme(variables)
+ },
+ "NativeBase.TabContainer": {
+ ...tabContainerTheme(variables)
+ },
+ "NativeBase.Switch": {
+ ...switchTheme(variables)
+ },
+ "NativeBase.Separator": {
+ ...separatorTheme(variables)
+ },
+ "NativeBase.SwipeRow": {
+ ...swipeRowTheme(variables)
+ },
+ "NativeBase.Thumbnail": {
+ ...thumbnailTheme(variables)
+ }
+ };
+
+ const cssifyTheme = (grandparent, parent, parentKey) => {
+ _.forEach(parent, (style, styleName) => {
+ // console.log('styleName', styleName);
+ // console.log('parentKey', parentKey);
+ if (
+ styleName.indexOf(".") === 0 &&
+ parentKey &&
+ parentKey.indexOf(".") === 0
+ ) {
+ if (grandparent) {
+ if (!grandparent[styleName]) {
+ grandparent[styleName] = {};
+ } else {
+ grandparent[styleName][parentKey] = style;
+ }
+ }
+ }
+ if (style && typeof style === "object") {
+ cssifyTheme(parent, style, styleName);
+ }
+ });
+ };
+
+ cssifyTheme(null, theme, null);
+
+ return theme;
+};
diff --git a/native-base-theme/variables/commonColor.js b/native-base-theme/variables/commonColor.js
new file mode 100644
index 0000000..84cc473
--- /dev/null
+++ b/native-base-theme/variables/commonColor.js
@@ -0,0 +1,277 @@
+import color from "color";
+
+import { Platform, Dimensions, PixelRatio } from "react-native";
+
+const deviceHeight = Dimensions.get("window").height;
+const deviceWidth = Dimensions.get("window").width;
+const platform = Platform.OS;
+const platformStyle = undefined;
+
+export default {
+ platformStyle,
+ platform,
+ // AndroidRipple
+ androidRipple: true,
+ androidRippleColor: "rgba(256, 256, 256, 0.3)",
+ androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
+
+ // Badge
+ badgeBg: "#ED1727",
+ badgeColor: "#fff",
+ // New Variable
+ badgePadding: platform === "ios" ? 3 : 0,
+
+ // Button
+ btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
+ btnDisabledBg: "#b5b5b5",
+ btnDisabledClr: "#f1f1f1",
+
+ // CheckBox
+ CheckboxRadius: platform === "ios" ? 13 : 0,
+ CheckboxBorderWidth: platform === "ios" ? 1 : 2,
+ CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
+ CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
+ CheckboxIconSize: platform === "ios" ? 21 : 14,
+ CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
+ CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18,
+ DefaultFontSize: 17,
+ checkboxBgColor: "#039BE5",
+ checkboxSize: 20,
+ checkboxTickColor: "#fff",
+
+ // Segment
+ segmentBackgroundColor: "#3F51B5",
+ segmentActiveBackgroundColor: "#fff",
+ segmentTextColor: "#fff",
+ segmentActiveTextColor: "#3F51B5",
+ segmentBorderColor: "#fff",
+ segmentBorderColorMain: "#3F51B5",
+
+ // New Variable
+ get defaultTextColor() {
+ return this.textColor;
+ },
+
+ get btnPrimaryBg() {
+ return this.brandPrimary;
+ },
+ get btnPrimaryColor() {
+ return this.inverseTextColor;
+ },
+ get btnInfoBg() {
+ return this.brandInfo;
+ },
+ get btnInfoColor() {
+ return this.inverseTextColor;
+ },
+ get btnSuccessBg() {
+ return this.brandSuccess;
+ },
+ get btnSuccessColor() {
+ return this.inverseTextColor;
+ },
+ get btnDangerBg() {
+ return this.brandDanger;
+ },
+ get btnDangerColor() {
+ return this.inverseTextColor;
+ },
+ get btnWarningBg() {
+ return this.brandWarning;
+ },
+ get btnWarningColor() {
+ return this.inverseTextColor;
+ },
+ get btnTextSize() {
+ return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
+ },
+ get btnTextSizeLarge() {
+ return this.fontSizeBase * 1.5;
+ },
+ get btnTextSizeSmall() {
+ return this.fontSizeBase * 0.8;
+ },
+ get borderRadiusLarge() {
+ return this.fontSizeBase * 3.8;
+ },
+
+ buttonPadding: 6,
+
+ get iconSizeLarge() {
+ return this.iconFontSize * 1.5;
+ },
+ get iconSizeSmall() {
+ return this.iconFontSize * 0.6;
+ },
+
+ // Card
+ cardDefaultBg: "#fff",
+
+ // Color
+ brandPrimary: "#f58220",
+ brandInfo: "#62B1F6",
+ brandSuccess: "#5cb85c",
+ brandDanger: "#d9534f",
+ brandWarning: "#f0ad4e",
+ brandSidebar: "#252932",
+
+ // Font
+ fontFamily: platform === "ios" ? "System" : "Roboto",
+ fontSizeBase: 15,
+
+ get fontSizeH1() {
+ return this.fontSizeBase * 1.8;
+ },
+ get fontSizeH2() {
+ return this.fontSizeBase * 1.6;
+ },
+ get fontSizeH3() {
+ return this.fontSizeBase * 1.4;
+ },
+
+ // Footer
+ footerHeight: 55,
+ footerDefaultBg: "#2874F0",
+
+ // FooterTab
+ tabBarTextColor: "#8bb3f4",
+ tabBarTextSize: platform === "ios" ? 14 : 11,
+ activeTab: platform === "ios" ? "#007aff" : "#fff",
+ sTabBarActiveTextColor: "#007aff",
+ tabBarActiveTextColor: "#fff",
+ tabActiveBgColor: platform === "ios" ? "#1569f4" : undefined,
+
+ // Tab
+ tabDefaultBg: "#2874F0",
+ topTabBarTextColor: "#b3c7f9",
+ topTabBarActiveTextColor: "#fff",
+ topTabActiveBgColor: platform === "ios" ? "#1569f4" : undefined,
+ topTabBarBorderColor: "#fff",
+ topTabBarActiveBorderColor: "#fff",
+
+ // Header
+ toolbarBtnColor: "#fff",
+ toolbarDefaultBg: "#2874F0",
+ toolbarHeight: platform === "ios" ? 64 : 56,
+ toolbarIconSize: platform === "ios" ? 20 : 22,
+ toolbarSearchIconSize: platform === "ios" ? 20 : 23,
+ toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
+ searchBarHeight: platform === "ios" ? 30 : 40,
+ toolbarInverseBg: "#222",
+ toolbarTextColor: "#fff",
+ iosStatusbar: "light-content",
+ toolbarDefaultBorder: "#2874F0",
+ get statusBarColor() {
+ return color(this.toolbarDefaultBg).darken(0.2).hex();
+ },
+
+ // Icon
+ iconFamily: "Ionicons",
+ iconFontSize: platform === "ios" ? 30 : 28,
+ iconMargin: 7,
+ iconHeaderSize: platform === "ios" ? 33 : 24,
+
+ // InputGroup
+ inputFontSize: 17,
+ inputBorderColor: "#D9D5DC",
+ inputSuccessBorderColor: "#2b8339",
+ inputErrorBorderColor: "#ed2f2f",
+
+ get inputColor() {
+ return this.textColor;
+ },
+ get inputColorPlaceholder() {
+ return "#575757";
+ },
+
+ inputGroupMarginBottom: 10,
+ inputHeightBase: 50,
+ inputPaddingLeft: 5,
+
+ get inputPaddingLeftIcon() {
+ return this.inputPaddingLeft * 8;
+ },
+
+ // Line Height
+ btnLineHeight: 19,
+ lineHeightH1: 32,
+ lineHeightH2: 27,
+ lineHeightH3: 22,
+ iconLineHeight: platform === "ios" ? 37 : 30,
+ lineHeight: platform === "ios" ? 20 : 24,
+
+ // List
+ listBorderColor: "#c9c9c9",
+ listDividerBg: "#f4f4f4",
+ listItemHeight: 45,
+ listBtnUnderlayColor: "#DDD",
+
+ // Card
+ cardBorderColor: "#ccc",
+
+ // Changed Variable
+ listItemPadding: platform === "ios" ? 10 : 12,
+
+ listNoteColor: "#808080",
+ listNoteSize: 13,
+
+ // Progress Bar
+ defaultProgressColor: "#E4202D",
+ inverseProgressColor: "#1A191B",
+
+ // Radio Button
+ radioBtnSize: platform === "ios" ? 25 : 23,
+ radioSelectedColorAndroid: "#5067FF",
+
+ // New Variable
+ radioBtnLineHeight: platform === "ios" ? 29 : 24,
+
+ radioColor: "#7e7e7e",
+
+ get radioSelectedColor() {
+ return color(this.radioColor).darken(0.2).hex();
+ },
+
+ // Spinner
+ defaultSpinnerColor: "#45D56E",
+ inverseSpinnerColor: "#1A191B",
+
+ // Tabs
+ tabBgColor: "#F8F8F8",
+ tabFontSize: 15,
+ tabTextColor: "#222222",
+
+ // Text
+ textColor: "#000",
+ inverseTextColor: "#fff",
+ noteFontSize: 14,
+
+ // Title
+ titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
+ titleFontSize: platform === "ios" ? 17 : 19,
+ subTitleFontSize: platform === "ios" ? 12 : 14,
+ subtitleColor: "#FFF",
+
+ // New Variable
+ titleFontColor: "#FFF",
+
+ // Other
+ borderRadiusBase: platform === "ios" ? 5 : 2,
+ borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+ contentPadding: 10,
+
+ get darkenHeader() {
+ return color(this.tabBgColor).darken(0.03).hex();
+ },
+
+ dropdownBg: "#000",
+ dropdownLinkColor: "#414142",
+ inputLineHeight: 24,
+ jumbotronBg: "#C9C9CE",
+ jumbotronPadding: 30,
+ deviceWidth,
+ deviceHeight,
+
+ // New Variable
+ inputGroupRoundedBorderRadius: 30
+};
diff --git a/native-base-theme/variables/material.js b/native-base-theme/variables/material.js
new file mode 100644
index 0000000..0634d2d
--- /dev/null
+++ b/native-base-theme/variables/material.js
@@ -0,0 +1,277 @@
+import color from "color";
+
+import { Platform, Dimensions, PixelRatio } from "react-native";
+
+const deviceHeight = Dimensions.get("window").height;
+const deviceWidth = Dimensions.get("window").width;
+const platform = Platform.OS;
+const platformStyle = "material";
+
+export default {
+ platformStyle,
+ platform,
+ // AndroidRipple
+ androidRipple: true,
+ androidRippleColor: "rgba(256, 256, 256, 0.3)",
+ androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
+
+ // Badge
+ badgeBg: "#ED1727",
+ badgeColor: "#fff",
+ // New Variable
+ badgePadding: platform === "ios" ? 3 : 0,
+
+ // Button
+ btnFontFamily: platform === "ios" ? "Roboto" : "Roboto_medium",
+ btnDisabledBg: "#b5b5b5",
+ btnDisabledClr: "#f1f1f1",
+
+ // CheckBox
+ CheckboxRadius: 0,
+ CheckboxBorderWidth: 2,
+ CheckboxPaddingLeft: 2,
+ CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
+ CheckboxIconSize: platform === "ios" ? 18 : 14,
+ CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
+ CheckboxFontSize: platform === "ios" ? 21 : 18,
+ DefaultFontSize: 17,
+ checkboxBgColor: "#039BE5",
+ checkboxSize: 20,
+ checkboxTickColor: "#fff",
+
+ // Segment
+ segmentBackgroundColor: "#3F51B5",
+ segmentActiveBackgroundColor: "#fff",
+ segmentTextColor: "#fff",
+ segmentActiveTextColor: "#3F51B5",
+ segmentBorderColor: "#fff",
+ segmentBorderColorMain: "#3F51B5",
+
+ // New Variable
+ get defaultTextColor() {
+ return this.textColor;
+ },
+
+ get btnPrimaryBg() {
+ return this.brandPrimary;
+ },
+ get btnPrimaryColor() {
+ return this.inverseTextColor;
+ },
+ get btnInfoBg() {
+ return this.brandInfo;
+ },
+ get btnInfoColor() {
+ return this.inverseTextColor;
+ },
+ get btnSuccessBg() {
+ return this.brandSuccess;
+ },
+ get btnSuccessColor() {
+ return this.inverseTextColor;
+ },
+ get btnDangerBg() {
+ return this.brandDanger;
+ },
+ get btnDangerColor() {
+ return this.inverseTextColor;
+ },
+ get btnWarningBg() {
+ return this.brandWarning;
+ },
+ get btnWarningColor() {
+ return this.inverseTextColor;
+ },
+ get btnTextSize() {
+ return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
+ },
+ get btnTextSizeLarge() {
+ return this.fontSizeBase * 1.5;
+ },
+ get btnTextSizeSmall() {
+ return this.fontSizeBase * 0.8;
+ },
+ get borderRadiusLarge() {
+ return this.fontSizeBase * 3.8;
+ },
+
+ buttonPadding: 6,
+
+ get iconSizeLarge() {
+ return this.iconFontSize * 1.5;
+ },
+ get iconSizeSmall() {
+ return this.iconFontSize * 0.6;
+ },
+
+ // Card
+ cardDefaultBg: "#fff",
+
+ // Color
+ brandPrimary: "#3F51B5",
+ brandInfo: "#3F57D3",
+ brandSuccess: "#5cb85c",
+ brandDanger: "#d9534f",
+ brandWarning: "#f0ad4e",
+ brandSidebar: "#252932",
+
+ // Font
+ fontFamily: "Roboto",
+ fontSizeBase: 15,
+
+ get fontSizeH1() {
+ return this.fontSizeBase * 1.8;
+ },
+ get fontSizeH2() {
+ return this.fontSizeBase * 1.6;
+ },
+ get fontSizeH3() {
+ return this.fontSizeBase * 1.4;
+ },
+
+ // Footer
+ footerHeight: 55,
+ footerDefaultBg: "#3F51B5",
+
+ // FooterTab
+ tabBarTextColor: "#b3c7f9",
+ tabBarTextSize: platform === "ios" ? 14 : 11,
+ activeTab: "#fff",
+ sTabBarActiveTextColor: "#007aff",
+ tabBarActiveTextColor: "#fff",
+ tabActiveBgColor: undefined,
+
+ // Tab
+ tabDefaultBg: "#3F51B5",
+ topTabBarTextColor: "#b3c7f9",
+ topTabBarActiveTextColor: "#fff",
+ topTabActiveBgColor: undefined,
+ topTabBarBorderColor: "#fff",
+ topTabBarActiveBorderColor: "#fff",
+
+ // Header
+ toolbarBtnColor: "#fff",
+ toolbarDefaultBg: "#3F51B5",
+ toolbarHeight: platform === "ios" ? 76 : 56,
+ toolbarIconSize: platform === "ios" ? 20 : 22,
+ toolbarSearchIconSize: platform === "ios" ? 20 : 23,
+ toolbarInputColor: "#fff",
+ searchBarHeight: platform === "ios" ? 30 : 40,
+ toolbarInverseBg: "#222",
+ toolbarTextColor: "#fff",
+ toolbarDefaultBorder: "#3F51B5",
+ iosStatusbar: "light-content",
+ get statusBarColor() {
+ return color(this.toolbarDefaultBg).darken(0.2).hex();
+ },
+
+ // Icon
+ iconFamily: "Ionicons",
+ iconFontSize: platform === "ios" ? 30 : 28,
+ iconMargin: 7,
+ iconHeaderSize: platform === "ios" ? 29 : 24,
+
+ // InputGroup
+ inputFontSize: 17,
+ inputBorderColor: "#D9D5DC",
+ inputSuccessBorderColor: "#2b8339",
+ inputErrorBorderColor: "#ed2f2f",
+
+ get inputColor() {
+ return this.textColor;
+ },
+ get inputColorPlaceholder() {
+ return "#575757";
+ },
+
+ inputGroupMarginBottom: 10,
+ inputHeightBase: 50,
+ inputPaddingLeft: 5,
+
+ get inputPaddingLeftIcon() {
+ return this.inputPaddingLeft * 8;
+ },
+
+ // Line Height
+ btnLineHeight: 19,
+ lineHeightH1: 32,
+ lineHeightH2: 27,
+ lineHeightH3: 22,
+ iconLineHeight: platform === "ios" ? 37 : 30,
+ lineHeight: platform === "ios" ? 20 : 24,
+
+ // List
+ listBorderColor: "#c9c9c9",
+ listDividerBg: "#f4f4f4",
+ listItemHeight: 45,
+ listBtnUnderlayColor: "#DDD",
+
+ // Card
+ cardBorderColor: "#ccc",
+
+ // Changed Variable
+ listItemPadding: platform === "ios" ? 10 : 12,
+
+ listNoteColor: "#808080",
+ listNoteSize: 13,
+
+ // Progress Bar
+ defaultProgressColor: "#E4202D",
+ inverseProgressColor: "#1A191B",
+
+ // Radio Button
+ radioBtnSize: platform === "ios" ? 25 : 23,
+ radioSelectedColorAndroid: "#5067FF",
+
+ // New Variable
+ radioBtnLineHeight: platform === "ios" ? 29 : 24,
+
+ radioColor: "#7e7e7e",
+
+ get radioSelectedColor() {
+ return color(this.radioColor).darken(0.2).hex();
+ },
+
+ // Spinner
+ defaultSpinnerColor: "#45D56E",
+ inverseSpinnerColor: "#1A191B",
+
+ // Tabs
+ tabBgColor: "#F8F8F8",
+ tabFontSize: 15,
+ tabTextColor: "#222222",
+
+ // Text
+ textColor: "#000",
+ inverseTextColor: "#fff",
+ noteFontSize: 14,
+
+ // Title
+ titleFontfamily: platform === "ios" ? "Roboto" : "Roboto_medium",
+ titleFontSize: 19,
+ subTitleFontSize: 14,
+ subtitleColor: "#FFF",
+
+ // New Variable
+ titleFontColor: "#FFF",
+
+ // Other
+ borderRadiusBase: 2,
+ borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+ contentPadding: 10,
+
+ get darkenHeader() {
+ return color(this.tabBgColor).darken(0.03).hex();
+ },
+
+ dropdownBg: "#000",
+ dropdownLinkColor: "#414142",
+ inputLineHeight: 24,
+ jumbotronBg: "#C9C9CE",
+ jumbotronPadding: 30,
+ deviceWidth,
+ deviceHeight,
+
+ // New Variable
+ inputGroupRoundedBorderRadius: 30
+};
diff --git a/native-base-theme/variables/platform.js b/native-base-theme/variables/platform.js
new file mode 100644
index 0000000..e41d5c1
--- /dev/null
+++ b/native-base-theme/variables/platform.js
@@ -0,0 +1,278 @@
+import color from "color";
+
+import { Platform, Dimensions, PixelRatio } from "react-native";
+
+const deviceHeight = Dimensions.get("window").height;
+const deviceWidth = Dimensions.get("window").width;
+const platform = Platform.OS;
+const platformStyle = undefined;
+
+export default {
+ platformStyle,
+ platform,
+ // AndroidRipple
+ androidRipple: true,
+ androidRippleColor: "rgba(256, 256, 256, 0.3)",
+ androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
+
+ // Badge
+ badgeBg: "#ED1727",
+ badgeColor: "#fff",
+ // New Variable
+ badgePadding: platform === "ios" ? 3 : 0,
+
+ // Button
+ btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
+ btnDisabledBg: "#b5b5b5",
+ btnDisabledClr: "#f1f1f1",
+
+ // CheckBox
+ CheckboxRadius: platform === "ios" ? 13 : 0,
+ CheckboxBorderWidth: platform === "ios" ? 1 : 2,
+ CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
+ CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
+ CheckboxIconSize: platform === "ios" ? 21 : 14,
+ CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
+ CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18,
+ DefaultFontSize: 17,
+ checkboxBgColor: "#039BE5",
+ checkboxSize: 20,
+ checkboxTickColor: "#fff",
+
+ // Segment
+ segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
+ segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
+ segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
+ segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
+ segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
+ segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
+
+ // New Variable
+ get defaultTextColor() {
+ return this.textColor;
+ },
+
+ get btnPrimaryBg() {
+ return this.brandPrimary;
+ },
+ get btnPrimaryColor() {
+ return this.inverseTextColor;
+ },
+ get btnInfoBg() {
+ return this.brandInfo;
+ },
+ get btnInfoColor() {
+ return this.inverseTextColor;
+ },
+ get btnSuccessBg() {
+ return this.brandSuccess;
+ },
+ get btnSuccessColor() {
+ return this.inverseTextColor;
+ },
+ get btnDangerBg() {
+ return this.brandDanger;
+ },
+ get btnDangerColor() {
+ return this.inverseTextColor;
+ },
+ get btnWarningBg() {
+ return this.brandWarning;
+ },
+ get btnWarningColor() {
+ return this.inverseTextColor;
+ },
+ get btnTextSize() {
+ return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
+ },
+ get btnTextSizeLarge() {
+ return this.fontSizeBase * 1.5;
+ },
+ get btnTextSizeSmall() {
+ return this.fontSizeBase * 0.8;
+ },
+ get borderRadiusLarge() {
+ return this.fontSizeBase * 3.8;
+ },
+
+ buttonPadding: 6,
+
+ get iconSizeLarge() {
+ return this.iconFontSize * 1.5;
+ },
+ get iconSizeSmall() {
+ return this.iconFontSize * 0.6;
+ },
+
+ // Card
+ cardDefaultBg: "#fff",
+
+ // Color
+ // brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5",
+ brandPrimary: "#f58220",
+ brandInfo: "#62B1F6",
+ brandSuccess: "#5cb85c",
+ brandDanger: "#d9534f",
+ brandWarning: "#f0ad4e",
+ brandSidebar: "#252932",
+
+ // Font
+ fontFamily: platform === "ios" ? "System" : "Roboto",
+ fontSizeBase: 15,
+
+ get fontSizeH1() {
+ return this.fontSizeBase * 1.8;
+ },
+ get fontSizeH2() {
+ return this.fontSizeBase * 1.6;
+ },
+ get fontSizeH3() {
+ return this.fontSizeBase * 1.4;
+ },
+
+ // Footer
+ footerHeight: 55,
+ footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#4179F7",
+
+ // FooterTab
+ tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
+ tabBarTextSize: platform === "ios" ? 14 : 11,
+ activeTab: platform === "ios" ? "#007aff" : "#fff",
+ sTabBarActiveTextColor: "#007aff",
+ tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
+ tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
+
+ // Tab
+ tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
+ topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
+ topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
+ topTabActiveBgColor: platform === "ios" ? "#cde1f9" : undefined,
+ topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
+ topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff",
+
+ // Header
+ toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff",
+ toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
+ toolbarHeight: platform === "ios" ? 64 : 56,
+ toolbarIconSize: platform === "ios" ? 20 : 22,
+ toolbarSearchIconSize: platform === "ios" ? 20 : 23,
+ toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
+ searchBarHeight: platform === "ios" ? 30 : 40,
+ toolbarInverseBg: "#222",
+ toolbarTextColor: platform === "ios" ? "#000" : "#fff",
+ toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5",
+ iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
+ get statusBarColor() {
+ return color(this.toolbarDefaultBg).darken(0.2).hex();
+ },
+
+ // Icon
+ iconFamily: "Ionicons",
+ iconFontSize: platform === "ios" ? 30 : 28,
+ iconMargin: 7,
+ iconHeaderSize: platform === "ios" ? 33 : 24,
+
+ // InputGroup
+ inputFontSize: 17,
+ inputBorderColor: "#D9D5DC",
+ inputSuccessBorderColor: "#2b8339",
+ inputErrorBorderColor: "#ed2f2f",
+
+ get inputColor() {
+ return this.textColor;
+ },
+ get inputColorPlaceholder() {
+ return "#575757";
+ },
+
+ inputGroupMarginBottom: 10,
+ inputHeightBase: 50,
+ inputPaddingLeft: 5,
+
+ get inputPaddingLeftIcon() {
+ return this.inputPaddingLeft * 8;
+ },
+
+ // Line Height
+ btnLineHeight: 19,
+ lineHeightH1: 32,
+ lineHeightH2: 27,
+ lineHeightH3: 22,
+ iconLineHeight: platform === "ios" ? 37 : 30,
+ lineHeight: platform === "ios" ? 20 : 24,
+
+ // List
+ listBorderColor: "#c9c9c9",
+ listDividerBg: "#f4f4f4",
+ listItemHeight: 45,
+ listBtnUnderlayColor: "#DDD",
+
+ // Card
+ cardBorderColor: "#ccc",
+
+ // Changed Variable
+ listItemPadding: platform === "ios" ? 10 : 12,
+
+ listNoteColor: "#808080",
+ listNoteSize: 13,
+
+ // Progress Bar
+ defaultProgressColor: "#E4202D",
+ inverseProgressColor: "#1A191B",
+
+ // Radio Button
+ radioBtnSize: platform === "ios" ? 25 : 23,
+ radioSelectedColorAndroid: "#3F51B5",
+
+ // New Variable
+ radioBtnLineHeight: platform === "ios" ? 29 : 24,
+
+ radioColor: "#7e7e7e",
+
+ get radioSelectedColor() {
+ return color(this.radioColor).darken(0.2).hex();
+ },
+
+ // Spinner
+ defaultSpinnerColor: "#45D56E",
+ inverseSpinnerColor: "#1A191B",
+
+ // Tabs
+ tabBgColor: "#F8F8F8",
+ tabFontSize: 15,
+ tabTextColor: "#222222",
+
+ // Text
+ textColor: "#000",
+ inverseTextColor: "#fff",
+ noteFontSize: 14,
+
+ // Title
+ titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
+ titleFontSize: platform === "ios" ? 17 : 19,
+ subTitleFontSize: platform === "ios" ? 12 : 14,
+ subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
+
+ // New Variable
+ titleFontColor: platform === "ios" ? "#000" : "#FFF",
+
+ // Other
+ borderRadiusBase: platform === "ios" ? 5 : 2,
+ borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+ contentPadding: 10,
+
+ get darkenHeader() {
+ return color(this.tabBgColor).darken(0.03).hex();
+ },
+
+ dropdownBg: "#000",
+ dropdownLinkColor: "#414142",
+ inputLineHeight: 24,
+ jumbotronBg: "#C9C9CE",
+ jumbotronPadding: 30,
+ deviceWidth,
+ deviceHeight,
+
+ // New Variable
+ inputGroupRoundedBorderRadius: 30
+};
diff --git a/src/Dusken.js b/src/Dusken.js
index a77d914..0a785a4 100644
--- a/src/Dusken.js
+++ b/src/Dusken.js
@@ -8,6 +8,7 @@ import EventListScreen from "./screens/EventListScreen";
import LoginScreen from "./screens/LoginScreen";
import MembershipScreen from "./screens/MembershipScreen";
+
/* Navigation */
const tabBarRoutes = {
EventList: { screen: EventListScreen },
@@ -15,7 +16,32 @@ const tabBarRoutes = {
About: { screen: AboutScreen },
};
-const tabNav = TabNavigator(tabBarRoutes, {tabBarPosition: 'bottom'});
+const tabBarOptions = {
+ tabBarPosition: 'bottom',
+ tabBarOptions: {
+ style: {
+ backgroundColor: "#fff"
+ },
+ indicatorStyle: {
+ backgroundColor: "#f58220"
+ },
+ // labelStyle: {
+ // color: '#f58220'
+ // },
+ activeTintColor: '#f58220',
+ inactiveTintColor: '#f58220',
+ showIcon: true,
+ iconStyle: {
+ color: '#f58220'
+ },
+ labelStyle: {
+ fontSize: 10,
+ marginBottom: 0,
+ }
+ }
+};
+
+const tabNav = TabNavigator(tabBarRoutes, tabBarOptions);
const DuskenContainer = StackNavigator({
Root: { screen: tabNav },
diff --git a/src/modules/about/About.js b/src/modules/about/About.js
index ecac8fa..2196e59 100644
--- a/src/modules/about/About.js
+++ b/src/modules/about/About.js
@@ -20,7 +20,7 @@ export default class About extends Component {
const styles = StyleSheet.create({
header: {
- fontSize: 16,
+ fontSize: 20,
fontWeight: 'bold',
color: '#000',
},
diff --git a/src/modules/membership/Membership.js b/src/modules/membership/Membership.js
index 94a030c..a8e7bcc 100644
--- a/src/modules/membership/Membership.js
+++ b/src/modules/membership/Membership.js
@@ -74,6 +74,7 @@ const styles = StyleSheet.create({
},
headerTitle: {
textAlign: 'center',
+ fontWeight: 'bold',
fontSize: 20,
color: '#000',
paddingVertical: 10,
diff --git a/src/screens/AboutScreen.js b/src/screens/AboutScreen.js
index d6d6586..fb3d604 100644
--- a/src/screens/AboutScreen.js
+++ b/src/screens/AboutScreen.js
@@ -1,16 +1,24 @@
import React, { Component } from 'react';
import AboutContainer from "../modules/about/AboutContainer";
import Icon from 'react-native-vector-icons/SimpleLineIcons';
+import getTheme from '../../native-base-theme/components';
+import {StyleProvider} from "native-base";
export default class AboutScreen extends Component {
static navigationOptions = {
title: 'Om oss',
+ headerStyle: {
+ backgroundColor: '#f58220',
+ },
tabBarIcon: ({ tintColor }) => (
),
};
render() {
- return ();
+ return (
+
+
+ );
}
}
\ No newline at end of file
diff --git a/src/screens/EventDetailsScreen.js b/src/screens/EventDetailsScreen.js
index 7240fb7..cac29ea 100644
--- a/src/screens/EventDetailsScreen.js
+++ b/src/screens/EventDetailsScreen.js
@@ -1,13 +1,22 @@
import React, { Component } from 'react';
import EventDetails from "../modules/events/EventDetails";
+import {StyleProvider} from "native-base";
+import getTheme from '../../native-base-theme/components';
export default class EventDetailsScreen extends Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.item.title.decoded,
+ headerStyle: {
+ backgroundColor: '#f58220',
+ }
});
render() {
const { params } = this.props.navigation.state;
- return ();
+ return (
+
+
+
+ );
}
}
\ No newline at end of file
diff --git a/src/screens/EventListScreen.js b/src/screens/EventListScreen.js
index 80d0580..3c53321 100644
--- a/src/screens/EventListScreen.js
+++ b/src/screens/EventListScreen.js
@@ -1,10 +1,15 @@
import React, { Component } from 'react';
import EventListContainer from "../modules/events/EventListContainer";
import Icon from 'react-native-vector-icons/SimpleLineIcons';
+import {StyleProvider} from "native-base";
+import getTheme from '../../native-base-theme/components';
export default class EventsScreen extends Component {
static navigationOptions = {
title: 'Program',
+ headerStyle: {
+ backgroundColor: '#f58220',
+ },
tabBarIcon: ({ tintColor }) => (
),
@@ -16,6 +21,10 @@ export default class EventsScreen extends Component {
};
render() {
- return ();
+ return (
+
+
+
+ );
}
}
\ No newline at end of file
diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js
index 9ee0aed..c0ae5cc 100644
--- a/src/screens/LoginScreen.js
+++ b/src/screens/LoginScreen.js
@@ -1,9 +1,14 @@
import React, { Component } from 'react';
import LoginContainer from "../modules/login/LoginContainer";
+import {StyleProvider} from "native-base";
+import getTheme from '../../native-base-theme/components';
export default class LoginScreen extends Component {
static navigationOptions = {
title: 'Logg inn',
+ headerStyle: {
+ backgroundColor: '#f58220',
+ },
};
onLogin = () => {
@@ -13,7 +18,8 @@ export default class LoginScreen extends Component {
render() {
return (
-
+
+
)
}
}
\ No newline at end of file
diff --git a/src/screens/MembershipScreen.js b/src/screens/MembershipScreen.js
index 4cd2108..007d2d5 100644
--- a/src/screens/MembershipScreen.js
+++ b/src/screens/MembershipScreen.js
@@ -1,10 +1,15 @@
import React, { Component } from 'react';
import MembershipContainer from "../modules/membership/MembershipContainer";
import Icon from 'react-native-vector-icons/SimpleLineIcons';
+import {StyleProvider} from "native-base";
+import getTheme from '../../native-base-theme/components';
export default class MembershipScreen extends Component {
static navigationOptions = {
title: 'Medlemskap',
+ headerStyle: {
+ backgroundColor: '#f58220',
+ },
tabBarIcon: ({ tintColor }) => (
),
@@ -20,7 +25,9 @@ export default class MembershipScreen extends Component {
render() {
return (
-
+
+
+
)
}
}
\ No newline at end of file