diff --git a/package.json b/package.json
index bb91c37..c380fbf 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,11 @@
"expo-splash-screen": "~0.3.1",
"expo-status-bar": "^1.0.2",
"expo-web-browser": "~8.3.1",
+ "native-base": "^2.13.14",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
+ "react-native-easy-grid": "^0.2.2",
"react-native-gesture-handler": "~1.6.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
@@ -41,6 +43,7 @@
"@types/styled-components": "^5.1.2",
"babel-preset-expo": "~8.1.0",
"jest-expo": "~38.0.0",
+ "lodash": "^4.17.20",
"typescript": "~3.9.5"
},
"private": true
diff --git a/src/hooks/useCachedResources.ts b/src/hooks/useCachedResources.ts
index 9b624e4..ec38f53 100644
--- a/src/hooks/useCachedResources.ts
+++ b/src/hooks/useCachedResources.ts
@@ -14,6 +14,8 @@ export default function useCachedResources() {
// Load fonts
await Font.loadAsync({
+ Roboto: require('native-base/Fonts/Roboto.ttf'),
+ Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
'space-mono': require('../../assets/fonts/SpaceMono-Regular.ttf'),
});
diff --git a/src/native-base-theme/components/Badge.js b/src/native-base-theme/components/Badge.js
new file mode 100644
index 0000000..98623bb
--- /dev/null
+++ b/src/native-base-theme/components/Badge.js
@@ -0,0 +1,38 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+ const badgeTheme = {
+ '.primary': {
+ backgroundColor: variables.buttonPrimaryBg
+ },
+ '.warning': {
+ backgroundColor: variables.buttonWarningBg
+ },
+ '.info': {
+ backgroundColor: variables.buttonInfoBg
+ },
+ '.success': {
+ backgroundColor: variables.buttonSuccessBg
+ },
+ '.danger': {
+ backgroundColor: variables.buttonDangerBg
+ },
+ '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',
+ justifyContent: 'center',
+ borderRadius: 13.5,
+ height: 27
+ };
+ return badgeTheme;
+};
diff --git a/src/native-base-theme/components/Body.js b/src/native-base-theme/components/Body.js
new file mode 100644
index 0000000..6de0c88
--- /dev/null
+++ b/src/native-base-theme/components/Body.js
@@ -0,0 +1,11 @@
+// @flow
+
+export default () => {
+ const bodyTheme = {
+ flex: 1,
+ alignItems: 'center',
+ alignSelf: 'center'
+ };
+
+ return bodyTheme;
+};
diff --git a/src/native-base-theme/components/Button.js b/src/native-base-theme/components/Button.js
new file mode 100644
index 0000000..b913c3c
--- /dev/null
+++ b/src/native-base-theme/components/Button.js
@@ -0,0 +1,387 @@
+// @flow
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+ const platformStyle = variables.platformStyle;
+ const platform = variables.platform;
+ const darkCommon = {
+ 'NativeBase.Text': {
+ color: variables.brandDark
+ },
+ 'NativeBase.Icon': {
+ color: variables.brandDark
+ },
+ 'NativeBase.IconNB': {
+ color: variables.brandDark
+ }
+ };
+ const lightCommon = {
+ 'NativeBase.Text': {
+ color: variables.brandLight
+ },
+ 'NativeBase.Icon': {
+ color: variables.brandLight
+ },
+ 'NativeBase.IconNB': {
+ color: variables.brandLight
+ }
+ };
+ const primaryCommon = {
+ 'NativeBase.Text': {
+ color: variables.buttonPrimaryBg
+ },
+ 'NativeBase.Icon': {
+ color: variables.buttonPrimaryBg
+ },
+ 'NativeBase.IconNB': {
+ color: variables.buttonPrimaryBg
+ }
+ };
+ const successCommon = {
+ 'NativeBase.Text': {
+ color: variables.buttonSuccessBg
+ },
+ 'NativeBase.Icon': {
+ color: variables.buttonSuccessBg
+ },
+ 'NativeBase.IconNB': {
+ color: variables.buttonSuccessBg
+ }
+ };
+ const infoCommon = {
+ 'NativeBase.Text': {
+ color: variables.buttonInfoBg
+ },
+ 'NativeBase.Icon': {
+ color: variables.buttonInfoBg
+ },
+ 'NativeBase.IconNB': {
+ color: variables.buttonInfoBg
+ }
+ };
+ const warningCommon = {
+ 'NativeBase.Text': {
+ color: variables.buttonWarningBg
+ },
+ 'NativeBase.Icon': {
+ color: variables.buttonWarningBg
+ },
+ 'NativeBase.IconNB': {
+ color: variables.buttonWarningBg
+ }
+ };
+ const dangerCommon = {
+ 'NativeBase.Text': {
+ color: variables.buttonDangerBg
+ },
+ 'NativeBase.Icon': {
+ color: variables.buttonDangerBg
+ },
+ 'NativeBase.IconNB': {
+ color: variables.buttonDangerBg
+ }
+ };
+ const buttonTheme = {
+ '.disabled': {
+ '.transparent': {
+ backgroundColor: 'transparent',
+ 'NativeBase.Text': {
+ color: variables.buttonDisabledBg
+ },
+ 'NativeBase.Icon': {
+ color: variables.buttonDisabledBg
+ },
+ 'NativeBase.IconNB': {
+ color: variables.buttonDisabledBg
+ }
+ },
+ 'NativeBase.Icon': {
+ color: variables.brandLight
+ },
+ 'NativeBase.IconNB': {
+ color: variables.brandLight
+ },
+ backgroundColor: variables.buttonDisabledBg
+ },
+ '.bordered': {
+ '.dark': {
+ ...darkCommon,
+ backgroundColor: 'transparent',
+ borderColor: variables.brandDark,
+ borderWidth: variables.borderWidth * 2
+ },
+ '.light': {
+ ...lightCommon,
+ backgroundColor: 'transparent',
+ borderColor: variables.brandLight,
+ borderWidth: variables.borderWidth * 2
+ },
+ '.primary': {
+ ...primaryCommon,
+ backgroundColor: 'transparent',
+ borderColor: variables.buttonPrimaryBg,
+ borderWidth: variables.borderWidth * 2
+ },
+ '.success': {
+ ...successCommon,
+ backgroundColor: 'transparent',
+ borderColor: variables.buttonSuccessBg,
+ borderWidth: variables.borderWidth * 2
+ },
+ '.info': {
+ ...infoCommon,
+ backgroundColor: 'transparent',
+ borderColor: variables.buttonInfoBg,
+ borderWidth: variables.borderWidth * 2
+ },
+ '.warning': {
+ ...warningCommon,
+ backgroundColor: 'transparent',
+ borderColor: variables.buttonWarningBg,
+ borderWidth: variables.borderWidth * 2
+ },
+ '.danger': {
+ ...dangerCommon,
+ backgroundColor: 'transparent',
+ borderColor: variables.buttonDangerBg,
+ borderWidth: variables.borderWidth * 2
+ },
+ '.disabled': {
+ backgroundColor: 'transparent',
+ borderColor: variables.buttonDisabledBg,
+ borderWidth: variables.borderWidth * 2,
+ 'NativeBase.Text': {
+ color: variables.buttonDisabledBg
+ }
+ },
+ ...primaryCommon,
+ borderWidth: variables.borderWidth * 2,
+ elevation: null,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowOpacity: null,
+ shadowRadius: null,
+ backgroundColor: 'transparent'
+ },
+
+ '.dark': {
+ '.bordered': {
+ ...darkCommon
+ },
+ backgroundColor: variables.brandDark
+ },
+ '.light': {
+ '.transparent': {
+ ...lightCommon,
+ backgroundColor: 'transparent'
+ },
+ '.bordered': {
+ ...lightCommon
+ },
+ ...darkCommon,
+ backgroundColor: variables.brandLight
+ },
+
+ '.primary': {
+ '.bordered': {
+ ...primaryCommon
+ },
+ backgroundColor: variables.buttonPrimaryBg
+ },
+
+ '.success': {
+ '.bordered': {
+ ...successCommon
+ },
+ backgroundColor: variables.buttonSuccessBg
+ },
+
+ '.info': {
+ '.bordered': {
+ ...infoCommon
+ },
+ backgroundColor: variables.buttonInfoBg
+ },
+
+ '.warning': {
+ '.bordered': {
+ ...warningCommon
+ },
+ backgroundColor: variables.buttonWarningBg
+ },
+
+ '.danger': {
+ '.bordered': {
+ ...dangerCommon
+ },
+ backgroundColor: variables.buttonDangerBg
+ },
+
+ '.block': {
+ justifyContent: 'center',
+ alignSelf: 'stretch'
+ },
+
+ '.full': {
+ justifyContent: 'center',
+ alignSelf: 'stretch',
+ borderRadius: 0
+ },
+
+ '.rounded': {
+ borderRadius: variables.borderRadiusLarge
+ },
+
+ '.transparent': {
+ backgroundColor: 'transparent',
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null,
+ ...primaryCommon,
+ '.dark': {
+ ...darkCommon,
+ },
+ '.danger': {
+ ...dangerCommon,
+ },
+ '.warning': {
+ ...warningCommon,
+ },
+ '.info': {
+ ...infoCommon,
+ },
+ '.primary': {
+ ...primaryCommon,
+ },
+ '.success': {
+ ...successCommon,
+ },
+ '.light': {
+ ...lightCommon,
+ },
+ '.disabled': {
+ backgroundColor: 'transparent',
+ borderColor: variables.buttonDisabledBg,
+ borderWidth: variables.borderWidth * 2,
+ 'NativeBase.Text': {
+ color: variables.buttonDisabledBg
+ },
+ 'NativeBase.Icon': {
+ color: variables.buttonDisabledBg
+ },
+ 'NativeBase.IconNB': {
+ color: variables.buttonDisabledBg
+ }
+ }
+ },
+
+ '.small': {
+ height: 30,
+ 'NativeBase.Text': {
+ fontSize: 14
+ },
+ 'NativeBase.Icon': {
+ fontSize: 20,
+ paddingTop: 0
+ },
+ 'NativeBase.IconNB': {
+ fontSize: 20,
+ paddingTop: 0
+ }
+ },
+
+ '.large': {
+ height: 60,
+ 'NativeBase.Text': {
+ fontSize: 22
+ }
+ },
+
+ '.capitalize': {},
+
+ '.vertical': {
+ flexDirection: 'column',
+ height: null
+ },
+
+ 'NativeBase.Text': {
+ fontFamily: variables.buttonFontFamily,
+ marginLeft: 0,
+ marginRight: 0,
+ color: variables.inverseTextColor,
+ fontSize: variables.buttonTextSize,
+ paddingHorizontal: 16,
+ backgroundColor: 'transparent'
+ },
+
+ 'NativeBase.Icon': {
+ color: variables.inverseTextColor,
+ fontSize: 24,
+ marginHorizontal: 16,
+ paddingTop: platform === PLATFORM.IOS ? 2 : undefined
+ },
+ 'NativeBase.IconNB': {
+ color: variables.inverseTextColor,
+ fontSize: 24,
+ marginHorizontal: 16,
+ paddingTop: platform === PLATFORM.IOS ? 2 : undefined
+ },
+
+ '.iconLeft': {
+ 'NativeBase.Text': {
+ marginLeft: 0
+ },
+ 'NativeBase.IconNB': {
+ marginRight: 0,
+ marginLeft: 16
+ },
+ 'NativeBase.Icon': {
+ marginRight: 0,
+ marginLeft: 16
+ }
+ },
+ '.iconRight': {
+ 'NativeBase.Text': {
+ marginRight: 0
+ },
+ 'NativeBase.IconNB': {
+ marginLeft: 0,
+ marginRight: 16
+ },
+ 'NativeBase.Icon': {
+ marginLeft: 0,
+ marginRight: 16
+ }
+ },
+ '.picker': {
+ 'NativeBase.Text': {
+ '.note': {
+ fontSize: 16,
+ lineHeight: null
+ }
+ }
+ },
+ paddingVertical: variables.buttonPadding,
+ backgroundColor: variables.buttonPrimaryBg,
+ borderRadius: variables.borderRadiusBase,
+ borderColor: variables.buttonPrimaryBg,
+ borderWidth: null,
+ height: 45,
+ flexDirection: 'row',
+ elevation: 2,
+ shadowColor:
+ platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined,
+ shadowOffset:
+ platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
+ shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
+ shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ alignSelf: 'flex-start'
+ };
+ return buttonTheme;
+};
diff --git a/src/native-base-theme/components/Card.js b/src/native-base-theme/components/Card.js
new file mode 100644
index 0000000..de4f9f4
--- /dev/null
+++ b/src/native-base-theme/components/Card.js
@@ -0,0 +1,37 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+ const cardTheme = {
+ '.transparent': {
+ shadowColor: null,
+ shadowOffset: null,
+ shadowOpacity: null,
+ shadowRadius: null,
+ elevation: null,
+ backgroundColor: 'transparent',
+ borderWidth: 0
+ },
+ '.noShadow': {
+ shadowColor: null,
+ shadowOffset: null,
+ shadowOpacity: null,
+ elevation: null
+ },
+ marginVertical: 5,
+ marginHorizontal: 2,
+ borderWidth: variables.borderWidth,
+ borderRadius: variables.cardBorderRadius,
+ borderColor: variables.cardBorderColor,
+ flexWrap: 'nowrap',
+ backgroundColor: variables.cardDefaultBg,
+ shadowColor: '#000',
+ shadowOffset: { width: 0, height: 2 },
+ shadowOpacity: 0.1,
+ shadowRadius: 1.5,
+ elevation: 3
+ };
+
+ return cardTheme;
+};
diff --git a/src/native-base-theme/components/CardItem.js b/src/native-base-theme/components/CardItem.js
new file mode 100644
index 0000000..bfb1757
--- /dev/null
+++ b/src/native-base-theme/components/CardItem.js
@@ -0,0 +1,198 @@
+// @flow
+
+import { StyleSheet } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+ const platform = variables.platform;
+ const transparentBtnCommon = {
+ 'NativeBase.Text': {
+ fontSize: variables.DefaultFontSize - 3,
+ 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
+ };
+
+ 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': {
+ ...transparentBtnCommon,
+ paddingRight: variables.cardItemPadding + 5
+ }
+ },
+ flex: 1,
+ flexDirection: 'row',
+ alignItems: 'center'
+ },
+ '.content': {
+ 'NativeBase.Text': {
+ color: platform === PLATFORM.IOS ? '#555' : '#222',
+ fontSize: variables.DefaultFontSize - 2
+ }
+ },
+ '.cardBody': {
+ padding: -5,
+ 'NativeBase.Text': {
+ marginTop: 5
+ }
+ },
+ 'NativeBase.Body': {
+ 'NativeBase.Text': {
+ '.note': {
+ color: variables.listNoteColor,
+ fontWeight: '200',
+ marginRight: 20
+ }
+ },
+ 'NativeBase.Button': {
+ '.transparent': {
+ ...transparentBtnCommon,
+ paddingRight: variables.cardItemPadding + 5,
+ alignSelf: 'stretch'
+ }
+ },
+ flex: 1,
+ alignSelf: 'stretch',
+ alignItems: 'flex-start'
+ },
+ 'NativeBase.Right': {
+ 'NativeBase.Badge': {
+ alignSelf: null
+ },
+ 'NativeBase.Button': {
+ '.transparent': {
+ ...transparentBtnCommon
+ },
+ 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 - 1,
+ 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 === PLATFORM.IOS ? '600' : '500'
+ },
+ '.bordered': {
+ 'NativeBase.Text': {
+ color: variables.brandPrimary,
+ fontWeight: platform === PLATFORM.IOS ? '600' : '500'
+ },
+ borderBottomWidth: variables.borderWidth
+ },
+ borderBottomWidth: null,
+ paddingVertical: variables.cardItemPadding + 5
+ },
+ '.footer': {
+ 'NativeBase.Text': {
+ fontSize: 16,
+ fontWeight: platform === PLATFORM.IOS ? '600' : '500'
+ },
+ '.bordered': {
+ 'NativeBase.Text': {
+ color: variables.brandPrimary,
+ fontWeight: platform === PLATFORM.IOS ? '600' : '500'
+ },
+ borderTopWidth: variables.borderWidth
+ },
+ 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: StyleSheet.hairlineWidth,
+ borderColor: variables.cardBorderColor
+ },
+ '.first': {
+ borderTopLeftRadius: variables.cardBorderRadius,
+ borderTopRightRadius: variables.cardBorderRadius
+ },
+ '.last': {
+ borderBottomLeftRadius: variables.cardBorderRadius,
+ borderBottomRightRadius: variables.cardBorderRadius
+ },
+ flexDirection: 'row',
+ alignItems: 'center',
+ borderRadius: variables.cardBorderRadius,
+ padding: variables.cardItemPadding + 5,
+ paddingVertical: variables.cardItemPadding,
+ backgroundColor: variables.cardDefaultBg
+ };
+
+ return cardItemTheme;
+};
diff --git a/src/native-base-theme/components/CheckBox.js b/src/native-base-theme/components/CheckBox.js
new file mode 100644
index 0000000..7a858c3
--- /dev/null
+++ b/src/native-base-theme/components/CheckBox.js
@@ -0,0 +1,38 @@
+// @flow
+
+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/src/native-base-theme/components/Container.js b/src/native-base-theme/components/Container.js
new file mode 100644
index 0000000..cfd7e28
--- /dev/null
+++ b/src/native-base-theme/components/Container.js
@@ -0,0 +1,17 @@
+// @flow
+
+import { Platform, Dimensions } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+const deviceHeight = Dimensions.get('window').height;
+export default (variables /* : * */ = variable) => {
+ const theme = {
+ flex: 1,
+ height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20,
+ backgroundColor: variables.containerBgColor
+ };
+
+ return theme;
+};
diff --git a/src/native-base-theme/components/Content.js b/src/native-base-theme/components/Content.js
new file mode 100644
index 0000000..97bd81c
--- /dev/null
+++ b/src/native-base-theme/components/Content.js
@@ -0,0 +1,14 @@
+// @flow
+
+export default () => {
+ const contentTheme = {
+ flex: 1,
+ backgroundColor: 'transparent',
+ 'NativeBase.Segment': {
+ borderWidth: 0,
+ backgroundColor: 'transparent'
+ }
+ };
+
+ return contentTheme;
+};
diff --git a/src/native-base-theme/components/Fab.js b/src/native-base-theme/components/Fab.js
new file mode 100644
index 0000000..4d2b9cb
--- /dev/null
+++ b/src/native-base-theme/components/Fab.js
@@ -0,0 +1,25 @@
+// @flow
+
+export default () => {
+ const fabTheme = {
+ 'NativeBase.Button': {
+ alignItems: 'center',
+ padding: null,
+ justifyContent: 'center',
+ 'NativeBase.Icon': {
+ alignSelf: 'center',
+ fontSize: 20,
+ marginLeft: 0,
+ marginRight: 0
+ },
+ 'NativeBase.IconNB': {
+ alignSelf: 'center',
+ fontSize: 20,
+ marginLeft: 0,
+ marginRight: 0
+ }
+ }
+ };
+
+ return fabTheme;
+};
diff --git a/src/native-base-theme/components/Footer.js b/src/native-base-theme/components/Footer.js
new file mode 100644
index 0000000..292b35c
--- /dev/null
+++ b/src/native-base-theme/components/Footer.js
@@ -0,0 +1,119 @@
+// @flow
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+ const platformStyle = variables.platformStyle;
+ const platform = variables.platform;
+
+ const iconCommon = {
+ 'NativeBase.Icon': {
+ color: variables.tabBarActiveTextColor
+ }
+ };
+ const iconNBCommon = {
+ 'NativeBase.IconNB': {
+ color: variables.tabBarActiveTextColor
+ }
+ };
+ const textCommon = {
+ 'NativeBase.Text': {
+ color: variables.tabBarActiveTextColor
+ }
+ };
+ const footerTheme = {
+ 'NativeBase.Left': {
+ 'NativeBase.Button': {
+ '.transparent': {
+ backgroundColor: 'transparent',
+ borderColor: null,
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null,
+ ...iconCommon,
+ ...iconNBCommon,
+ ...textCommon
+ },
+ alignSelf: null,
+ ...iconCommon,
+ ...iconNBCommon
+ // ...textCommon
+ },
+ 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,
+ ...iconCommon,
+ ...iconNBCommon,
+ ...textCommon
+ },
+ '.full': {
+ height: variables.footerHeight,
+ paddingBottom: variables.footerPaddingBottom,
+ flex: 1
+ },
+ ...iconCommon,
+ ...iconNBCommon
+ // ...textCommon
+ }
+ },
+ 'NativeBase.Right': {
+ 'NativeBase.Button': {
+ '.transparent': {
+ backgroundColor: 'transparent',
+ borderColor: null,
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null,
+ ...iconCommon,
+ ...iconNBCommon,
+ ...textCommon
+ },
+ alignSelf: null,
+ ...iconCommon,
+ ...iconNBCommon
+ // ...textCommon
+ },
+ flex: 1,
+ alignSelf: 'center',
+ alignItems: 'flex-end'
+ },
+ backgroundColor: variables.footerDefaultBg,
+ flexDirection: 'row',
+ justifyContent: 'center',
+ borderTopWidth:
+ platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+ ? variables.borderWidth
+ : undefined,
+ borderColor:
+ platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+ ? '#cbcbcb'
+ : undefined,
+ height: variables.footerHeight,
+ paddingBottom: variables.footerPaddingBottom,
+ elevation: 3,
+ left: 0,
+ right: 0
+ };
+ return footerTheme;
+};
diff --git a/src/native-base-theme/components/FooterTab.js b/src/native-base-theme/components/FooterTab.js
new file mode 100644
index 0000000..abaa023
--- /dev/null
+++ b/src/native-base-theme/components/FooterTab.js
@@ -0,0 +1,79 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+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 === 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 === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ flex: 1,
+ alignSelf: 'stretch'
+ };
+
+ return footerTabTheme;
+};
diff --git a/src/native-base-theme/components/Form.js b/src/native-base-theme/components/Form.js
new file mode 100644
index 0000000..3040f30
--- /dev/null
+++ b/src/native-base-theme/components/Form.js
@@ -0,0 +1,86 @@
+// @flow
+
+export default () => {
+ 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: null
+ },
+ 'NativeBase.Icon': {
+ marginTop: 36
+ },
+ marginLeft: 15
+ },
+ '.floatingLabel': {
+ 'NativeBase.Input': {
+ paddingLeft: null,
+ top: 10,
+ marginLeft: null
+ },
+ 'NativeBase.Label': {
+ left: 0,
+ top: 6
+ },
+ '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/src/native-base-theme/components/H1.js b/src/native-base-theme/components/H1.js
new file mode 100644
index 0000000..20aa8db
--- /dev/null
+++ b/src/native-base-theme/components/H1.js
@@ -0,0 +1,13 @@
+// @flow
+
+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/src/native-base-theme/components/H2.js b/src/native-base-theme/components/H2.js
new file mode 100644
index 0000000..cad4057
--- /dev/null
+++ b/src/native-base-theme/components/H2.js
@@ -0,0 +1,13 @@
+// @flow
+
+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/src/native-base-theme/components/H3.js b/src/native-base-theme/components/H3.js
new file mode 100644
index 0000000..19917f5
--- /dev/null
+++ b/src/native-base-theme/components/H3.js
@@ -0,0 +1,13 @@
+// @flow
+
+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/src/native-base-theme/components/Header.js b/src/native-base-theme/components/Header.js
new file mode 100644
index 0000000..31bb7ea
--- /dev/null
+++ b/src/native-base-theme/components/Header.js
@@ -0,0 +1,419 @@
+// @flow
+
+import { PixelRatio, StatusBar } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+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',
+ fontWeight: '500',
+ paddingBottom: 3
+ },
+ 'NativeBase.Subtitle': {
+ fontSize: variables.subTitleFontSize,
+ fontFamily: variables.titleFontfamily,
+ color: variables.subtitleColor,
+ textAlign: 'center'
+ }
+ }
+ },
+ '.transparent': {
+ backgroundColor: 'transparent',
+ borderBottomColor: 'transparent',
+ elevation: 0,
+ shadowColor: null,
+ shadowOffset: null,
+ shadowRadius: null,
+ shadowOpacity: null,
+ paddingTop:
+ platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined,
+ height:
+ platform === PLATFORM.ANDROID
+ ? variables.toolbarHeight + StatusBar.currentHeight
+ : variables.toolbarHeight
+ },
+ '.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.Left': {
+ flex: 0.3
+ },
+ 'NativeBase.Right': {
+ flex: 0.3
+ },
+ 'NativeBase.Body': {
+ flex: 1,
+ 'NativeBase.Segment': {
+ marginRight: 0,
+ alignSelf: 'center',
+ 'NativeBase.Button': {
+ paddingLeft: 0,
+ paddingRight: 0
+ }
+ }
+ }
+ },
+ '.noLeft': {
+ 'NativeBase.Left': {
+ width: platform === PLATFORM.IOS ? undefined : 0,
+ flex: platform === PLATFORM.IOS ? 1 : 0
+ },
+ 'NativeBase.Body': {
+ 'NativeBase.Title': {
+ paddingLeft: platform === PLATFORM.IOS ? undefined : 10
+ },
+ 'NativeBase.Subtitle': {
+ paddingLeft: platform === PLATFORM.IOS ? undefined : 10
+ }
+ }
+ },
+ 'NativeBase.Button': {
+ justifyContent: 'center',
+ alignSelf: 'center',
+ alignItems: 'center',
+ '.transparent': {
+ 'NativeBase.Text': {
+ color: variables.toolbarBtnTextColor,
+ 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: null,
+ height: variables.searchBarInputHeight
+ },
+ 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 === PLATFORM.IOS ? 10 : null
+ },
+ paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
+ width: platform === PLATFORM.IOS ? undefined : 0,
+ height: platform === PLATFORM.IOS ? undefined : 0
+ }
+ },
+ '.rounded': {
+ 'NativeBase.Item': {
+ borderRadius:
+ platform === PLATFORM.IOS && platformStyle !== PLATFORM.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.toolbarBtnTextColor,
+ fontSize: platform === PLATFORM.IOS ? 17 : 0,
+ marginLeft: 7,
+ lineHeight: 19.5
+ },
+ 'NativeBase.IconNB': {
+ color: variables.toolbarBtnColor,
+ fontSize: variables.iconHeaderSize,
+ marginTop: 2,
+ marginRight: 5,
+ marginLeft: 2
+ }
+ },
+ '.transparent': {
+ marginLeft:
+ platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+ ? -3
+ : 0,
+ 'NativeBase.Icon': {
+ color: variables.toolbarBtnColor,
+ fontSize:
+ platform === PLATFORM.IOS &&
+ variables.platformStyle !== PLATFORM.MATERIAL
+ ? variables.iconHeaderSize + 1
+ : variables.iconHeaderSize,
+ marginTop: 0,
+ marginRight: 2,
+ marginLeft: 1,
+ paddingTop: 1
+ },
+ 'NativeBase.IconNB': {
+ color: variables.toolbarBtnColor,
+ fontSize:
+ platform === PLATFORM.IOS &&
+ variables.platformStyle !== PLATFORM.MATERIAL
+ ? variables.iconHeaderSize + 1
+ : variables.iconHeaderSize - 2,
+ marginTop: 0,
+ marginRight: 2,
+ marginLeft: 1,
+ paddingTop: 1
+ },
+ 'NativeBase.Text': {
+ color: variables.toolbarBtnTextColor,
+ fontSize: platform === PLATFORM.IOS ? 17 : 14,
+ top: platform === PLATFORM.IOS ? 1 : -1.5,
+ paddingLeft:
+ platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+ ? 2
+ : 5,
+ paddingRight:
+ platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+ ? undefined
+ : 10
+ },
+ 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,
+ paddingRight: variables.buttonPadding,
+ paddingLeft:
+ platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+ ? 4
+ : 8
+ },
+ flex:
+ platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+ ? 1
+ : 0.4,
+ alignSelf: 'center',
+ alignItems: 'flex-start'
+ },
+ 'NativeBase.Body': {
+ flex: 1,
+ alignItems:
+ platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
+ ? 'center'
+ : 'flex-start',
+ alignSelf: 'center',
+ 'NativeBase.Segment': {
+ borderWidth: 0,
+ alignSelf: 'flex-end',
+ marginRight: platform === 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.toolbarBtnTextColor,
+ fontSize: platform === PLATFORM.IOS ? 17 : 14,
+ lineHeight: 19.5
+ },
+ 'NativeBase.IconNB': {
+ color: variables.toolbarBtnColor,
+ fontSize: variables.iconHeaderSize - 2,
+ marginTop: 2,
+ marginRight: 2,
+ marginLeft: 5
+ }
+ },
+ '.transparent': {
+ marginRight: platform === PLATFORM.IOS ? -9 : -5,
+ paddingLeft: 15,
+ paddingRight: 12,
+ paddingHorizontal: 15,
+ borderRadius: 50,
+ 'NativeBase.Icon': {
+ color: variables.toolbarBtnColor,
+ fontSize: variables.iconHeaderSize - 2,
+ marginTop: 0,
+ marginLeft: 2,
+ marginRight: 0
+ // paddingTop: 0
+ },
+ 'NativeBase.IconNB': {
+ color: variables.toolbarBtnColor,
+ fontSize: variables.iconHeaderSize - 2,
+ marginTop: 0,
+ marginLeft: 2,
+ marginRight: 0
+ // paddingTop: 0
+ },
+ 'NativeBase.Text': {
+ color: variables.toolbarBtnTextColor,
+ fontSize: platform === PLATFORM.IOS ? 17 : 14,
+ top: platform === PLATFORM.IOS ? 1 : -1.5,
+ paddingRight:
+ platform === PLATFORM.IOS &&
+ variables.platformStyle !== PLATFORM.MATERIAL
+ ? 0
+ : undefined
+ },
+ 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,
+ paddingLeft:
+ platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
+ ? 6
+ : 10,
+ paddingRight: 10,
+ justifyContent: 'center',
+ // paddingTop: platform === PLATFORM.IOS ? 18 : 0,
+ borderBottomWidth:
+ platform === PLATFORM.IOS
+ ? 1 / PixelRatio.getPixelSizeForLayoutSize(1)
+ : 0,
+ borderBottomColor: variables.toolbarDefaultBorder,
+ height:
+ variables.platform === PLATFORM.IOS &&
+ variables.platformStyle === PLATFORM.MATERIAL
+ ? variables.toolbarHeight + 10
+ : variables.toolbarHeight,
+ elevation: 3,
+ shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
+ shadowOffset:
+ platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
+ shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
+ shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
+ top: 0,
+ left: 0,
+ right: 0
+ };
+
+ return headerTheme;
+};
diff --git a/src/native-base-theme/components/Icon.js b/src/native-base-theme/components/Icon.js
new file mode 100644
index 0000000..1161cd2
--- /dev/null
+++ b/src/native-base-theme/components/Icon.js
@@ -0,0 +1,12 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+ const iconTheme = {
+ fontSize: variables.iconFontSize,
+ color: variables.textColor
+ };
+
+ return iconTheme;
+};
diff --git a/src/native-base-theme/components/Input.js b/src/native-base-theme/components/Input.js
new file mode 100644
index 0000000..d0dd6af
--- /dev/null
+++ b/src/native-base-theme/components/Input.js
@@ -0,0 +1,19 @@
+// @flow
+
+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
+ };
+
+ return inputTheme;
+};
diff --git a/src/native-base-theme/components/InputGroup.js b/src/native-base-theme/components/InputGroup.js
new file mode 100644
index 0000000..7988ca5
--- /dev/null
+++ b/src/native-base-theme/components/InputGroup.js
@@ -0,0 +1,132 @@
+// @flow
+
+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/src/native-base-theme/components/Item.js b/src/native-base-theme/components/Item.js
new file mode 100644
index 0000000..79c9add
--- /dev/null
+++ b/src/native-base-theme/components/Item.js
@@ -0,0 +1,242 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+ const itemTheme = {
+ '.floatingLabel': {
+ 'NativeBase.Input': {
+ height: 50,
+ top: 8,
+ paddingTop: 3,
+ paddingBottom: 7,
+ '.multiline': {
+ minHeight: variables.inputHeightBase,
+ paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3,
+ paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10
+ }
+ },
+ 'NativeBase.Label': {
+ paddingTop: 5
+ },
+ 'NativeBase.Icon': {
+ top: 6,
+ paddingTop: 8
+ },
+ 'NativeBase.IconNB': {
+ top: 6,
+ paddingTop: 8
+ }
+ },
+ '.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 === PLATFORM.IOS ? 'stretch' : 'flex-start',
+ alignSelf: 'stretch',
+ flex: 1,
+ // width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25,
+ fontSize: variables.inputFontSize,
+ lineHeight: variables.inputLineHeight - 6,
+ '.secureTextEntry': {
+ fontSize: variables.inputFontSize
+ },
+ '.multiline': {
+ paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined,
+ paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined
+ }
+ },
+ flexDirection: null,
+ minHeight: variables.inputHeightBase + 15
+ },
+ '.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 === PLATFORM.IOS ? 1.5 : undefined,
+ fontSize: variables.inputFontSize
+ },
+ '.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'
+ }
+ },
+ '.picker': {
+ marginLeft: 0
+ },
+
+ 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/src/native-base-theme/components/Label.js b/src/native-base-theme/components/Label.js
new file mode 100644
index 0000000..118f648
--- /dev/null
+++ b/src/native-base-theme/components/Label.js
@@ -0,0 +1,12 @@
+// @flow
+
+export default () => {
+ const labelTheme = {
+ '.focused': {
+ width: 0
+ },
+ fontSize: 17
+ };
+
+ return labelTheme;
+};
diff --git a/src/native-base-theme/components/Left.js b/src/native-base-theme/components/Left.js
new file mode 100644
index 0000000..e01d693
--- /dev/null
+++ b/src/native-base-theme/components/Left.js
@@ -0,0 +1,11 @@
+// @flow
+
+export default () => {
+ const leftTheme = {
+ flex: 1,
+ alignSelf: 'center',
+ alignItems: 'flex-start'
+ };
+
+ return leftTheme;
+};
diff --git a/src/native-base-theme/components/ListItem.js b/src/native-base-theme/components/ListItem.js
new file mode 100644
index 0000000..c41ec5d
--- /dev/null
+++ b/src/native-base-theme/components/ListItem.js
@@ -0,0 +1,446 @@
+// @flow
+
+import { Platform, PixelRatio } from 'react-native';
+
+import pickerTheme from './Picker';
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+ const platform = variables.platform;
+ const selectedStyle = {
+ 'NativeBase.Text': {
+ color: variables.listItemSelected
+ },
+ 'NativeBase.Icon': {
+ color: variables.listItemSelected
+ }
+ };
+
+ 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 === 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 === PLATFORM.IOS ? 30 : 40,
+ borderColor: 'transparent',
+ backgroundColor: '#fff',
+ borderRadius: 5
+ },
+ 'NativeBase.Button': {
+ '.transparent': {
+ 'NativeBase.Text': {
+ fontWeight: '500'
+ },
+ paddingHorizontal: null,
+ paddingLeft: platform === PLATFORM.IOS ? 10 : null
+ },
+ paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
+ width: platform === PLATFORM.IOS ? undefined : 0,
+ height: platform === 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 === PLATFORM.IOS ? variables.borderWidth : null,
+ marginLeft: null,
+ padding: variables.listItemPadding,
+ paddingLeft: variables.listItemPadding + 5,
+ paddingTop:
+ platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined,
+ paddingBottom:
+ platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined,
+ flexDirection: 'row',
+ borderColor: variables.listBorderColor,
+ 'NativeBase.Text': {
+ fontSize: 14,
+ color: platform === 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': {
+ ...selectedStyle
+ },
+ 'NativeBase.Body': {
+ ...selectedStyle
+ },
+ 'NativeBase.Right': {
+ ...selectedStyle
+ },
+ ...selectedStyle
+ },
+ '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': {
+ 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,
+ alignSelf: 'flex-start',
+ paddingTop: 14
+ },
+ '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
+ },
+ '.noBorder': {
+ 'NativeBase.Body': {
+ borderBottomWidth: null
+ },
+ 'NativeBase.Right': {
+ borderBottomWidth: null
+ }
+ },
+ borderBottomWidth: null,
+ paddingVertical: null,
+ paddingRight: null
+ },
+ '.thumbnail': {
+ 'NativeBase.Left': {
+ flex: 0
+ },
+ 'NativeBase.Body': {
+ 'NativeBase.Text': {
+ marginLeft: null
+ },
+ flex: 1,
+ paddingVertical: variables.listItemPadding + 8,
+ 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
+ },
+ '.noBorder': {
+ 'NativeBase.Body': {
+ borderBottomWidth: null
+ },
+ 'NativeBase.Right': {
+ borderBottomWidth: null
+ }
+ },
+ 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 === PLATFORM.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
+ },
+ '.noBorder': {
+ 'NativeBase.Body': {
+ borderBottomWidth: null
+ },
+ 'NativeBase.Right': {
+ borderBottomWidth: null
+ }
+ },
+ borderBottomWidth: null,
+ paddingVertical: null,
+ paddingRight: null,
+ height: 44,
+ justifyContent: 'center'
+ },
+ '.noBorder': {
+ borderBottomWidth: null
+ },
+ '.noIndent': {
+ marginLeft: null,
+ padding: variables.listItemPadding,
+ paddingLeft: variables.listItemPadding + 6
+ },
+ alignItems: 'center',
+ flexDirection: 'row',
+ paddingRight: variables.listItemPadding + 6,
+ paddingVertical: variables.listItemPadding + 3,
+ marginLeft: variables.listItemPadding + 6,
+ borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+ backgroundColor: variables.listBg,
+ borderColor: variables.listBorderColor
+ };
+
+ return listItemTheme;
+};
diff --git a/src/native-base-theme/components/Picker.android.js b/src/native-base-theme/components/Picker.android.js
new file mode 100644
index 0000000..300a743
--- /dev/null
+++ b/src/native-base-theme/components/Picker.android.js
@@ -0,0 +1,14 @@
+// @flow
+
+export default () => {
+ const pickerTheme = {
+ '.note': {
+ color: '#8F8E95'
+ },
+ // width: 90,
+ marginRight: -4,
+ flexGrow: 1
+ };
+
+ return pickerTheme;
+};
diff --git a/src/native-base-theme/components/Picker.ios.js b/src/native-base-theme/components/Picker.ios.js
new file mode 100644
index 0000000..b81b056
--- /dev/null
+++ b/src/native-base-theme/components/Picker.ios.js
@@ -0,0 +1,7 @@
+// @flow
+
+export default () => {
+ const pickerTheme = {};
+
+ return pickerTheme;
+};
diff --git a/src/native-base-theme/components/Picker.js b/src/native-base-theme/components/Picker.js
new file mode 100644
index 0000000..300a743
--- /dev/null
+++ b/src/native-base-theme/components/Picker.js
@@ -0,0 +1,14 @@
+// @flow
+
+export default () => {
+ const pickerTheme = {
+ '.note': {
+ color: '#8F8E95'
+ },
+ // width: 90,
+ marginRight: -4,
+ flexGrow: 1
+ };
+
+ return pickerTheme;
+};
diff --git a/src/native-base-theme/components/Radio.js b/src/native-base-theme/components/Radio.js
new file mode 100644
index 0000000..d1e0e5f
--- /dev/null
+++ b/src/native-base-theme/components/Radio.js
@@ -0,0 +1,31 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+ const radioTheme = {
+ '.selected': {
+ 'NativeBase.IconNB': {
+ color:
+ Platform.OS === PLATFORM.IOS
+ ? variables.radioColor
+ : variables.radioSelectedColorAndroid,
+ lineHeight:
+ Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight,
+ height: Platform.OS === PLATFORM.IOS ? 20 : undefined
+ }
+ },
+ 'NativeBase.IconNB': {
+ color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined,
+ lineHeight:
+ Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight,
+ fontSize:
+ Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize
+ }
+ };
+
+ return radioTheme;
+};
diff --git a/src/native-base-theme/components/Right.js b/src/native-base-theme/components/Right.js
new file mode 100644
index 0000000..53b3308
--- /dev/null
+++ b/src/native-base-theme/components/Right.js
@@ -0,0 +1,14 @@
+// @flow
+
+export default () => {
+ const rightTheme = {
+ 'NativeBase.Button': {
+ alignSelf: null
+ },
+ flex: 1,
+ alignSelf: 'center',
+ alignItems: 'flex-end'
+ };
+
+ return rightTheme;
+};
diff --git a/src/native-base-theme/components/Segment.js b/src/native-base-theme/components/Segment.js
new file mode 100644
index 0000000..8ad669c
--- /dev/null
+++ b/src/native-base-theme/components/Segment.js
@@ -0,0 +1,57 @@
+// @flow
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+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,
+ paddingTop: 3,
+ paddingBottom: 3,
+ height: 30,
+ backgroundColor: 'transparent',
+ borderWidth: 1,
+ borderLeftWidth: 0,
+ borderColor: variables.segmentBorderColor,
+ elevation: 0,
+ '.active': {
+ backgroundColor: variables.segmentActiveBackgroundColor,
+ 'NativeBase.Text': {
+ color: variables.segmentActiveTextColor
+ },
+ 'NativeBase.Icon': {
+ color: variables.segmentActiveTextColor
+ }
+ },
+ '.first': {
+ borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
+ borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
+ borderLeftWidth: 1
+ },
+ '.last': {
+ borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined,
+ borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined
+ },
+ 'NativeBase.Text': {
+ color: variables.segmentTextColor,
+ fontSize: 14
+ },
+ 'NativeBase.Icon': {
+ fontSize: 22,
+ paddingTop: 0,
+ color: variables.segmentTextColor
+ }
+ }
+ };
+
+ return segmentTheme;
+};
diff --git a/src/native-base-theme/components/Separator.js b/src/native-base-theme/components/Separator.js
new file mode 100644
index 0000000..7fdf313
--- /dev/null
+++ b/src/native-base-theme/components/Separator.js
@@ -0,0 +1,49 @@
+// @flow
+
+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/src/native-base-theme/components/Spinner.js b/src/native-base-theme/components/Spinner.js
new file mode 100644
index 0000000..a453b3f
--- /dev/null
+++ b/src/native-base-theme/components/Spinner.js
@@ -0,0 +1,9 @@
+// @flow
+
+export default () => {
+ const spinnerTheme = {
+ height: 80
+ };
+
+ return spinnerTheme;
+};
diff --git a/src/native-base-theme/components/Subtitle.js b/src/native-base-theme/components/Subtitle.js
new file mode 100644
index 0000000..e1ca40d
--- /dev/null
+++ b/src/native-base-theme/components/Subtitle.js
@@ -0,0 +1,19 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+ const subtitleTheme = {
+ fontSize: variables.subTitleFontSize,
+ fontFamily: variables.titleFontfamily,
+ color: variables.subtitleColor,
+ textAlign: Platform.OS === PLATFORM.IOS ? 'center' : 'left',
+ paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
+ marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3
+ };
+
+ return subtitleTheme;
+};
diff --git a/src/native-base-theme/components/SwipeRow.js b/src/native-base-theme/components/SwipeRow.js
new file mode 100644
index 0000000..41d6083
--- /dev/null
+++ b/src/native-base-theme/components/SwipeRow.js
@@ -0,0 +1,46 @@
+// @flow
+
+export default () => {
+ const swipeRowTheme = {
+ 'NativeBase.ListItem': {
+ '.list': {
+ 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/src/native-base-theme/components/Switch.js b/src/native-base-theme/components/Switch.js
new file mode 100644
index 0000000..6b667bc
--- /dev/null
+++ b/src/native-base-theme/components/Switch.js
@@ -0,0 +1,9 @@
+// @flow
+
+export default () => {
+ const switchTheme = {
+ marginVertical: -5
+ };
+
+ return switchTheme;
+};
diff --git a/src/native-base-theme/components/Tab.js b/src/native-base-theme/components/Tab.js
new file mode 100644
index 0000000..b242306
--- /dev/null
+++ b/src/native-base-theme/components/Tab.js
@@ -0,0 +1,10 @@
+// @flow
+
+export default () => {
+ const tabTheme = {
+ flex: 1,
+ backgroundColor: '#FFF'
+ };
+
+ return tabTheme;
+};
diff --git a/src/native-base-theme/components/TabBar.js b/src/native-base-theme/components/TabBar.js
new file mode 100644
index 0000000..fa1490d
--- /dev/null
+++ b/src/native-base-theme/components/TabBar.js
@@ -0,0 +1,57 @@
+// @flow
+
+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/src/native-base-theme/components/TabContainer.js b/src/native-base-theme/components/TabContainer.js
new file mode 100644
index 0000000..fa91548
--- /dev/null
+++ b/src/native-base-theme/components/TabContainer.js
@@ -0,0 +1,26 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+ const platformStyle = variables.platformStyle;
+
+ const tabContainerTheme = {
+ elevation: 3,
+ height: 50,
+ flexDirection: 'row',
+ shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
+ shadowOffset:
+ platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
+ shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
+ shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
+ justifyContent: 'space-around',
+ borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0,
+ borderColor: variables.topTabBarBorderColor
+ };
+
+ return tabContainerTheme;
+};
diff --git a/src/native-base-theme/components/TabHeading.js b/src/native-base-theme/components/TabHeading.js
new file mode 100644
index 0000000..74cd6f4
--- /dev/null
+++ b/src/native-base-theme/components/TabHeading.js
@@ -0,0 +1,40 @@
+// @flow
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+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 === PLATFORM.ANDROID ? 0 : 1,
+ minWidth: platform === PLATFORM.ANDROID ? undefined : 60
+ },
+ 'NativeBase.Text': {
+ color: variables.topTabBarTextColor,
+ marginHorizontal: 7
+ },
+ 'NativeBase.Icon': {
+ color: variables.topTabBarTextColor,
+ fontSize: platform === PLATFORM.IOS ? 26 : undefined
+ },
+ '.active': {
+ 'NativeBase.Text': {
+ color: variables.topTabBarActiveTextColor,
+ fontWeight: '600'
+ },
+ 'NativeBase.Icon': {
+ color: variables.topTabBarActiveTextColor
+ }
+ }
+ };
+
+ return tabHeadingTheme;
+};
diff --git a/src/native-base-theme/components/Text.js b/src/native-base-theme/components/Text.js
new file mode 100644
index 0000000..8c3fa24
--- /dev/null
+++ b/src/native-base-theme/components/Text.js
@@ -0,0 +1,17 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+ const textTheme = {
+ fontSize: variables.DefaultFontSize,
+ fontFamily: variables.fontFamily,
+ color: variables.textColor,
+ '.note': {
+ color: '#a7a7a7',
+ fontSize: variables.noteFontSize
+ }
+ };
+
+ return textTheme;
+};
diff --git a/src/native-base-theme/components/Textarea.js b/src/native-base-theme/components/Textarea.js
new file mode 100644
index 0000000..a46d93b
--- /dev/null
+++ b/src/native-base-theme/components/Textarea.js
@@ -0,0 +1,25 @@
+// @flow
+
+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/src/native-base-theme/components/Thumbnail.js b/src/native-base-theme/components/Thumbnail.js
new file mode 100644
index 0000000..c6c9f68
--- /dev/null
+++ b/src/native-base-theme/components/Thumbnail.js
@@ -0,0 +1,40 @@
+// @flow
+
+export default () => {
+ 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/src/native-base-theme/components/Title.js b/src/native-base-theme/components/Title.js
new file mode 100644
index 0000000..ac4f2bb
--- /dev/null
+++ b/src/native-base-theme/components/Title.js
@@ -0,0 +1,21 @@
+// @flow
+
+import { Platform } from 'react-native';
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+export default (variables /* : * */ = variable) => {
+ const titleTheme = {
+ fontSize: variables.titleFontSize,
+ fontFamily: variables.titleFontfamily,
+ color: variables.titleFontColor,
+ fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined,
+ textAlign: Platform.OS === PLATFORM.IOS ? 'center' : 'left',
+ paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
+ marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3,
+ paddingTop: 1
+ };
+
+ return titleTheme;
+};
diff --git a/src/native-base-theme/components/Toast.js b/src/native-base-theme/components/Toast.js
new file mode 100644
index 0000000..f01db74
--- /dev/null
+++ b/src/native-base-theme/components/Toast.js
@@ -0,0 +1,41 @@
+// @flow
+
+import variable from './../variables/platform';
+import { PLATFORM } from './../variables/commonColor';
+
+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 === 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/src/native-base-theme/components/View.js b/src/native-base-theme/components/View.js
new file mode 100644
index 0000000..827581e
--- /dev/null
+++ b/src/native-base-theme/components/View.js
@@ -0,0 +1,13 @@
+// @flow
+
+import variable from './../variables/platform';
+
+export default (variables /* : * */ = variable) => {
+ const viewTheme = {
+ '.padder': {
+ padding: variables.contentPadding
+ }
+ };
+
+ return viewTheme;
+};
diff --git a/src/native-base-theme/components/index.js b/src/native-base-theme/components/index.js
new file mode 100644
index 0000000..8b6be3e
--- /dev/null
+++ b/src/native-base-theme/components/index.js
@@ -0,0 +1,249 @@
+/* eslint-disable no-param-reassign */
+// @flow
+
+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 pickerTheme from './Picker';
+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(variables)
+ },
+
+ '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': {
+ ...pickerTheme(variables),
+ '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) => {
+ 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' &&
+ styleName !== 'fontVariant' &&
+ styleName !== 'transform'
+ ) {
+ cssifyTheme(parent, style, styleName);
+ }
+ });
+ };
+
+ cssifyTheme(null, theme, null);
+
+ return theme;
+};
diff --git a/src/native-base-theme/variables/commonColor.js b/src/native-base-theme/variables/commonColor.js
new file mode 100644
index 0000000..7fc89ad
--- /dev/null
+++ b/src/native-base-theme/variables/commonColor.js
@@ -0,0 +1,311 @@
+// @flow
+
+import color from 'color';
+import { Platform, Dimensions, PixelRatio } from 'react-native';
+
+export const PLATFORM = {
+ ANDROID: 'android',
+ IOS: 'ios',
+ MATERIAL: 'material',
+ WEB: 'web'
+};
+
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
+const platform = Platform.OS;
+const platformStyle = undefined;
+const isIphoneX =
+ platform === PLATFORM.IOS &&
+ (deviceHeight === 812 ||
+ deviceWidth === 812 ||
+ deviceHeight === 896 ||
+ deviceWidth === 896);
+
+export default {
+ platformStyle,
+ platform,
+
+ // Accordion
+ headerStyle: '#edebed',
+ iconStyle: '#000',
+ contentStyle: '#f5f4f5',
+ expandedIconStyle: '#000',
+ accordionBorderColor: '#d3d3d3',
+
+ // ActionSheet
+ elevation: 4,
+ containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
+ innerTouchableBackgroundColor: '#fff',
+ listItemHeight: 50,
+ listItemBorderColor: 'transparent',
+ marginHorizontal: -15,
+ marginLeft: 14,
+ marginTop: 15,
+ minHeight: 56,
+ padding: 15,
+ touchableTextColor: '#757575',
+
+ // Android
+ androidRipple: true,
+ androidRippleColor: 'rgba(256, 256, 256, 0.3)',
+ androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
+ buttonUppercaseAndroidText: true,
+
+ // Badge
+ badgeBg: '#ED1727',
+ badgeColor: '#fff',
+ badgePadding: platform === PLATFORM.IOS ? 3 : 0,
+
+ // Button
+ buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+ buttonDisabledBg: '#b5b5b5',
+ buttonPadding: 6,
+ get buttonPrimaryBg() {
+ return this.brandPrimary;
+ },
+ get buttonPrimaryColor() {
+ return this.inverseTextColor;
+ },
+ get buttonInfoBg() {
+ return this.brandInfo;
+ },
+ get buttonInfoColor() {
+ return this.inverseTextColor;
+ },
+ get buttonSuccessBg() {
+ return this.brandSuccess;
+ },
+ get buttonSuccessColor() {
+ return this.inverseTextColor;
+ },
+ get buttonDangerBg() {
+ return this.brandDanger;
+ },
+ get buttonDangerColor() {
+ return this.inverseTextColor;
+ },
+ get buttonWarningBg() {
+ return this.brandWarning;
+ },
+ get buttonWarningColor() {
+ return this.inverseTextColor;
+ },
+ get buttonTextSize() {
+ return platform === PLATFORM.IOS
+ ? this.fontSizeBase * 1.1
+ : this.fontSizeBase - 1;
+ },
+ get buttonTextSizeLarge() {
+ return this.fontSizeBase * 1.5;
+ },
+ get buttonTextSizeSmall() {
+ return this.fontSizeBase * 0.8;
+ },
+ get borderRadiusLarge() {
+ return this.fontSizeBase * 3.8;
+ },
+ get iconSizeLarge() {
+ return this.iconFontSize * 1.5;
+ },
+ get iconSizeSmall() {
+ return this.iconFontSize * 0.6;
+ },
+
+ // Card
+ cardDefaultBg: '#fff',
+ cardBorderColor: '#ccc',
+ cardBorderRadius: 2,
+ cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+
+ // CheckBox
+ CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
+ CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
+ CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
+ CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
+ CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
+ CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
+ CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
+ checkboxBgColor: '#039BE5',
+ checkboxSize: 20,
+ checkboxTickColor: '#fff',
+
+ // Color
+ brandPrimary: platform === PLATFORM.IOS ? '#fb1763' : '#fb1763',
+ brandInfo: '#62B1F6',
+ brandSuccess: '#5cb85c',
+ brandDanger: '#d9534f',
+ brandWarning: '#f0ad4e',
+ brandDark: '#000',
+ brandLight: '#a9a9a9',
+
+ // Container
+ containerBgColor: '#fff',
+
+ // Date Picker
+ datePickerTextColor: '#000',
+ datePickerBg: 'transparent',
+
+ // FAB
+ fabWidth: 56,
+
+ // Font
+ DefaultFontSize: 16,
+ fontFamily: platform === 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 === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+ footerPaddingBottom: 0,
+
+ // FooterTab
+ tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea',
+ tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
+ activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ sTabBarActiveTextColor: '#007aff',
+ tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff',
+ tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
+
+ // Header
+ toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+ toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
+ toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
+ toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
+ searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
+ searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
+ toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ iosStatusbar: 'dark-content',
+ toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
+ get statusBarColor() {
+ return color(this.toolbarDefaultBg)
+ .darken(0.2)
+ .hex();
+ },
+ get darkenHeader() {
+ return color(this.tabBgColor)
+ .darken(0.03)
+ .hex();
+ },
+
+ // Icon
+ iconFamily: 'Ionicons',
+ iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
+ iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
+
+ // InputGroup
+ inputFontSize: 17,
+ inputBorderColor: '#D9D5DC',
+ inputSuccessBorderColor: '#2b8339',
+ inputErrorBorderColor: '#ed2f2f',
+ inputHeightBase: 50,
+ get inputColor() {
+ return this.textColor;
+ },
+ get inputColorPlaceholder() {
+ return '#575757';
+ },
+
+ // Line Height
+ buttonLineHeight: 19,
+ lineHeightH1: 32,
+ lineHeightH2: 27,
+ lineHeightH3: 25,
+ lineHeight: platform === PLATFORM.IOS ? 20 : 24,
+
+ // List
+ listBg: 'transparent',
+ listBorderColor: '#c9c9c9',
+ listDividerBg: '#f4f4f4',
+ listBtnUnderlayColor: '#DDD',
+ listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+ listNoteColor: '#808080',
+ listNoteSize: 13,
+ listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
+
+ // Progress Bar
+ defaultProgressColor: '#E4202D',
+ inverseProgressColor: '#1A191B',
+
+ // Radio Button
+ radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
+ radioSelectedColorAndroid: '#3F51B5',
+ radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
+ get radioColor() {
+ return this.brandPrimary;
+ },
+
+ // Segment
+ segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+ segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
+ segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
+
+ // Spinner
+ defaultSpinnerColor: '#45D56E',
+ inverseSpinnerColor: '#1A191B',
+
+ // Tab
+ tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+ topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
+ topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
+ topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+
+ // Tabs
+ tabBgColor: '#F8F8F8',
+ tabFontSize: 15,
+
+ // Text
+ textColor: '#000',
+ inverseTextColor: '#fff',
+ noteFontSize: 14,
+ get defaultTextColor() {
+ return this.textColor;
+ },
+
+ // Title
+ titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+ titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
+ subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
+ subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff',
+ titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff',
+
+ // Other
+ borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
+ borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+ contentPadding: 10,
+ dropdownLinkColor: '#414142',
+ inputLineHeight: 24,
+ deviceWidth,
+ deviceHeight,
+ isIphoneX,
+ inputGroupRoundedBorderRadius: 30,
+
+ // iPhoneX SafeArea
+ Inset: {
+ portrait: {
+ topInset: 24,
+ leftInset: 0,
+ rightInset: 0,
+ bottomInset: 34
+ },
+ landscape: {
+ topInset: 0,
+ leftInset: 44,
+ rightInset: 44,
+ bottomInset: 21
+ }
+ }
+};
diff --git a/src/native-base-theme/variables/material.js b/src/native-base-theme/variables/material.js
new file mode 100644
index 0000000..08273c4
--- /dev/null
+++ b/src/native-base-theme/variables/material.js
@@ -0,0 +1,304 @@
+// @flow
+
+import color from 'color';
+import { Platform, Dimensions, PixelRatio } from 'react-native';
+
+import { PLATFORM } from './commonColor';
+
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
+const platform = Platform.OS;
+const platformStyle = PLATFORM.MATERIAL;
+const isIphoneX =
+ platform === PLATFORM.IOS &&
+ (deviceHeight === 812 ||
+ deviceWidth === 812 ||
+ deviceHeight === 896 ||
+ deviceWidth === 896);
+
+export default {
+ platformStyle,
+ platform,
+
+ // Accordion
+ headerStyle: '#edebed',
+ iconStyle: '#000',
+ contentStyle: '#f5f4f5',
+ expandedIconStyle: '#000',
+ accordionBorderColor: '#d3d3d3',
+
+ // ActionSheet
+ elevation: 4,
+ containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
+ innerTouchableBackgroundColor: '#fff',
+ listItemHeight: 50,
+ listItemBorderColor: 'transparent',
+ marginHorizontal: -15,
+ marginLeft: 14,
+ marginTop: 15,
+ minHeight: 56,
+ padding: 15,
+ touchableTextColor: '#757575',
+
+ // Android
+ androidRipple: true,
+ androidRippleColor: 'rgba(256, 256, 256, 0.3)',
+ androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
+ buttonUppercaseAndroidText: true,
+
+ // Badge
+ badgeBg: '#ED1727',
+ badgeColor: '#fff',
+ badgePadding: 0,
+
+ // Button
+ buttonFontFamily: 'Roboto',
+ buttonDisabledBg: '#b5b5b5',
+ buttonPadding: 6,
+ get buttonPrimaryBg() {
+ return this.brandPrimary;
+ },
+ get buttonPrimaryColor() {
+ return this.inverseTextColor;
+ },
+ get buttonInfoBg() {
+ return this.brandInfo;
+ },
+ get buttonInfoColor() {
+ return this.inverseTextColor;
+ },
+ get buttonSuccessBg() {
+ return this.brandSuccess;
+ },
+ get buttonSuccessColor() {
+ return this.inverseTextColor;
+ },
+ get buttonDangerBg() {
+ return this.brandDanger;
+ },
+ get buttonDangerColor() {
+ return this.inverseTextColor;
+ },
+ get buttonWarningBg() {
+ return this.brandWarning;
+ },
+ get buttonWarningColor() {
+ return this.inverseTextColor;
+ },
+ get buttonTextSize() {
+ return this.fontSizeBase - 1;
+ },
+ get buttonTextSizeLarge() {
+ return this.fontSizeBase * 1.5;
+ },
+ get buttonTextSizeSmall() {
+ return this.fontSizeBase * 0.8;
+ },
+ get borderRadiusLarge() {
+ return this.fontSizeBase * 3.8;
+ },
+ get iconSizeLarge() {
+ return this.iconFontSize * 1.5;
+ },
+ get iconSizeSmall() {
+ return this.iconFontSize * 0.6;
+ },
+
+ // Card
+ cardDefaultBg: '#fff',
+ cardBorderColor: '#ccc',
+ cardBorderRadius: 2,
+ cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+
+ // CheckBox
+ CheckboxRadius: 0,
+ CheckboxBorderWidth: 2,
+ CheckboxPaddingLeft: 2,
+ CheckboxPaddingBottom: 5,
+ CheckboxIconSize: 16,
+ CheckboxIconMarginTop: 1,
+ CheckboxFontSize: 17,
+ checkboxBgColor: '#039BE5',
+ checkboxSize: 20,
+ checkboxTickColor: '#fff',
+
+ // Color
+ brandPrimary: '#fb1763',
+ brandInfo: '#62B1F6',
+ brandSuccess: '#5cb85c',
+ brandDanger: '#d9534f',
+ brandWarning: '#f0ad4e',
+ brandDark: '#000',
+ brandLight: '#a9a9a9',
+
+ // Container
+ containerBgColor: '#fff',
+
+ // Date Picker
+ datePickerTextColor: '#000',
+ datePickerBg: 'transparent',
+
+ // FAB
+ fabWidth: 56,
+
+ // Font
+ DefaultFontSize: 16,
+ 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',
+ footerPaddingBottom: 0,
+
+ // FooterTab
+ tabBarTextColor: '#bfc6ea',
+ tabBarTextSize: 11,
+ activeTab: '#fff',
+ sTabBarActiveTextColor: '#007aff',
+ tabBarActiveTextColor: '#fff',
+ tabActiveBgColor: '#3F51B5',
+
+ // Header
+ toolbarBtnColor: '#fff',
+ toolbarDefaultBg: '#3F51B5',
+ toolbarHeight: 56,
+ toolbarSearchIconSize: 23,
+ toolbarInputColor: '#fff',
+ searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
+ searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50,
+ toolbarBtnTextColor: '#fff',
+ toolbarDefaultBorder: '#3F51B5',
+ iosStatusbar: 'light-content',
+ get statusBarColor() {
+ return color(this.toolbarDefaultBg)
+ .darken(0.2)
+ .hex();
+ },
+ get darkenHeader() {
+ return color(this.tabBgColor)
+ .darken(0.03)
+ .hex();
+ },
+
+ // Icon
+ iconFamily: 'Ionicons',
+ iconFontSize: 28,
+ iconHeaderSize: 24,
+
+ // InputGroup
+ inputFontSize: 17,
+ inputBorderColor: '#D9D5DC',
+ inputSuccessBorderColor: '#2b8339',
+ inputErrorBorderColor: '#ed2f2f',
+ inputHeightBase: 50,
+ get inputColor() {
+ return this.textColor;
+ },
+ get inputColorPlaceholder() {
+ return '#575757';
+ },
+
+ // Line Height
+ buttonLineHeight: 19,
+ lineHeightH1: 32,
+ lineHeightH2: 27,
+ lineHeightH3: 25,
+ lineHeight: 24,
+
+ // List
+ listBg: 'transparent',
+ listBorderColor: '#c9c9c9',
+ listDividerBg: '#f4f4f4',
+ listBtnUnderlayColor: '#DDD',
+ listItemPadding: 12,
+ listNoteColor: '#808080',
+ listNoteSize: 13,
+ listItemSelected: '#3F51B5',
+
+ // Progress Bar
+ defaultProgressColor: '#E4202D',
+ inverseProgressColor: '#1A191B',
+
+ // Radio Button
+ radioBtnSize: 23,
+ radioSelectedColorAndroid: '#3F51B5',
+ radioBtnLineHeight: 24,
+ get radioColor() {
+ return this.brandPrimary;
+ },
+
+ // Segment
+ segmentBackgroundColor: '#3F51B5',
+ segmentActiveBackgroundColor: '#fff',
+ segmentTextColor: '#fff',
+ segmentActiveTextColor: '#3F51B5',
+ segmentBorderColor: '#fff',
+ segmentBorderColorMain: '#3F51B5',
+
+ // Spinner
+ defaultSpinnerColor: '#45D56E',
+ inverseSpinnerColor: '#1A191B',
+
+ // Tab
+ tabDefaultBg: '#3F51B5',
+ topTabBarTextColor: '#b3c7f9',
+ topTabBarActiveTextColor: '#fff',
+ topTabBarBorderColor: '#fff',
+ topTabBarActiveBorderColor: '#fff',
+
+ // Tabs
+ tabBgColor: '#F8F8F8',
+ tabFontSize: 15,
+
+ // Text
+ textColor: '#000',
+ inverseTextColor: '#fff',
+ noteFontSize: 14,
+ get defaultTextColor() {
+ return this.textColor;
+ },
+
+ // Title
+ titleFontfamily: 'Roboto',
+ titleFontSize: 19,
+ subTitleFontSize: 14,
+ subtitleColor: '#FFF',
+ titleFontColor: '#FFF',
+
+ // Other
+ borderRadiusBase: 2,
+ borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+ contentPadding: 10,
+ dropdownLinkColor: '#414142',
+ inputLineHeight: 24,
+ deviceWidth,
+ deviceHeight,
+ isIphoneX,
+ inputGroupRoundedBorderRadius: 30,
+
+ // iPhoneX SafeArea
+ Inset: {
+ portrait: {
+ topInset: 24,
+ leftInset: 0,
+ rightInset: 0,
+ bottomInset: 34
+ },
+ landscape: {
+ topInset: 0,
+ leftInset: 44,
+ rightInset: 44,
+ bottomInset: 21
+ }
+ }
+};
diff --git a/src/native-base-theme/variables/platform.js b/src/native-base-theme/variables/platform.js
new file mode 100644
index 0000000..825161c
--- /dev/null
+++ b/src/native-base-theme/variables/platform.js
@@ -0,0 +1,334 @@
+// @flow
+
+import color from 'color';
+import { Platform, Dimensions, PixelRatio } from 'react-native';
+
+import { PLATFORM } from './commonColor';
+
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
+const platform = Platform.OS;
+const platformStyle = undefined;
+const isIphoneX =
+ platform === PLATFORM.IOS &&
+ (deviceHeight === 812 ||
+ deviceWidth === 812 ||
+ deviceHeight === 896 ||
+ deviceWidth === 896);
+
+export default {
+ platformStyle,
+ platform,
+
+ // Accordion
+ accordionBorderColor: '#d3d3d3',
+ accordionContentPadding: 10,
+ accordionIconFontSize: 18,
+ contentStyle: '#f5f4f5',
+ expandedIconStyle: '#000',
+ headerStyle: '#edebed',
+ iconStyle: '#000',
+
+ // ActionSheet
+ elevation: 4,
+ containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
+ innerTouchableBackgroundColor: '#fff',
+ listItemHeight: 50,
+ listItemBorderColor: 'transparent',
+ marginHorizontal: -15,
+ marginLeft: 14,
+ marginTop: 15,
+ minHeight: 56,
+ padding: 15,
+ touchableTextColor: '#757575',
+
+ // Android
+ androidRipple: true,
+ androidRippleColor: 'rgba(256, 256, 256, 0.3)',
+ androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
+ buttonUppercaseAndroidText: true,
+
+ // Badge
+ badgeBg: '#ED1727',
+ badgeColor: '#fff',
+ badgePadding: platform === PLATFORM.IOS ? 3 : 0,
+
+ // Button
+ buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+ buttonDisabledBg: '#b5b5b5',
+ buttonPadding: 6,
+ buttonDefaultActiveOpacity: 0.5,
+ buttonDefaultFlex: 1,
+ buttonDefaultBorderRadius: 2,
+ buttonDefaultBorderWidth: 1,
+ get buttonPrimaryBg() {
+ return this.brandPrimary;
+ },
+ get buttonPrimaryColor() {
+ return this.inverseTextColor;
+ },
+ get buttonInfoBg() {
+ return this.brandInfo;
+ },
+ get buttonInfoColor() {
+ return this.inverseTextColor;
+ },
+ get buttonSuccessBg() {
+ return this.brandSuccess;
+ },
+ get buttonSuccessColor() {
+ return this.inverseTextColor;
+ },
+ get buttonDangerBg() {
+ return this.brandDanger;
+ },
+ get buttonDangerColor() {
+ return this.inverseTextColor;
+ },
+ get buttonWarningBg() {
+ return this.brandWarning;
+ },
+ get buttonWarningColor() {
+ return this.inverseTextColor;
+ },
+ get buttonTextSize() {
+ return platform === PLATFORM.IOS
+ ? this.fontSizeBase * 1.1
+ : this.fontSizeBase - 1;
+ },
+ get buttonTextSizeLarge() {
+ return this.fontSizeBase * 1.5;
+ },
+ get buttonTextSizeSmall() {
+ return this.fontSizeBase * 0.8;
+ },
+ get borderRadiusLarge() {
+ return this.fontSizeBase * 3.8;
+ },
+ get iconSizeLarge() {
+ return this.iconFontSize * 1.5;
+ },
+ get iconSizeSmall() {
+ return this.iconFontSize * 0.6;
+ },
+
+ // Card
+ cardDefaultBg: '#fff',
+ cardBorderColor: '#ccc',
+ cardBorderRadius: 2,
+ cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+
+ // CheckBox
+ CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
+ CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
+ CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
+ CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
+ CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
+ CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
+ CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
+ checkboxBgColor: '#039BE5',
+ checkboxSize: 20,
+ checkboxTickColor: '#fff',
+ checkboxDefaultColor: 'transparent',
+ checkboxTextShadowRadius: 0,
+
+ // Color
+ brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
+ brandInfo: '#62B1F6',
+ brandSuccess: '#5cb85c',
+ brandDanger: '#d9534f',
+ brandWarning: '#f0ad4e',
+ brandDark: '#000',
+ brandLight: '#a9a9a9',
+
+ // Container
+ containerBgColor: '#fff',
+
+ // Date Picker
+ datePickerFlex: 1,
+ datePickerPadding: 10,
+ datePickerTextColor: '#000',
+ datePickerBg: 'transparent',
+
+ // FAB
+ fabBackgroundColor: 'blue',
+ fabBorderRadius: 28,
+ fabBottom: 0,
+ fabButtonBorderRadius: 20,
+ fabButtonHeight: 40,
+ fabButtonLeft: 7,
+ fabButtonMarginBottom: 10,
+ fabContainerBottom: 20,
+ fabDefaultPosition: 20,
+ fabElevation: 4,
+ fabIconColor: '#fff',
+ fabIconSize: 24,
+ fabShadowColor: '#000',
+ fabShadowOffsetHeight: 2,
+ fabShadowOffsetWidth: 0,
+ fabShadowOpacity: 0.4,
+ fabShadowRadius: 2,
+ fabWidth: 56,
+
+ // Font
+ DefaultFontSize: 16,
+ fontFamily: platform === 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 === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+ footerPaddingBottom: 0,
+
+ // FooterTab
+ tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
+ tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
+ activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ sTabBarActiveTextColor: '#007aff',
+ tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
+
+ // Header
+ toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+ toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
+ toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
+ toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
+ searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
+ searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
+ toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
+ iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
+ get statusBarColor() {
+ return color(this.toolbarDefaultBg)
+ .darken(0.2)
+ .hex();
+ },
+ get darkenHeader() {
+ return color(this.tabBgColor)
+ .darken(0.03)
+ .hex();
+ },
+
+ // Icon
+ iconFamily: 'Ionicons',
+ iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
+ iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
+
+ // InputGroup
+ inputFontSize: 17,
+ inputBorderColor: '#D9D5DC',
+ inputSuccessBorderColor: '#2b8339',
+ inputErrorBorderColor: '#ed2f2f',
+ inputHeightBase: 50,
+ get inputColor() {
+ return this.textColor;
+ },
+ get inputColorPlaceholder() {
+ return '#575757';
+ },
+
+ // Line Height
+ buttonLineHeight: 19,
+ lineHeightH1: 32,
+ lineHeightH2: 27,
+ lineHeightH3: 25,
+ lineHeight: platform === PLATFORM.IOS ? 20 : 24,
+ listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
+
+ // List
+ listBg: 'transparent',
+ listBorderColor: '#c9c9c9',
+ listDividerBg: '#f4f4f4',
+ listBtnUnderlayColor: '#DDD',
+ listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
+ listNoteColor: '#808080',
+ listNoteSize: 13,
+
+ // Progress Bar
+ defaultProgressColor: '#E4202D',
+ inverseProgressColor: '#1A191B',
+
+ // Radio Button
+ radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
+ radioSelectedColorAndroid: '#3F51B5',
+ radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
+ get radioColor() {
+ return this.brandPrimary;
+ },
+
+ // Segment
+ segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+ segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
+ segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
+
+ // Spinner
+ defaultSpinnerColor: '#45D56E',
+ inverseSpinnerColor: '#1A191B',
+
+ // Tab
+ tabBarDisabledTextColor: '#BDBDBD',
+ tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
+ topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
+ topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+ topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
+ topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
+
+ // Tabs
+ tabBgColor: '#F8F8F8',
+ tabFontSize: 15,
+
+ // Text
+ textColor: '#000',
+ inverseTextColor: '#fff',
+ noteFontSize: 14,
+ get defaultTextColor() {
+ return this.textColor;
+ },
+
+ // Title
+ titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
+ titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
+ subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
+ subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
+ titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
+
+ // Other
+ borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
+ borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
+ contentPadding: 10,
+ dropdownLinkColor: '#414142',
+ inputLineHeight: 24,
+ deviceWidth,
+ deviceHeight,
+ isIphoneX,
+ inputGroupRoundedBorderRadius: 30,
+
+ // iPhoneX SafeArea
+ Inset: {
+ portrait: {
+ topInset: 24,
+ leftInset: 0,
+ rightInset: 0,
+ bottomInset: 34
+ },
+ landscape: {
+ topInset: 0,
+ leftInset: 44,
+ rightInset: 44,
+ bottomInset: 21
+ }
+ }
+};
diff --git a/src/screens/CounterScreen.tsx b/src/screens/CounterScreen.tsx
index 51e8348..a189d1b 100644
--- a/src/screens/CounterScreen.tsx
+++ b/src/screens/CounterScreen.tsx
@@ -1,6 +1,23 @@
-import React, { useState } from "react";
-import { Text } from "react-native";
+import React, { useState, FunctionComponent } from "react";
import styled from "styled-components/native";
+import { StyleProvider, Badge, Button, Text } from "native-base";
+import { Row, Grid } from "react-native-easy-grid";
+
+// @ts-ignore
+import getTheme from "../native-base-theme/components";
+// @ts-ignore
+import material from "../native-base-theme/variables/material";
+
+const CounterButton: FunctionComponent<{ onPress: () => void }> = ({
+ onPress,
+ children,
+}) => (
+
+
+
+);
const CounterScreen = () => {
const [count, setCount] = useState(0);
@@ -8,31 +25,41 @@ const CounterScreen = () => {
const increment = () => setCount((prev: number) => prev + 1);
return (
-
- Clicked {count} times
-
-
+
+
+
+
+ {`Clicked `}
+
+
+ {count}
+
+
+ {` times`}
+
+
+
+
+ Increment
+
+
+
+
);
};
-const Container = styled.View`
- flex: 1;
+/**
+ * This Wrapper around `Button` and `Badge` is necessary to align it horizontally
+ */
+const CenteredHorizontally = styled.View`
align-items: center;
- justify-content: center;
`;
-const Button = styled.TouchableOpacity`
- background-color: #74e685;
- border-radius: 10px;
- padding: 10px;
- margin: 10px;
-`;
-
-const ClickedText = styled.Text`
- font-size: 20px;
- margin-bottom: 20px;
+const Wrapper = styled.View<{ row?: boolean }>`
+ flex: 1;
+ flex-direction: ${(props) => (props.row ? "row" : "column")};
+ align-items: center;
+ justify-content: center;
`;
export default CounterScreen;
diff --git a/tsconfig.json b/tsconfig.json
index 3c78a19..cc5ea35 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,5 +8,9 @@
"skipLibCheck": true,
"resolveJsonModule": true,
"strict": true
- }
+ },
+ "exclude": [
+ "node_modules",
+ "native-base-theme"
+ ]
}
diff --git a/yarn.lock b/yarn.lock
index 823bed1..a5b005e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1009,6 +1009,13 @@
exec-sh "^0.3.2"
minimist "^1.2.0"
+"@codler/react-native-keyboard-aware-scroll-view@1.0.0":
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/@codler/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-1.0.0.tgz#7ca45d9a06aa118e7acfbddc33dd5e2fb9c9bb4b"
+ integrity sha512-syLIolsZEe9quJ9RUF+PaswA+TLXCHkbIJVe54E4fuVu3mrL+9B1fjcX0Grq0hbu/s5EE+mVPIXvFY/3cADpqg==
+ dependencies:
+ react-native-iphone-x-helper "^1.0.3"
+
"@egjs/hammerjs@^2.0.17":
version "2.0.17"
resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
@@ -1844,6 +1851,11 @@ ansi-red@^0.1.1:
dependencies:
ansi-wrap "0.1.0"
+ansi-regex@^2.0.0:
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+ integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
+
ansi-regex@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
@@ -1859,6 +1871,11 @@ ansi-regex@^5.0.0:
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+ansi-styles@^2.1.0:
+ version "2.2.1"
+ resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+ integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
+
ansi-styles@^3.2.0, ansi-styles@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -2245,7 +2262,7 @@ bindings@^1.5.0:
dependencies:
file-uri-to-path "1.0.0"
-blueimp-md5@^2.10.0:
+blueimp-md5@^2.10.0, blueimp-md5@^2.5.0:
version "2.17.0"
resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.17.0.tgz#f4fcac088b115f7b4045f19f5da59e9d01b1bb96"
integrity sha512-x5PKJHY5rHQYaADj6NwPUR2QRCUVSggPzrUKkeENpj871o9l9IefJbO2jkT5UvYykeOK9dx0VmkIo6dZ+vThYw==
@@ -2423,6 +2440,17 @@ caseless@~0.12.0:
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
+chalk@1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.1.tgz#509afb67066e7499f7eb3535c77445772ae2d019"
+ integrity sha1-UJr7ZwZudJn36zU1x3RFdyri0Bk=
+ dependencies:
+ ansi-styles "^2.1.0"
+ escape-string-regexp "^1.0.2"
+ has-ansi "^2.0.0"
+ strip-ansi "^3.0.0"
+ supports-color "^2.0.0"
+
chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -2450,6 +2478,11 @@ ci-info@^2.0.0:
resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+clamp@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+ integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
+
class-utils@^0.3.5:
version "0.3.6"
resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -2555,7 +2588,7 @@ color-support@^1.1.3:
resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
-color@^3.1.2:
+color@^3.1.2, color@~3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
@@ -3093,7 +3126,7 @@ escape-html@~1.0.3:
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
-escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -3115,6 +3148,13 @@ escodegen@^1.11.1:
optionalDependencies:
source-map "~0.6.1"
+eslint-config-prettier@^6.0.0:
+ version "6.11.0"
+ resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz#f6d2238c1290d01c859a8b5c1f7d352a0b0da8b1"
+ integrity sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==
+ dependencies:
+ get-stdin "^6.0.0"
+
eslint-plugin-relay@1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-relay/-/eslint-plugin-relay-1.4.1.tgz#5af2ac13e24bd01ad17b6a4014204918d65021cd"
@@ -3659,6 +3699,14 @@ fs-extra@^1.0.0:
jsonfile "^2.1.0"
klaw "^1.0.0"
+fs-extra@^2.0.0:
+ version "2.1.2"
+ resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-2.1.2.tgz#046c70163cef9aad46b0e4a7fa467fb22d71de35"
+ integrity sha1-BGxwFjzvmq1GsOSn+kZ/si1x3jU=
+ dependencies:
+ graceful-fs "^4.1.2"
+ jsonfile "^2.1.0"
+
fs-extra@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -3716,6 +3764,11 @@ get-package-type@^0.1.0:
resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+get-stdin@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+ integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
+
get-stream@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@@ -3789,6 +3842,13 @@ har-validator@~5.1.3:
ajv "^6.12.3"
har-schema "^2.0.0"
+has-ansi@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+ integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
+ dependencies:
+ ansi-regex "^2.0.0"
+
has-flag@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -3847,6 +3907,11 @@ hermes-engine@0.0.0:
resolved "https://registry.yarnpkg.com/hermes-engine/-/hermes-engine-0.0.0.tgz#6a65954646b5e32c87aa998dee16152c0c904cd6"
integrity sha512-q5DP4aUe6LnfMaLsxFP1cCY5qA0Ca5Qm2JQ/OgKi3sTfPpXth79AQ7vViXh/RRML53EpokDewMLJmI31RioBAA==
+hoist-non-react-statics@^1.0.5:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+ integrity sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs=
+
hoist-non-react-statics@^2.3.1:
version "2.5.5"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
@@ -4596,6 +4661,11 @@ jest-pnp-resolver@^1.2.1:
resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+jest-react-native@^18.0.0:
+ version "18.0.0"
+ resolved "https://registry.yarnpkg.com/jest-react-native/-/jest-react-native-18.0.0.tgz#77dd909f069324599f227c58c61c2e62168726ba"
+ integrity sha1-d92QnwaTJFmfInxYxhwuYhaHJro=
+
jest-regex-util@^25.2.1, jest-regex-util@^25.2.6:
version "25.2.6"
resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.2.6.tgz#d847d38ba15d2118d3b06390056028d0f2fd3964"
@@ -5080,7 +5150,7 @@ lodash.throttle@^4.1.1:
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0:
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0:
version "4.17.20"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -5583,6 +5653,39 @@ nanomatch@^1.2.9:
snapdragon "^0.8.1"
to-regex "^3.0.1"
+native-base-shoutem-theme@0.3.1:
+ version "0.3.1"
+ resolved "https://registry.yarnpkg.com/native-base-shoutem-theme/-/native-base-shoutem-theme-0.3.1.tgz#f15cbd4ca74ca1c8b6a636d297b9164a5f2b3662"
+ integrity sha512-uwEGhg6gwDuJTHuhNXRKbHtNjni1UI9qfAsVchIqfK7mQAHSNPVU1QRs9Hw6O2K/qLZaP/aJmNoZGc2h2EGSwA==
+ dependencies:
+ hoist-non-react-statics "^1.0.5"
+ lodash "^4.17.14"
+ prop-types "^15.5.10"
+
+native-base@^2.13.14:
+ version "2.13.14"
+ resolved "https://registry.yarnpkg.com/native-base/-/native-base-2.13.14.tgz#57a71d871bb1df96122bf13af6298b8c22f48536"
+ integrity sha512-k9E1FX6kgLjp6Du7jOA/p6viKrmMrG1BelN4ui15hZBObBd+s0ExI5oh8U/Wa9U++hBHuKeHhzDF9OVqOo4t2w==
+ dependencies:
+ "@codler/react-native-keyboard-aware-scroll-view" "1.0.0"
+ blueimp-md5 "^2.5.0"
+ clamp "^1.0.1"
+ color "~3.1.2"
+ create-react-class "^15.6.3"
+ eslint-config-prettier "^6.0.0"
+ fs-extra "^2.0.0"
+ jest-react-native "^18.0.0"
+ lodash "^4.17.14"
+ native-base-shoutem-theme "0.3.1"
+ opencollective-postinstall "^2.0.2"
+ print-message "^2.1.0"
+ prop-types "^15.5.10"
+ react-native-drawer "2.5.1"
+ react-native-easy-grid "0.2.2"
+ react-native-vector-icons "^7.0.0"
+ react-tween-state "^0.1.5"
+ tween-functions "^1.0.1"
+
natural-compare@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -5813,6 +5916,11 @@ open@^6.2.0:
dependencies:
is-wsl "^1.1.0"
+opencollective-postinstall@^2.0.2:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
+ integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==
+
optionator@^0.8.1:
version "0.8.3"
resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -6106,6 +6214,13 @@ pretty-format@^25.1.0, pretty-format@^25.2.0, pretty-format@^25.5.0:
ansi-styles "^4.0.0"
react-is "^16.12.0"
+print-message@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/print-message/-/print-message-2.1.0.tgz#b5588ed08b0e1bf77ac7bcb5cb78004afaf9a891"
+ integrity sha1-tViO0IsOG/d6x7y1y3gASvr5qJE=
+ dependencies:
+ chalk "1.1.1"
+
process-nextick-args@~2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -6126,7 +6241,7 @@ prompts@^2.0.1, prompts@^2.2.1:
kleur "^3.0.3"
sisteransi "^1.0.4"
-prop-types@15.7.2, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6191,6 +6306,13 @@ querystringify@^2.1.1:
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+raf@^3.1.0:
+ version "3.4.1"
+ resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+ integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+ dependencies:
+ performance-now "^2.1.0"
+
range-parser@~1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
@@ -6228,6 +6350,21 @@ react-native-appearance@~0.3.3:
invariant "^2.2.4"
use-subscription "^1.0.0"
+react-native-drawer@2.5.1:
+ version "2.5.1"
+ resolved "https://registry.yarnpkg.com/react-native-drawer/-/react-native-drawer-2.5.1.tgz#08b9314184f48c724f1b467f8859797369798654"
+ integrity sha512-cxcQNbSWy5sbGi7anSVp6EDr6JarOBMY9lbFOeLFeVYbONiudoqRKbgEsSDgSw3/LFCLvUXK5zdjXCOedeytxQ==
+ dependencies:
+ prop-types "^15.5.8"
+ tween-functions "^1.0.1"
+
+react-native-easy-grid@0.2.2, react-native-easy-grid@^0.2.2:
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/react-native-easy-grid/-/react-native-easy-grid-0.2.2.tgz#f0be33620be1ebe2d2295918eb58b0a27e8272ab"
+ integrity sha512-MlYrNIldnEMKn6TVatQN1P64GoVlwGIuz+8ncdfJ0Wq/xtzUkQwlil8Uksyp7MhKfENE09MQnGNcba6Mx3oSAA==
+ dependencies:
+ lodash "^4.17.15"
+
react-native-gesture-handler@~1.6.0:
version "1.6.1"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.6.1.tgz#678e2dce250ed66e93af409759be22cd6375dd17"
@@ -6238,7 +6375,7 @@ react-native-gesture-handler@~1.6.0:
invariant "^2.2.4"
prop-types "^15.7.2"
-react-native-iphone-x-helper@^1.2.1:
+react-native-iphone-x-helper@^1.0.3, react-native-iphone-x-helper@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772"
integrity sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ==
@@ -6253,6 +6390,15 @@ react-native-screens@~2.9.0:
resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.9.0.tgz#ead2843107ba00fee259aa377582e457c74f1f3b"
integrity sha512-5MaiUD6HA3nzY3JbVI8l3V7pKedtxQF3d8qktTVI0WmWXTI4QzqOU8r8fPVvfKo3MhOXwhWBjr+kQ7DZaIQQeg==
+react-native-vector-icons@^7.0.0:
+ version "7.0.0"
+ resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-7.0.0.tgz#5b92ed363c867645daad48c559e1f99efcfbb813"
+ integrity sha512-Ku8+dTUAnR9pexRPQqsUcQEZlxEpFZsIy8iOFqVL/3mrUyncZJHtqJyx2cUOmltZIC6W2GI4IkD3EYzPerXV5g==
+ dependencies:
+ lodash "^4.17.15"
+ prop-types "^15.7.2"
+ yargs "^15.0.2"
+
react-native-web@~0.11.7:
version "0.11.7"
resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.7.tgz#d173d5a9b58db23b6d442c4bc4c81e9939adac23"
@@ -6324,6 +6470,14 @@ react-timer-mixin@^0.13.4:
resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
+react-tween-state@^0.1.5:
+ version "0.1.5"
+ resolved "https://registry.yarnpkg.com/react-tween-state/-/react-tween-state-0.1.5.tgz#e98b066551efb93cb92dd1be14995c2e3deae339"
+ integrity sha1-6YsGZVHvuTy5LdG+FJlcLj3q4zk=
+ dependencies:
+ raf "^3.1.0"
+ tween-functions "^1.0.1"
+
react@~16.11.0:
version "16.11.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
@@ -7090,6 +7244,13 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"
+strip-ansi@^3.0.0:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+ integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
+ dependencies:
+ ansi-regex "^2.0.0"
+
strip-ansi@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
@@ -7147,6 +7308,11 @@ sudo-prompt@^9.0.0:
resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd"
integrity sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==
+supports-color@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+ integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
+
supports-color@^5.3.0, supports-color@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -7329,6 +7495,11 @@ tunnel-agent@^0.6.0:
dependencies:
safe-buffer "^5.0.1"
+tween-functions@^1.0.1:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
+ integrity sha1-GuOlDnxguz3vd06scHrLynO7w/8=
+
tweetnacl@^0.14.3, tweetnacl@~0.14.0:
version "0.14.5"
resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -7908,7 +8079,7 @@ yargs@^14.2.0:
y18n "^4.0.0"
yargs-parser "^15.0.1"
-yargs@^15.1.0, yargs@^15.3.1:
+yargs@^15.0.2, yargs@^15.1.0, yargs@^15.3.1:
version "15.4.1"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==