zdam-egzamin-zawodowy
/
mobile-app
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add native-base theme

This commit is contained in:
Dawid Wysokiński 2021-04-04 14:31:01 +02:00
parent f9cecc1f8e
commit beb626d436
52 changed files with 3610 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -40,6 +40,7 @@
"@graphql-codegen/typescript": "^1.21.1",
"@graphql-codegen/typescript-operations": "^1.17.15",
"@react-native-community/eslint-config": "^2.0.0",
"@types/color": "^3.0.1",
"@types/jest": "^26.0.20",
"@types/lodash": "^4.14.168",
"@types/react-native": "^0.64.0",

36
src/libs/native-base/components/Badge.ts Normal file
View File

@ -0,0 +1,36 @@
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;
};

9
src/libs/native-base/components/Body.ts Normal file
View File

@ -0,0 +1,9 @@
export default () => {
const bodyTheme = {
flex: 1,
alignItems: 'center',
alignSelf: 'center',
};
return bodyTheme;
};

378
src/libs/native-base/components/Button.ts Normal file
View File

@ -0,0 +1,378 @@
import variable from '../variables/platform';
import { OS } from '../variables/types';
export default (variables /* : * */ = variable) => {
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 === OS.IOS ? 2 : undefined,
},
'NativeBase.IconNB': {
color: variables.inverseTextColor,
fontSize: 24,
marginHorizontal: 16,
paddingTop: platform === OS.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,
alignItems: 'center',
justifyContent: 'space-between',
alignSelf: 'flex-start',
};
return buttonTheme;
};

35
src/libs/native-base/components/Card.ts Normal file
View File

@ -0,0 +1,35 @@
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;
};

196
src/libs/native-base/components/CardItem.ts Normal file
View File

@ -0,0 +1,196 @@
import { StyleSheet } from 'react-native';
import variable from '../variables/platform';
import { OS } from '../variables/types';
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 === OS.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 === OS.IOS ? '600' : '500',
},
'.bordered': {
'NativeBase.Text': {
color: variables.brandPrimary,
fontWeight: platform === OS.IOS ? '600' : '500',
},
borderBottomWidth: variables.borderWidth,
},
borderBottomWidth: null,
paddingVertical: variables.cardItemPadding + 5,
},
'.footer': {
'NativeBase.Text': {
fontSize: 16,
fontWeight: platform === OS.IOS ? '600' : '500',
},
'.bordered': {
'NativeBase.Text': {
color: variables.brandPrimary,
fontWeight: platform === OS.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;
};

35
src/libs/native-base/components/CheckBox.ts Normal file
View File

@ -0,0 +1,35 @@
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,
},
overflow: 'hidden',
width: variables.checkboxSize,
height: variables.checkboxSize,
borderWidth: variables.CheckboxBorderWidth,
paddingLeft: variables.CheckboxPaddingLeft - 1,
paddingBottom: variables.CheckboxPaddingBottom,
left: 10,
};
return checkBoxTheme;
};

15
src/libs/native-base/components/Container.ts Normal file
View File

@ -0,0 +1,15 @@
import { Platform, Dimensions } from 'react-native';
import variable from '../variables/platform';
import { OS } from '../variables/types';
const deviceHeight = Dimensions.get('window').height;
export default (variables /* : * */ = variable) => {
const theme = {
flex: 1,
height: Platform.OS === OS.IOS ? deviceHeight : deviceHeight - 20,
backgroundColor: variables.containerBgColor,
};
return theme;
};

12
src/libs/native-base/components/Content.ts Normal file
View File

@ -0,0 +1,12 @@
export default () => {
const contentTheme = {
flex: 1,
backgroundColor: 'transparent',
'NativeBase.Segment': {
borderWidth: 0,
backgroundColor: 'transparent',
},
};
return contentTheme;
};

23
src/libs/native-base/components/Fab.ts Normal file
View File

@ -0,0 +1,23 @@
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;
};

110
src/libs/native-base/components/Footer.ts Normal file
View File

@ -0,0 +1,110 @@
import variable from '../variables/platform';
import { OS } from '../variables/types';
export default (variables /* : * */ = variable) => {
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 === OS.IOS ? variables.borderWidth : undefined,
borderColor: platform === OS.IOS ? '#cbcbcb' : undefined,
height: variables.footerHeight,
paddingBottom: variables.footerPaddingBottom,
elevation: 3,
left: 0,
right: 0,
};
return footerTheme;
};

77
src/libs/native-base/components/FooterTab.ts Normal file
View File

@ -0,0 +1,77 @@
import { Platform } from 'react-native';
import variable from '../variables/platform';
import { OS } from '../variables/types';
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 === OS.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 === OS.Android ? variables.footerDefaultBg : undefined,
flexDirection: 'row',
justifyContent: 'space-between',
flex: 1,
alignSelf: 'stretch',
};
return footerTabTheme;
};

84
src/libs/native-base/components/Form.ts Normal file
View File

@ -0,0 +1,84 @@
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;
};

11
src/libs/native-base/components/H1.ts Normal file
View File

@ -0,0 +1,11 @@
import variable from '../variables/platform';
export default (variables /* : * */ = variable) => {
const h1Theme = {
color: variables.textColor,
fontSize: variables.fontSizeH1,
lineHeight: variables.lineHeightH1,
};
return h1Theme;
};

11
src/libs/native-base/components/H2.ts Normal file
View File

@ -0,0 +1,11 @@
import variable from '../variables/platform';
export default (variables /* : * */ = variable) => {
const h2Theme = {
color: variables.textColor,
fontSize: variables.fontSizeH2,
lineHeight: variables.lineHeightH2,
};
return h2Theme;
};

11
src/libs/native-base/components/H3.ts Normal file
View File

@ -0,0 +1,11 @@
import variable from '../variables/platform';
export default (variables /* : * */ = variable) => {
const h3Theme = {
color: variables.textColor,
fontSize: variables.fontSizeH3,
lineHeight: variables.lineHeightH3,
};
return h3Theme;
};

374
src/libs/native-base/components/Header.ts Normal file
View File

@ -0,0 +1,374 @@
import { PixelRatio, StatusBar } from 'react-native';
import variable from '../variables/platform';
import { OS } from '../variables/types';
export default (variables /* : * */ = variable) => {
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 === OS.Android ? StatusBar.currentHeight : undefined,
height:
platform === OS.Android
? variables.toolbarHeight + (StatusBar.currentHeight ?? 0)
: 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 === OS.IOS ? undefined : 0,
flex: platform === OS.IOS ? 1 : 0,
},
'NativeBase.Body': {
'NativeBase.Title': {
paddingLeft: platform === OS.IOS ? undefined : 10,
},
'NativeBase.Subtitle': {
paddingLeft: platform === OS.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 === OS.IOS ? 10 : null,
},
paddingHorizontal: platform === OS.IOS ? undefined : null,
width: platform === OS.IOS ? undefined : 0,
height: platform === OS.IOS ? undefined : 0,
},
},
'.rounded': {
'NativeBase.Item': {
borderRadius: platform === OS.IOS ? 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 === OS.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 === OS.IOS ? -3 : 0,
'NativeBase.Icon': {
color: variables.toolbarBtnColor,
fontSize:
platform === OS.IOS
? variables.iconHeaderSize + 1
: variables.iconHeaderSize,
marginTop: 0,
marginRight: 2,
marginLeft: 1,
paddingTop: 1,
},
'NativeBase.IconNB': {
color: variables.toolbarBtnColor,
fontSize:
platform === OS.IOS
? variables.iconHeaderSize + 1
: variables.iconHeaderSize - 2,
marginTop: 0,
marginRight: 2,
marginLeft: 1,
paddingTop: 1,
},
'NativeBase.Text': {
color: variables.toolbarBtnTextColor,
fontSize: platform === OS.IOS ? 17 : 14,
top: platform === OS.IOS ? 1 : -1.5,
paddingLeft: platform === OS.IOS ? 2 : 5,
paddingRight: platform === OS.IOS ? 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 === OS.IOS ? 4 : 8,
},
flex: platform === OS.IOS ? 1 : 0.4,
alignSelf: 'center',
alignItems: 'flex-start',
},
'NativeBase.Body': {
flex: 1,
alignItems: platform === OS.IOS ? 'center' : 'flex-start',
alignSelf: 'center',
'NativeBase.Segment': {
borderWidth: 0,
alignSelf: 'flex-end',
marginRight: platform === OS.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 === OS.IOS ? 17 : 14,
lineHeight: 19.5,
},
'NativeBase.IconNB': {
color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize - 2,
marginTop: 2,
marginRight: 2,
marginLeft: 5,
},
},
'.transparent': {
marginRight: platform === OS.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 === OS.IOS ? 17 : 14,
top: platform === OS.IOS ? 1 : -1.5,
paddingRight: platform === OS.IOS ? 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 === OS.IOS ? 6 : 10,
paddingRight: 10,
justifyContent: 'center',
// paddingTop: platform === PLATFORM.IOS ? 18 : 0,
borderBottomWidth:
platform === OS.IOS ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0,
borderBottomColor: variables.toolbarDefaultBorder,
height: variables.toolbarHeight,
elevation: 3,
top: 0,
left: 0,
right: 0,
};
return headerTheme;
};

10
src/libs/native-base/components/Icon.ts Normal file
View File

@ -0,0 +1,10 @@
import variable from '../variables/platform';
export default (variables /* : * */ = variable) => {
const iconTheme = {
fontSize: variables.iconFontSize,
color: variables.textColor,
};
return iconTheme;
};

17
src/libs/native-base/components/Input.ts Normal file
View File

@ -0,0 +1,17 @@
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;
};

130
src/libs/native-base/components/InputGroup.ts Normal file
View File

@ -0,0 +1,130 @@
import variable from '../variables/platform';
export default (variables /* : * */ = variable) => {
const inputGroupTheme = {
'NativeBase.Icon': {
fontSize: 24,
color: variables.sTabBarActiveTextColor,
paddingHorizontal: 5,
},
'NativeBase.IconNB': {
fontSize: 24,
color: variables.sTabBarActiveTextColor,
paddingHorizontal: 5,
},
'NativeBase.Input': {
height: variables.inputHeightBase,
color: variables.inputColor,
paddingLeft: 5,
paddingRight: 5,
flex: 1,
fontSize: variables.inputFontSize,
lineHeight: variables.inputLineHeight,
},
'.underline': {
'.success': {
borderColor: variables.inputSuccessBorderColor,
},
'.error': {
borderColor: variables.inputErrorBorderColor,
},
paddingLeft: 5,
borderWidth: variables.borderWidth,
borderTopWidth: 0,
borderRightWidth: 0,
borderLeftWidth: 0,
borderColor: variables.inputBorderColor,
},
'.regular': {
'.success': {
borderColor: variables.inputSuccessBorderColor,
},
'.error': {
borderColor: variables.inputErrorBorderColor,
},
paddingLeft: 5,
borderWidth: variables.borderWidth,
borderColor: variables.inputBorderColor,
},
'.rounded': {
'.success': {
borderColor: variables.inputSuccessBorderColor,
},
'.error': {
borderColor: variables.inputErrorBorderColor,
},
paddingLeft: 5,
borderWidth: variables.borderWidth,
borderRadius: variables.inputGroupRoundedBorderRadius,
borderColor: variables.inputBorderColor,
},
'.success': {
'NativeBase.Icon': {
color: variables.inputSuccessBorderColor,
},
'NativeBase.IconNB': {
color: variables.inputSuccessBorderColor,
},
'.rounded': {
borderRadius: 30,
borderColor: variables.inputSuccessBorderColor,
},
'.regular': {
borderColor: variables.inputSuccessBorderColor,
},
'.underline': {
borderWidth: variables.borderWidth,
borderTopWidth: 0,
borderRightWidth: 0,
borderLeftWidth: 0,
borderColor: variables.inputSuccessBorderColor,
},
borderColor: variables.inputSuccessBorderColor,
},
'.error': {
'NativeBase.Icon': {
color: variables.inputErrorBorderColor,
},
'NativeBase.IconNB': {
color: variables.inputErrorBorderColor,
},
'.rounded': {
borderRadius: 30,
borderColor: variables.inputErrorBorderColor,
},
'.regular': {
borderColor: variables.inputErrorBorderColor,
},
'.underline': {
borderWidth: variables.borderWidth,
borderTopWidth: 0,
borderRightWidth: 0,
borderLeftWidth: 0,
borderColor: variables.inputErrorBorderColor,
},
borderColor: variables.inputErrorBorderColor,
},
'.disabled': {
'NativeBase.Icon': {
color: '#384850',
},
'NativeBase.IconNB': {
color: '#384850',
},
},
paddingLeft: 5,
borderWidth: variables.borderWidth,
borderTopWidth: 0,
borderRightWidth: 0,
borderLeftWidth: 0,
borderColor: variables.inputBorderColor,
backgroundColor: 'transparent',
flexDirection: 'row',
alignItems: 'center',
};
return inputGroupTheme;
};

240
src/libs/native-base/components/Item.ts Normal file
View File

@ -0,0 +1,240 @@
import { Platform } from 'react-native';
import variable from '../variables/platform';
import { OS } from '../variables/types';
export default (variables /* : * */ = variable) => {
const itemTheme = {
'.floatingLabel': {
'NativeBase.Input': {
height: 50,
top: 8,
paddingTop: 3,
paddingBottom: 7,
'.multiline': {
minHeight: variables.inputHeightBase,
paddingTop: Platform.OS === OS.IOS ? 10 : 3,
paddingBottom: Platform.OS === OS.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 === OS.IOS ? 9 : undefined,
paddingBottom: Platform.OS === OS.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 === OS.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;
};

10
src/libs/native-base/components/Label.ts Normal file
View File

@ -0,0 +1,10 @@
export default () => {
const labelTheme = {
'.focused': {
width: 0,
},
fontSize: 17,
};
return labelTheme;
};

9
src/libs/native-base/components/Left.ts Normal file
View File

@ -0,0 +1,9 @@
export default () => {
const leftTheme = {
flex: 1,
alignSelf: 'center',
alignItems: 'flex-start',
};
return leftTheme;
};

443
src/libs/native-base/components/ListItem.ts Normal file
View File

@ -0,0 +1,443 @@
import { Platform, PixelRatio } from 'react-native';
import pickerTheme from './Picker';
import variable from '../variables/platform';
import { OS } from '../variables/types';
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 === OS.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 === OS.IOS ? 30 : 40,
borderColor: 'transparent',
backgroundColor: '#fff',
borderRadius: 5,
},
'NativeBase.Button': {
'.transparent': {
'NativeBase.Text': {
fontWeight: '500',
},
paddingHorizontal: null,
paddingLeft: platform === OS.IOS ? 10 : null,
},
paddingHorizontal: platform === OS.IOS ? undefined : null,
width: platform === OS.IOS ? undefined : 0,
height: platform === OS.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 === OS.IOS ? variables.borderWidth : null,
marginLeft: null,
padding: variables.listItemPadding,
paddingLeft: variables.listItemPadding + 5,
paddingTop:
platform === OS.IOS ? variables.listItemPadding + 25 : undefined,
paddingBottom:
platform === OS.Android ? variables.listItemPadding + 20 : undefined,
flexDirection: 'row',
borderColor: variables.listBorderColor,
'NativeBase.Text': {
fontSize: 14,
color: platform === OS.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 === OS.IOS ? undefined : -5,
alignSelf: null,
},
'NativeBase.PickerNB': {
...pickerTheme(),
},
flexDirection: 'row',
alignItems: 'center',
flex: 0,
alignSelf: 'stretch',
height: 44,
justifyContent: 'flex-end',
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
borderColor: variables.listBorderColor,
paddingRight: variables.listItemPadding + 5,
},
'.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;
};

12
src/libs/native-base/components/Picker.android.ts Normal file
View File

@ -0,0 +1,12 @@
export default () => {
const pickerTheme = {
'.note': {
color: '#8F8E95',
},
// width: 90,
marginRight: -4,
flexGrow: 1,
};
return pickerTheme;
};

5
src/libs/native-base/components/Picker.ios.ts Normal file
View File

@ -0,0 +1,5 @@
export default () => {
const pickerTheme = {};
return pickerTheme;
};

12
src/libs/native-base/components/Picker.ts Normal file
View File

@ -0,0 +1,12 @@
export default () => {
const pickerTheme = {
'.note': {
color: '#8F8E95',
},
// width: 90,
marginRight: -4,
flexGrow: 1,
};
return pickerTheme;
};

27
src/libs/native-base/components/Radio.ts Normal file
View File

@ -0,0 +1,27 @@
import { Platform } from 'react-native';
import variable from '../variables/platform';
import { OS } from '../variables/types';
export default (variables /* : * */ = variable) => {
const radioTheme = {
'.selected': {
'NativeBase.IconNB': {
color:
Platform.OS === OS.IOS
? variables.radioColor
: variables.radioSelectedColorAndroid,
lineHeight: Platform.OS === OS.IOS ? 25 : variables.radioBtnLineHeight,
height: Platform.OS === OS.IOS ? 20 : undefined,
},
},
'NativeBase.IconNB': {
color: Platform.OS === OS.IOS ? 'transparent' : undefined,
lineHeight:
Platform.OS === OS.IOS ? undefined : variables.radioBtnLineHeight,
fontSize: Platform.OS === OS.IOS ? undefined : variables.radioBtnSize,
},
};
return radioTheme;
};

12
src/libs/native-base/components/Right.ts Normal file
View File

@ -0,0 +1,12 @@
export default () => {
const rightTheme = {
'NativeBase.Button': {
alignSelf: null,
},
flex: 1,
alignSelf: 'center',
alignItems: 'flex-end',
};
return rightTheme;
};

55
src/libs/native-base/components/Segment.ts Normal file
View File

@ -0,0 +1,55 @@
import variable from '../variables/platform';
import { OS } from '../variables/types';
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 === OS.IOS ? 5 : undefined,
borderBottomLeftRadius: platform === OS.IOS ? 5 : undefined,
borderLeftWidth: 1,
},
'.last': {
borderTopRightRadius: platform === OS.IOS ? 5 : undefined,
borderBottomRightRadius: platform === OS.IOS ? 5 : undefined,
},
'NativeBase.Text': {
color: variables.segmentTextColor,
fontSize: 14,
},
'NativeBase.Icon': {
fontSize: 22,
paddingTop: 0,
color: variables.segmentTextColor,
},
},
};
return segmentTheme;
};

47
src/libs/native-base/components/Separator.ts Normal file
View File

@ -0,0 +1,47 @@
import variable from '../variables/platform';
export default (variables /* : * */ = variable) => {
const theme = {
'.group': {
height: 50,
paddingVertical: variables.listItemPadding - 8,
paddingTop: variables.listItemPadding + 12,
'.bordered': {
height: 50,
paddingVertical: variables.listItemPadding - 8,
paddingTop: variables.listItemPadding + 12,
},
},
'.bordered': {
'.noTopBorder': {
borderTopWidth: 0,
},
'.noBottomBorder': {
borderBottomWidth: 0,
},
height: 35,
paddingTop: variables.listItemPadding + 2,
paddingBottom: variables.listItemPadding,
borderBottomWidth: variables.borderWidth,
borderTopWidth: variables.borderWidth,
borderColor: variables.listBorderColor,
},
'NativeBase.Text': {
fontSize: variables.tabBarTextSize - 2,
color: '#777',
},
'.noTopBorder': {
borderTopWidth: 0,
},
'.noBottomBorder': {
borderBottomWidth: 0,
},
height: 38,
backgroundColor: '#F0EFF5',
flex: 1,
justifyContent: 'center',
paddingLeft: variables.listItemPadding + 5,
};
return theme;
};

7
src/libs/native-base/components/Spinner.ts Normal file
View File

@ -0,0 +1,7 @@
export default () => {
const spinnerTheme = {
height: 80,
};
return spinnerTheme;
};

17
src/libs/native-base/components/Subtitle.ts Normal file
View File

@ -0,0 +1,17 @@
import { Platform } from 'react-native';
import variable from '../variables/platform';
import { OS } from '../variables/types';
export default (variables /* : * */ = variable) => {
const subtitleTheme = {
fontSize: variables.subTitleFontSize,
fontFamily: variables.titleFontFamily,
color: variables.subtitleColor,
textAlign: Platform.OS === OS.IOS ? 'center' : 'left',
paddingLeft: Platform.OS === OS.IOS ? 4 : 0,
marginLeft: Platform.OS === OS.IOS ? undefined : -3,
};
return subtitleTheme;
};

44
src/libs/native-base/components/SwipeRow.ts Normal file
View File

@ -0,0 +1,44 @@
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;
};

7
src/libs/native-base/components/Switch.ts Normal file
View File

@ -0,0 +1,7 @@
export default () => {
const switchTheme = {
marginVertical: -5,
};
return switchTheme;
};

8
src/libs/native-base/components/Tab.ts Normal file
View File

@ -0,0 +1,8 @@
export default () => {
const tabTheme = {
flex: 1,
backgroundColor: '#FFF',
};
return tabTheme;
};

55
src/libs/native-base/components/TabBar.ts Normal file
View File

@ -0,0 +1,55 @@
import variable from '../variables/platform';
export default (variables /* : * */ = variable) => {
const tabBarTheme = {
'.tabIcon': {
height: undefined,
},
'.vertical': {
height: 60,
},
'NativeBase.Button': {
'.transparent': {
'NativeBase.Text': {
fontSize: variables.tabFontSize,
color: variables.sTabBarActiveTextColor,
fontWeight: '400',
},
'NativeBase.IconNB': {
color: variables.sTabBarActiveTextColor,
},
},
'NativeBase.IconNB': {
color: variables.sTabBarActiveTextColor,
},
'NativeBase.Text': {
fontSize: variables.tabFontSize,
color: variables.sTabBarActiveTextColor,
fontWeight: '400',
},
'.isTabActive': {
'NativeBase.Text': {
fontWeight: '900',
},
},
flex: 1,
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
borderRadius: null,
borderBottomColor: 'transparent',
backgroundColor: variables.tabBgColor,
},
height: 45,
flexDirection: 'row',
justifyContent: 'space-around',
borderWidth: 1,
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
borderBottomColor: '#ccc',
backgroundColor: variables.tabBgColor,
};
return tabBarTheme;
};

17
src/libs/native-base/components/TabContainer.ts Normal file
View File

@ -0,0 +1,17 @@
import { Platform } from 'react-native';
import variable from '../variables/platform';
import { OS } from '../variables/types';
export default (variables /* : * */ = variable) => {
const tabContainerTheme = {
elevation: 3,
height: 50,
flexDirection: 'row',
justifyContent: 'space-around',
borderBottomWidth: Platform.OS === OS.IOS ? variables.borderWidth : 0,
borderColor: variables.topTabBarBorderColor,
};
return tabContainerTheme;
};

38
src/libs/native-base/components/TabHeading.ts Normal file
View File

@ -0,0 +1,38 @@
import variable from '../variables/platform';
import { OS } from '../variables/types';
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 === OS.Android ? 0 : 1,
minWidth: platform === OS.Android ? undefined : 60,
},
'NativeBase.Text': {
color: variables.topTabBarTextColor,
marginHorizontal: 7,
},
'NativeBase.Icon': {
color: variables.topTabBarTextColor,
fontSize: platform === OS.IOS ? 26 : undefined,
},
'.active': {
'NativeBase.Text': {
color: variables.topTabBarActiveTextColor,
fontWeight: '600',
},
'NativeBase.Icon': {
color: variables.topTabBarActiveTextColor,
},
},
};
return tabHeadingTheme;
};

15
src/libs/native-base/components/Text.ts Normal file
View File

@ -0,0 +1,15 @@
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;
};

23
src/libs/native-base/components/Textarea.ts Normal file
View File

@ -0,0 +1,23 @@
import variable from '../variables/platform';
export default (variables /* : * */ = variable) => {
const textAreaTheme = {
'.underline': {
borderBottomWidth: variables.borderWidth,
marginTop: 5,
borderColor: variables.inputBorderColor,
},
'.bordered': {
borderWidth: 1,
marginTop: 5,
borderColor: variables.inputBorderColor,
},
color: variables.textColor,
paddingLeft: 10,
paddingRight: 5,
fontSize: 15,
textAlignVertical: 'top',
};
return textAreaTheme;
};

38
src/libs/native-base/components/Thumbnail.ts Normal file
View File

@ -0,0 +1,38 @@
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;
};

19
src/libs/native-base/components/Title.ts Normal file
View File

@ -0,0 +1,19 @@
import { Platform } from 'react-native';
import variable from '../variables/platform';
import { OS } from '../variables/types';
export default (variables /* : * */ = variable) => {
const titleTheme = {
fontSize: variables.titleFontSize,
fontFamily: variables.titleFontFamily,
color: variables.titleFontColor,
fontWeight: Platform.OS === OS.IOS ? '700' : undefined,
textAlign: Platform.OS === OS.IOS ? 'center' : 'left',
paddingLeft: Platform.OS === OS.IOS ? 4 : 0,
marginLeft: Platform.OS === OS.IOS ? undefined : -3,
paddingTop: 1,
};
return titleTheme;
};

39
src/libs/native-base/components/Toast.ts Normal file
View File

@ -0,0 +1,39 @@
import variable from '../variables/platform';
import { OS } from '../variables/types';
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 === OS.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;
};

11
src/libs/native-base/components/View.ts Normal file
View File

@ -0,0 +1,11 @@
import variable from '../variables/platform';
export default (variables /* : * */ = variable) => {
const viewTheme = {
'.padder': {
padding: variables.contentPadding,
},
};
return viewTheme;
};

250
src/libs/native-base/components/index.ts Normal file
View File

@ -0,0 +1,250 @@
import { forEach } 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 const createTheme = (variables /* : * */ = variable) => {
const theme = {
variables,
'NativeBase.Left': {
...leftTheme(),
},
'NativeBase.Right': {
...rightTheme(),
},
'NativeBase.Body': {
...bodyTheme(),
},
'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(),
},
'NativeBase.Container': {
...containerTheme(variables),
},
'NativeBase.Content': {
...contentTheme(),
},
'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(),
},
'NativeBase.Fab': {
...fabTheme(),
},
'NativeBase.Item': {
...itemTheme(variables),
},
'NativeBase.Label': {
...labelTheme(),
},
'NativeBase.Textarea': {
...textAreaTheme(variables),
},
'NativeBase.PickerNB': {
...pickerTheme(),
'NativeBase.Button': {
'NativeBase.Text': {},
},
},
'NativeBase.Tab': {
...tabTheme(),
},
'NativeBase.Segment': {
...segmentTheme(variables),
},
'NativeBase.TabBar': {
...tabBarTheme(variables),
},
'NativeBase.ViewNB': {
...viewTheme(variables),
},
'NativeBase.TabHeading': {
...tabHeadingTheme(variables),
},
'NativeBase.TabContainer': {
...tabContainerTheme(variables),
},
'NativeBase.Switch': {
...switchTheme(),
},
'NativeBase.Separator': {
...separatorTheme(variables),
},
'NativeBase.SwipeRow': {
...swipeRowTheme(),
},
'NativeBase.Thumbnail': {
...thumbnailTheme(),
},
};
const cssifyTheme = (
grandparent: any,
parent: any,
parentKey: string | null,
) => {
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;
};

4
src/libs/native-base/index.ts Normal file
View File

@ -0,0 +1,4 @@
export * from './components';
export { default as variables } from './variables/platform';
export * from './variables/types';
export * from './useVariables';

5
src/libs/native-base/useVariables.ts Normal file
View File

@ -0,0 +1,5 @@
import platform from './variables/platform';
export const useVariables = () => {
return platform;
};

326
src/libs/native-base/variables/platform.ts Normal file
View File

@ -0,0 +1,326 @@
import color from 'color';
import { Dimensions, PixelRatio, Platform } from 'react-native';
import { OS, Variables } from './types';
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS;
const isIphoneX =
platform === OS.IOS &&
(deviceHeight === 812 ||
deviceWidth === 812 ||
deviceHeight === 896 ||
deviceWidth === 896);
export default {
platform,
// Accordion
accordionBorderColor: '#d3d3d3',
accordionContentPadding: 10,
accordionIconFontSize: 18,
contentStyle: '#f5f4f5',
expandedIconStyle: '#000',
headerStyle: '#edebed',
iconStyle: '#000',
disableRow: '#a9a9a9',
// 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 === OS.IOS ? 3 : 0,
// Button
buttonFontFamily: platform === OS.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 === OS.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 === OS.IOS ? 10 : 12,
// CheckBox
CheckboxRadius: platform === OS.IOS ? 13 : 0,
CheckboxBorderWidth: platform === OS.IOS ? 1 : 2,
CheckboxPaddingLeft: platform === OS.IOS ? 4 : 2,
CheckboxPaddingBottom: platform === OS.IOS ? 0 : 5,
CheckboxIconSize: platform === OS.IOS ? 19 : 16,
CheckboxIconMarginTop: platform === OS.IOS ? undefined : 1,
CheckboxFontSize: platform === OS.IOS ? 12 / 0.9 : 17,
checkboxBgColor: '#039BE5',
checkboxSize: 20,
checkboxTickColor: '#fff',
checkboxDefaultColor: 'transparent',
checkboxTextShadowRadius: 0,
// Color
brandPrimary: '#448AFF',
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 === OS.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 === OS.IOS ? '#F8F8F8' : '#3F51B5',
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === OS.IOS ? '#6b6b6b' : '#b3c7f9',
tabBarTextSize: platform === OS.IOS ? 14 : 11,
activeTab: platform === OS.IOS ? '#007aff' : '#fff',
sTabBarActiveTextColor: '#007aff',
tabBarActiveTextColor: platform === OS.IOS ? '#007aff' : '#fff',
tabActiveBgColor: platform === OS.IOS ? '#cde1f9' : '#3F51B5',
// Header
toolbarBtnColor: platform === OS.IOS ? '#007aff' : '#fff',
toolbarDefaultBg: platform === OS.IOS ? '#F8F8F8' : '#3F51B5',
toolbarHeight: platform === OS.IOS ? 64 : 56,
toolbarSearchIconSize: platform === OS.IOS ? 20 : 23,
toolbarInputColor: platform === OS.IOS ? '#CECDD2' : '#fff',
searchBarHeight: platform === OS.IOS ? 30 : 40,
searchBarInputHeight: platform === OS.IOS ? 30 : 50,
toolbarBtnTextColor: platform === OS.IOS ? '#007aff' : '#fff',
toolbarDefaultBorder: platform === OS.IOS ? '#a7a6ab' : '#3F51B5',
iosStatusbar: platform === OS.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 === OS.IOS ? 30 : 28,
iconHeaderSize: platform === OS.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 === OS.IOS ? 20 : 24,
listItemSelected: platform === OS.IOS ? '#007aff' : '#3F51B5',
// List
listBg: 'transparent',
listBorderColor: '#c9c9c9',
listDividerBg: '#f4f4f4',
listBtnUnderlayColor: '#DDD',
listItemPadding: platform === OS.IOS ? 10 : 12,
listNoteColor: '#808080',
listNoteSize: 13,
// Progress Bar
defaultProgressColor: '#E4202D',
inverseProgressColor: '#1A191B',
// Radio Button
radioBtnSize: platform === OS.IOS ? 25 : 23,
radioSelectedColorAndroid: '#3F51B5',
radioBtnLineHeight: platform === OS.IOS ? 29 : 24,
get radioColor() {
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: platform === OS.IOS ? '#F8F8F8' : '#3F51B5',
segmentActiveBackgroundColor: platform === OS.IOS ? '#007aff' : '#fff',
segmentTextColor: platform === OS.IOS ? '#007aff' : '#fff',
segmentActiveTextColor: platform === OS.IOS ? '#fff' : '#3F51B5',
segmentBorderColor: platform === OS.IOS ? '#007aff' : '#fff',
segmentBorderColorMain: platform === OS.IOS ? '#a7a6ab' : '#3F51B5',
// Spinner
defaultSpinnerColor: '#45D56E',
inverseSpinnerColor: '#1A191B',
// Tab
tabBarDisabledTextColor: '#BDBDBD',
tabDefaultBg: platform === OS.IOS ? '#F8F8F8' : '#3F51B5',
topTabBarTextColor: platform === OS.IOS ? '#6b6b6b' : '#b3c7f9',
topTabBarActiveTextColor: platform === OS.IOS ? '#007aff' : '#fff',
topTabBarBorderColor: platform === OS.IOS ? '#a7a6ab' : '#fff',
topTabBarActiveBorderColor: platform === OS.IOS ? '#007aff' : '#fff',
// Tabs
tabBgColor: '#F8F8F8',
tabFontSize: 15,
// Text
textColor: '#000',
inverseTextColor: '#fff',
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontFamily: platform === OS.IOS ? 'System' : 'Roboto_medium',
titleFontSize: platform === OS.IOS ? 17 : 19,
subTitleFontSize: platform === OS.IOS ? 11 : 14,
subtitleColor: platform === OS.IOS ? '#8e8e93' : '#FFF',
titleFontColor: platform === OS.IOS ? '#000' : '#FFF',
// Other
borderRadiusBase: platform === OS.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,
},
},
} as Variables;

215
src/libs/native-base/variables/types.ts Normal file
View File

@ -0,0 +1,215 @@
import { Platform } from 'react-native';
export type Portrait = {
topInset: number;
leftInset: number;
rightInset: number;
bottomInset: number;
};
export type Landscape = {
topInset: number;
leftInset: number;
rightInset: number;
bottomInset: number;
};
export type Inset = {
portrait: Portrait;
landscape: Landscape;
};
export type Variables = {
platform: typeof Platform.OS;
accordionBorderColor: string;
accordionContentPadding: number;
accordionIconFontSize: number;
contentStyle: string;
expandedIconStyle: string;
headerStyle: string;
iconStyle: string;
disableRow: string;
elevation: number;
containerTouchableBackgroundColor: string;
innerTouchableBackgroundColor: string;
listItemHeight: number;
listItemBorderColor: string;
marginHorizontal: number;
marginLeft: number;
marginTop: number;
minHeight: number;
padding: number;
touchableTextColor: string;
androidRipple: boolean;
androidRippleColor: string;
androidRippleColorDark: string;
buttonUppercaseAndroidText: boolean;
badgeBg: string;
badgeColor: string;
badgePadding: number;
buttonFontFamily: string;
buttonDisabledBg: string;
buttonPadding: number;
buttonDefaultActiveOpacity: number;
buttonDefaultFlex: number;
buttonDefaultBorderRadius: number;
buttonDefaultBorderWidth: number;
buttonPrimaryBg: string;
buttonPrimaryColor: string;
buttonInfoBg: string;
buttonInfoColor: string;
buttonSuccessBg: string;
buttonSuccessColor: string;
buttonDangerBg: string;
buttonDangerColor: string;
buttonWarningBg: string;
buttonWarningColor: string;
buttonTextSize: number;
buttonTextSizeLarge: number;
buttonTextSizeSmall: number;
borderRadiusLarge: number;
iconSizeLarge: number;
iconSizeSmall: number;
cardDefaultBg: string;
cardBorderColor: string;
cardBorderRadius: number;
cardItemPadding: number;
CheckboxRadius: number;
CheckboxBorderWidth: number;
CheckboxPaddingLeft: number;
CheckboxPaddingBottom: number;
CheckboxIconSize: number;
CheckboxIconMarginTop: number;
CheckboxFontSize: number;
checkboxBgColor: string;
checkboxSize: number;
checkboxTickColor: string;
checkboxDefaultColor: string;
checkboxTextShadowRadius: number;
brandPrimary: string;
brandInfo: string;
brandSuccess: string;
brandDanger: string;
brandWarning: string;
brandDark: string;
brandLight: string;
containerBgColor: string;
datePickerFlex: number;
datePickerPadding: number;
datePickerTextColor: string;
datePickerBg: string;
fabBackgroundColor: string;
fabBorderRadius: number;
fabBottom: number;
fabButtonBorderRadius: number;
fabButtonHeight: number;
fabButtonLeft: number;
fabButtonMarginBottom: number;
fabContainerBottom: number;
fabDefaultPosition: number;
fabElevation: number;
fabIconColor: string;
fabIconSize: number;
fabShadowColor: string;
fabShadowOffsetHeight: number;
fabShadowOffsetWidth: number;
fabShadowOpacity: number;
fabShadowRadius: number;
fabWidth: number;
DefaultFontSize: number;
fontFamily: string;
fontSizeBase: number;
fontSizeH1: number;
fontSizeH2: number;
fontSizeH3: number;
footerHeight: number;
footerDefaultBg: string;
footerPaddingBottom: number;
tabBarTextColor: string;
tabBarTextSize: number;
activeTab: string;
sTabBarActiveTextColor: string;
tabBarActiveTextColor: string;
tabActiveBgColor: string;
toolbarBtnColor: string;
toolbarDefaultBg: string;
toolbarHeight: number;
toolbarSearchIconSize: number;
toolbarInputColor: string;
searchBarHeight: number;
searchBarInputHeight: number;
toolbarBtnTextColor: string;
toolbarDefaultBorder: string;
iosStatusbar: string;
statusBarColor: string;
darkenHeader: string;
iconFamily: string;
iconFontSize: number;
iconHeaderSize: number;
inputFontSize: number;
inputBorderColor: string;
inputSuccessBorderColor: string;
inputErrorBorderColor: string;
inputHeightBase: number;
inputColor: string;
inputColorPlaceholder: string;
buttonLineHeight: number;
lineHeightH1: number;
lineHeightH2: number;
lineHeightH3: number;
lineHeight: number;
listItemSelected: string;
listBg: string;
listBorderColor: string;
listDividerBg: string;
listBtnUnderlayColor: string;
listItemPadding: number;
listNoteColor: string;
listNoteSize: number;
defaultProgressColor: string;
inverseProgressColor: string;
radioBtnSize: number;
radioSelectedColorAndroid: string;
radioBtnLineHeight: number;
radioColor: string;
segmentBackgroundColor: string;
segmentActiveBackgroundColor: string;
segmentTextColor: string;
segmentActiveTextColor: string;
segmentBorderColor: string;
segmentBorderColorMain: string;
defaultSpinnerColor: string;
inverseSpinnerColor: string;
tabBarDisabledTextColor: string;
tabDefaultBg: string;
topTabBarTextColor: string;
topTabBarActiveTextColor: string;
topTabBarBorderColor: string;
topTabBarActiveBorderColor: string;
tabBgColor: string;
tabFontSize: number;
textColor: string;
inverseTextColor: string;
noteFontSize: number;
defaultTextColor: string;
titleFontFamily: string;
titleFontSize: number;
subTitleFontSize: number;
subtitleColor: string;
titleFontColor: string;
borderRadiusBase: number;
borderWidth: number;
contentPadding: number;
dropdownLinkColor: string;
inputLineHeight: number;
deviceWidth: number;
deviceHeight: number;
isIphoneX: boolean;
inputGroupRoundedBorderRadius: number;
Inset: Inset;
};
export enum OS {
Android = 'android',
IOS = 'ios',
}

7
src/screens/App.tsx
View File

@ -5,8 +5,11 @@ import RNBootSplash from 'react-native-bootsplash';
import { createClient } from 'libs/graphql';
import { API_URI } from 'config/api';
import Navigation from './Navigation';
import { StyleProvider } from 'native-base';
import { createTheme, variables } from '../libs/native-base';
const App = () => {
const theme = useRef(createTheme(variables)).current;
const client = useRef(createClient(API_URI)).current;
useEffect(() => {
RNBootSplash.hide({ fade: true });
@ -14,7 +17,9 @@ const App = () => {
return (
<ApolloProvider client={client}>
<Navigation />
<StyleProvider style={theme}>
<Navigation />
</StyleProvider>
</ApolloProvider>
);
};

19
yarn.lock
View File

@ -1995,6 +1995,25 @@
dependencies:
"@babel/types" "^7.3.0"
"@types/color-convert@*":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.0.tgz#8f5ee6b9e863dcbee5703f5a517ffb13d3ea4e22"
integrity sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==
dependencies:
"@types/color-name" "*"
"@types/color-name@*":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
"@types/color@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.1.tgz#2900490ed04da8116c5058cd5dba3572d5a25071"
integrity sha512-oeUWVaAwI+xINDUx+3F2vJkl/vVB03VChFF/Gl3iQCdbcakjuoJyMOba+3BXRtnBhxZ7uBYqQBi9EpLnvSoztA==
dependencies:
"@types/color-convert" "*"
"@types/eslint-visitor-keys@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"