lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Updated native base theme

Browse source
This commit is contained in:
keplyx 2020-01-28 20:07:21 +01:00
parent 35acbff1cf
commit 5ba63da3d4
49 changed files with 2092 additions and 1939 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
native-base-theme/components/Badge.js
View file

@ -1,36 +1,37 @@
// @flow
import variable from "./../variables/platform";
import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /* : * */ = variable) => {
const badgeTheme = {
".primary": {
backgroundColor: variables.btnPrimaryBg
'.primary': {
backgroundColor: variables.buttonPrimaryBg
},
".warning": {
backgroundColor: variables.btnWarningBg
'.warning': {
backgroundColor: variables.buttonWarningBg
},
".info": {
backgroundColor: variables.btnInfoBg
'.info': {
backgroundColor: variables.buttonInfoBg
},
".success": {
backgroundColor: variables.btnSuccessBg
'.success': {
backgroundColor: variables.buttonSuccessBg
},
".danger": {
backgroundColor: variables.btnDangerBg
'.danger': {
backgroundColor: variables.buttonDangerBg
},
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.badgeColor,
fontSize: variables.fontSizeBase,
lineHeight: variables.lineHeight - 1,
textAlign: "center",
textAlign: 'center',
paddingHorizontal: 3
},
backgroundColor: variables.badgeBg,
padding: variables.badgePadding,
paddingHorizontal: 6,
alignSelf: "flex-start",
justifyContent: variables.platform === "ios" ? "center" : undefined,
alignSelf: 'flex-start',
justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined,
borderRadius: 13.5,
height: 27
};

6
native-base-theme/components/Body.js
View file

@ -1,12 +1,10 @@
// @flow
import variable from './../variables/platform';
export default (variables /*: * */ = variable) => {
export default () => {
const bodyTheme = {
flex: 1,
alignItems: 'center',
alignSelf: 'center',
alignSelf: 'center'
};
return bodyTheme;

338
native-base-theme/components/Button.js
View file

@ -1,158 +1,159 @@
// @flow
import variable from "./../variables/platform";
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": {
'NativeBase.Text': {
color: variables.brandDark
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.brandDark
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.brandDark
}
};
const lightCommon = {
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.brandLight
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.brandLight
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.brandLight
}
};
const primaryCommon = {
"NativeBase.Text": {
color: variables.btnPrimaryBg
'NativeBase.Text': {
color: variables.buttonPrimaryBg
},
"NativeBase.Icon": {
color: variables.btnPrimaryBg
'NativeBase.Icon': {
color: variables.buttonPrimaryBg
},
"NativeBase.IconNB": {
color: variables.btnPrimaryBg
'NativeBase.IconNB': {
color: variables.buttonPrimaryBg
}
};
const successCommon = {
"NativeBase.Text": {
color: variables.btnSuccessBg
'NativeBase.Text': {
color: variables.buttonSuccessBg
},
"NativeBase.Icon": {
color: variables.btnSuccessBg
'NativeBase.Icon': {
color: variables.buttonSuccessBg
},
"NativeBase.IconNB": {
color: variables.btnSuccessBg
'NativeBase.IconNB': {
color: variables.buttonSuccessBg
}
};
const infoCommon = {
"NativeBase.Text": {
color: variables.btnInfoBg
'NativeBase.Text': {
color: variables.buttonInfoBg
},
"NativeBase.Icon": {
color: variables.btnInfoBg
'NativeBase.Icon': {
color: variables.buttonInfoBg
},
"NativeBase.IconNB": {
color: variables.btnInfoBg
'NativeBase.IconNB': {
color: variables.buttonInfoBg
}
};
const warningCommon = {
"NativeBase.Text": {
color: variables.btnWarningBg
'NativeBase.Text': {
color: variables.buttonWarningBg
},
"NativeBase.Icon": {
color: variables.btnWarningBg
'NativeBase.Icon': {
color: variables.buttonWarningBg
},
"NativeBase.IconNB": {
color: variables.btnWarningBg
'NativeBase.IconNB': {
color: variables.buttonWarningBg
}
};
const dangerCommon = {
"NativeBase.Text": {
color: variables.btnDangerBg
'NativeBase.Text': {
color: variables.buttonDangerBg
},
"NativeBase.Icon": {
color: variables.btnDangerBg
'NativeBase.Icon': {
color: variables.buttonDangerBg
},
"NativeBase.IconNB": {
color: variables.btnDangerBg
'NativeBase.IconNB': {
color: variables.buttonDangerBg
}
};
const buttonTheme = {
".disabled": {
".transparent": {
backgroundColor: null,
"NativeBase.Text": {
color: variables.btnDisabledBg
'.disabled': {
'.transparent': {
backgroundColor: 'transparent',
'NativeBase.Text': {
color: variables.buttonDisabledBg
},
"NativeBase.Icon": {
color: variables.btnDisabledBg
'NativeBase.Icon': {
color: variables.buttonDisabledBg
},
"NativeBase.IconNB": {
color: variables.btnDisabledBg
'NativeBase.IconNB': {
color: variables.buttonDisabledBg
}
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.brandLight
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.brandLight
},
backgroundColor: variables.btnDisabledBg
backgroundColor: variables.buttonDisabledBg
},
".bordered": {
".dark": {
'.bordered': {
'.dark': {
...darkCommon,
backgroundColor: "transparent",
backgroundColor: 'transparent',
borderColor: variables.brandDark,
borderWidth: variables.borderWidth * 2
},
".light": {
'.light': {
...lightCommon,
backgroundColor: "transparent",
backgroundColor: 'transparent',
borderColor: variables.brandLight,
borderWidth: variables.borderWidth * 2
},
".primary": {
'.primary': {
...primaryCommon,
backgroundColor: "transparent",
borderColor: variables.btnPrimaryBg,
backgroundColor: 'transparent',
borderColor: variables.buttonPrimaryBg,
borderWidth: variables.borderWidth * 2
},
".success": {
'.success': {
...successCommon,
backgroundColor: "transparent",
borderColor: variables.btnSuccessBg,
backgroundColor: 'transparent',
borderColor: variables.buttonSuccessBg,
borderWidth: variables.borderWidth * 2
},
".info": {
'.info': {
...infoCommon,
backgroundColor: "transparent",
borderColor: variables.btnInfoBg,
backgroundColor: 'transparent',
borderColor: variables.buttonInfoBg,
borderWidth: variables.borderWidth * 2
},
".warning": {
'.warning': {
...warningCommon,
backgroundColor: "transparent",
borderColor: variables.btnWarningBg,
backgroundColor: 'transparent',
borderColor: variables.buttonWarningBg,
borderWidth: variables.borderWidth * 2
},
".danger": {
'.danger': {
...dangerCommon,
backgroundColor: "transparent",
borderColor: variables.btnDangerBg,
backgroundColor: 'transparent',
borderColor: variables.buttonDangerBg,
borderWidth: variables.borderWidth * 2
},
".disabled": {
backgroundColor: null,
borderColor: variables.btnDisabledBg,
'.disabled': {
backgroundColor: 'transparent',
borderColor: variables.buttonDisabledBg,
borderWidth: variables.borderWidth * 2,
"NativeBase.Text": {
color: variables.btnDisabledBg
'NativeBase.Text': {
color: variables.buttonDisabledBg
}
},
...primaryCommon,
@ -162,235 +163,224 @@ export default (variables /*: * */ = variable) => {
shadowOffset: null,
shadowOpacity: null,
shadowRadius: null,
backgroundColor: "transparent"
backgroundColor: 'transparent'
},
".dark": {
".bordered": {
'.dark': {
'.bordered': {
...darkCommon
},
backgroundColor: variables.brandDark
},
".light": {
".transparent": {
'.light': {
'.transparent': {
...lightCommon,
backgroundColor: null
backgroundColor: 'transparent'
},
".bordered": {
'.bordered': {
...lightCommon
},
...darkCommon,
backgroundColor: variables.brandLight
},
".primary": {
".bordered": {
'.primary': {
'.bordered': {
...primaryCommon
},
backgroundColor: variables.btnPrimaryBg
backgroundColor: variables.buttonPrimaryBg
},
".success": {
".bordered": {
'.success': {
'.bordered': {
...successCommon
},
backgroundColor: variables.btnSuccessBg
backgroundColor: variables.buttonSuccessBg
},
".info": {
".bordered": {
'.info': {
'.bordered': {
...infoCommon
},
backgroundColor: variables.btnInfoBg
backgroundColor: variables.buttonInfoBg
},
".warning": {
".bordered": {
'.warning': {
'.bordered': {
...warningCommon
},
backgroundColor: variables.btnWarningBg
backgroundColor: variables.buttonWarningBg
},
".danger": {
".bordered": {
'.danger': {
'.bordered': {
...dangerCommon
},
backgroundColor: variables.btnDangerBg
backgroundColor: variables.buttonDangerBg
},
".block": {
justifyContent: "center",
alignSelf: "stretch"
'.block': {
justifyContent: 'center',
alignSelf: 'stretch'
},
".full": {
justifyContent: "center",
alignSelf: "stretch",
'.full': {
justifyContent: 'center',
alignSelf: 'stretch',
borderRadius: 0
},
".rounded": {
// paddingHorizontal: variables.buttonPadding + 20,
'.rounded': {
borderRadius: variables.borderRadiusLarge
},
".transparent": {
backgroundColor: "transparent",
'.transparent': {
backgroundColor: 'transparent',
elevation: 0,
shadowColor: null,
shadowOffset: null,
shadowRadius: null,
shadowOpacity: null,
...primaryCommon,
".dark": {
'.dark': {
...darkCommon,
backgroundColor: null
},
".danger": {
'.danger': {
...dangerCommon,
backgroundColor: null
},
".warning": {
'.warning': {
...warningCommon,
backgroundColor: null
},
".info": {
'.info': {
...infoCommon,
backgroundColor: null
},
".primary": {
'.primary': {
...primaryCommon,
backgroundColor: null
},
".success": {
'.success': {
...successCommon,
backgroundColor: null
},
".light": {
'.light': {
...lightCommon,
backgroundColor: null
},
".disabled": {
backgroundColor: "transparent",
borderColor: variables.btnDisabledBg,
'.disabled': {
backgroundColor: 'transparent',
borderColor: variables.buttonDisabledBg,
borderWidth: variables.borderWidth * 2,
"NativeBase.Text": {
color: variables.btnDisabledBg
'NativeBase.Text': {
color: variables.buttonDisabledBg
},
"NativeBase.Icon": {
color: variables.btnDisabledBg
'NativeBase.Icon': {
color: variables.buttonDisabledBg
},
"NativeBase.IconNB": {
color: variables.btnDisabledBg
'NativeBase.IconNB': {
color: variables.buttonDisabledBg
}
}
},
".small": {
'.small': {
height: 30,
"NativeBase.Text": {
'NativeBase.Text': {
fontSize: 14
},
"NativeBase.Icon": {
'NativeBase.Icon': {
fontSize: 20,
paddingTop: 0
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
fontSize: 20,
paddingTop: 0
}
},
".large": {
'.large': {
height: 60,
"NativeBase.Text": {
fontSize: 22,
'NativeBase.Text': {
fontSize: 22
}
},
".capitalize": {},
'.capitalize': {},
".vertical": {
flexDirection: "column",
'.vertical': {
flexDirection: 'column',
height: null
},
"NativeBase.Text": {
fontFamily: variables.btnFontFamily,
'NativeBase.Text': {
fontFamily: variables.buttonFontFamily,
marginLeft: 0,
marginRight: 0,
color: variables.btnTextColor,
fontSize: variables.btnTextSize,
color: variables.buttonTextColor,
fontSize: variables.buttonTextSize,
paddingHorizontal: 16,
backgroundColor: "transparent"
// childPosition: 1
backgroundColor: 'transparent'
},
"NativeBase.Icon": {
color: variables.btnTextColor,
'NativeBase.Icon': {
color: variables.buttonTextColor,
fontSize: 24,
marginHorizontal: 16,
paddingTop: platform === "ios" ? 2 : undefined
paddingTop: platform === PLATFORM.IOS ? 2 : undefined
},
"NativeBase.IconNB": {
color: variables.btnTextColor,
'NativeBase.IconNB': {
color: variables.buttonTextColor,
fontSize: 24,
marginHorizontal: 16,
paddingTop: platform === "ios" ? 2 : undefined
paddingTop: platform === PLATFORM.IOS ? 2 : undefined
},
".iconLeft": {
"NativeBase.Text": {
'.iconLeft': {
'NativeBase.Text': {
marginLeft: 0
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
marginRight: 0,
marginLeft: 16
},
"NativeBase.Icon": {
'NativeBase.Icon': {
marginRight: 0,
marginLeft: 16
}
},
".iconRight": {
"NativeBase.Text": {
'.iconRight': {
'NativeBase.Text': {
marginRight: 0
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
marginLeft: 0,
marginRight: 16
},
"NativeBase.Icon": {
'NativeBase.Icon': {
marginLeft: 0,
marginRight: 16
}
},
".picker": {
"NativeBase.Text": {
".note": {
'.picker': {
'NativeBase.Text': {
'.note': {
fontSize: 16,
lineHeight: null
}
}
},
paddingVertical: variables.buttonPadding,
// paddingHorizontal: variables.buttonPadding + 10,
backgroundColor: variables.btnPrimaryBg,
backgroundColor: variables.buttonPrimaryBg,
borderRadius: variables.borderRadiusBase,
borderColor: variables.btnPrimaryBg,
borderColor: variables.buttonPrimaryBg,
borderWidth: null,
height: 45,
alignSelf: "flex-start",
flexDirection: "row",
flexDirection: 'row',
elevation: 2,
shadowColor: platformStyle === "material" ? variables.brandDark : undefined,
shadowColor:
platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined,
shadowOffset:
platformStyle === "material" ? { width: 0, height: 2 } : undefined,
shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
shadowRadius: platformStyle === "material" ? 1.2 : undefined,
alignItems: "center",
justifyContent: "space-between"
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'
};
return buttonTheme;
};

12
native-base-theme/components/Card.js
View file

@ -1,19 +1,19 @@
// @flow
import variable from "./../variables/platform";
import variable from './../variables/platform';
export default (variables /* : * */ = variable) => {
const cardTheme = {
".transparent": {
'.transparent': {
shadowColor: null,
shadowOffset: null,
shadowOpacity: null,
shadowRadius: null,
elevation: null,
backgroundColor: "transparent",
backgroundColor: 'transparent',
borderWidth: 0
},
".noShadow": {
'.noShadow': {
shadowColor: null,
shadowOffset: null,
shadowOpacity: null,
@ -24,9 +24,9 @@ export default (variables /*: * */ = variable) => {
borderWidth: variables.borderWidth,
borderRadius: variables.cardBorderRadius,
borderColor: variables.cardBorderColor,
flexWrap: "nowrap",
flexWrap: 'nowrap',
backgroundColor: variables.cardDefaultBg,
shadowColor: "#000",
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 1.5,

134
native-base-theme/components/CardItem.js
View file

@ -1,21 +1,23 @@
// @flow
import { StyleSheet } from "react-native";
import variable from "./../variables/platform";
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": {
'NativeBase.Text': {
fontSize: variables.DefaultFontSize - 3,
color: variables.sTabBarActiveTextColor
},
"NativeBase.Icon": {
'NativeBase.Icon': {
fontSize: variables.iconFontSize - 10,
color: variables.sTabBarActiveTextColor,
marginHorizontal: null
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
fontSize: variables.iconFontSize - 10,
color: variables.sTabBarActiveTextColor
},
@ -24,12 +26,12 @@ export default (variables /*: * */ = variable) => {
};
const cardItemTheme = {
"NativeBase.Left": {
"NativeBase.Body": {
"NativeBase.Text": {
".note": {
'NativeBase.Left': {
'NativeBase.Body': {
'NativeBase.Text': {
'.note': {
color: variables.listNoteColor,
fontWeight: "400",
fontWeight: '400',
marginRight: 20
}
},
@ -37,155 +39,155 @@ export default (variables /*: * */ = variable) => {
marginLeft: 10,
alignItems: null
},
"NativeBase.Icon": {
'NativeBase.Icon': {
fontSize: variables.iconFontSize
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
fontSize: variables.iconFontSize
},
"NativeBase.Text": {
'NativeBase.Text': {
marginLeft: 10,
alignSelf: "center"
alignSelf: 'center'
},
"NativeBase.Button": {
".transparent": {
'NativeBase.Button': {
'.transparent': {
...transparentBtnCommon,
paddingRight: variables.cardItemPadding + 5
}
},
flex: 1,
flexDirection: "row",
alignItems: "center"
flexDirection: 'row',
alignItems: 'center'
},
".content": {
"NativeBase.Text": {
color: platform === "ios" ? "#555" : "#222",
'.content': {
'NativeBase.Text': {
color: platform === PLATFORM.IOS ? '#555' : '#222',
fontSize: variables.DefaultFontSize - 2
}
},
".cardBody": {
'.cardBody': {
padding: -5,
"NativeBase.Text": {
'NativeBase.Text': {
marginTop: 5
}
},
"NativeBase.Body": {
"NativeBase.Text": {
".note": {
'NativeBase.Body': {
'NativeBase.Text': {
'.note': {
color: variables.listNoteColor,
fontWeight: "200",
fontWeight: '200',
marginRight: 20
}
},
"NativeBase.Button": {
".transparent": {
'NativeBase.Button': {
'.transparent': {
...transparentBtnCommon,
paddingRight: variables.cardItemPadding + 5,
alignSelf: "stretch"
alignSelf: 'stretch'
}
},
flex: 1,
alignSelf: "stretch",
alignItems: "flex-start"
alignSelf: 'stretch',
alignItems: 'flex-start'
},
"NativeBase.Right": {
"NativeBase.Badge": {
'NativeBase.Right': {
'NativeBase.Badge': {
alignSelf: null
},
"NativeBase.Button": {
".transparent": {
'NativeBase.Button': {
'.transparent': {
...transparentBtnCommon
},
alignSelf: null
},
"NativeBase.Icon": {
'NativeBase.Icon': {
alignSelf: null,
fontSize: variables.iconFontSize - 8,
color: variables.cardBorderColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
alignSelf: null,
fontSize: variables.iconFontSize - 8,
color: variables.cardBorderColor
},
"NativeBase.Text": {
'NativeBase.Text': {
fontSize: variables.DefaultFontSize - 1,
alignSelf: null
},
"NativeBase.Thumbnail": {
'NativeBase.Thumbnail': {
alignSelf: null
},
"NativeBase.Image": {
'NativeBase.Image': {
alignSelf: null
},
"NativeBase.Radio": {
'NativeBase.Radio': {
alignSelf: null
},
"NativeBase.Checkbox": {
'NativeBase.Checkbox': {
alignSelf: null
},
"NativeBase.Switch": {
'NativeBase.Switch': {
alignSelf: null
},
flex: 0.8
},
".header": {
"NativeBase.Text": {
'.header': {
'NativeBase.Text': {
fontSize: 16,
fontWeight: platform === "ios" ? "600" : "500"
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
},
".bordered": {
"NativeBase.Text": {
'.bordered': {
'NativeBase.Text': {
color: variables.brandPrimary,
fontWeight: platform === "ios" ? "600" : "500"
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
},
borderBottomWidth: variables.borderWidth
},
borderBottomWidth: null,
paddingVertical: variables.cardItemPadding + 5
},
".footer": {
"NativeBase.Text": {
'.footer': {
'NativeBase.Text': {
fontSize: 16,
fontWeight: platform === "ios" ? "600" : "500"
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
},
".bordered": {
"NativeBase.Text": {
'.bordered': {
'NativeBase.Text': {
color: variables.brandPrimary,
fontWeight: platform === "ios" ? "600" : "500"
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
},
borderTopWidth: variables.borderWidth
},
borderBottomWidth: null
},
"NativeBase.Text": {
".note": {
'NativeBase.Text': {
'.note': {
color: variables.listNoteColor,
fontWeight: "200"
fontWeight: '200'
}
},
"NativeBase.Icon": {
'NativeBase.Icon': {
width: variables.iconFontSize + 5,
fontSize: variables.iconFontSize - 2
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
width: variables.iconFontSize + 5,
fontSize: variables.iconFontSize - 2
},
".bordered": {
'.bordered': {
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: variables.cardBorderColor
},
".first": {
'.first': {
borderTopLeftRadius: variables.cardBorderRadius,
borderTopRightRadius: variables.cardBorderRadius
},
".last": {
'.last': {
borderBottomLeftRadius: variables.cardBorderRadius,
borderBottomRightRadius: variables.cardBorderRadius
},
flexDirection: "row",
alignItems: "center",
flexDirection: 'row',
alignItems: 'center',
borderRadius: variables.cardBorderRadius,
padding: variables.cardItemPadding + 5,
paddingVertical: variables.cardItemPadding,

18
native-base-theme/components/CheckBox.js
View file

@ -1,31 +1,31 @@
// @flow
import variable from "./../variables/platform";
import variable from './../variables/platform';
export default (variables /* : * */ = variable) => {
const checkBoxTheme = {
".checked": {
"NativeBase.Icon": {
'.checked': {
'NativeBase.Icon': {
color: variables.checkboxTickColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.checkboxTickColor
}
},
"NativeBase.Icon": {
color: "transparent",
'NativeBase.Icon': {
color: 'transparent',
lineHeight: variables.CheckboxIconSize,
marginTop: variables.CheckboxIconMarginTop,
fontSize: variables.CheckboxFontSize
},
"NativeBase.IconNB": {
color: "transparent",
'NativeBase.IconNB': {
color: 'transparent',
lineHeight: variables.CheckboxIconSize,
marginTop: variables.CheckboxIconMarginTop,
fontSize: variables.CheckboxFontSize
},
borderRadius: variables.CheckboxRadius,
overflow: "hidden",
overflow: 'hidden',
width: variables.checkboxSize,
height: variables.checkboxSize,
borderWidth: variables.CheckboxBorderWidth,

9
native-base-theme/components/Container.js
View file

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

10
native-base-theme/components/Content.js
View file

@ -1,14 +1,12 @@
// @flow
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => {
export default () => {
const contentTheme = {
flex: 1,
backgroundColor: "transparent",
"NativeBase.Segment": {
backgroundColor: 'transparent',
'NativeBase.Segment': {
borderWidth: 0,
backgroundColor: "transparent"
backgroundColor: 'transparent'
}
};

28
native-base-theme/components/Fab.js
View file

@ -1,28 +1,24 @@
// @flow
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => {
const platform = variables.platform;
export default () => {
const fabTheme = {
"NativeBase.Button": {
alignItems: "center",
'NativeBase.Button': {
alignItems: 'center',
padding: null,
justifyContent: "center",
"NativeBase.Icon": {
alignSelf: "center",
justifyContent: 'center',
'NativeBase.Icon': {
alignSelf: 'center',
fontSize: 20,
marginLeft: 0,
marginRight: 0,
marginRight: 0
},
"NativeBase.IconNB": {
alignSelf: "center",
'NativeBase.IconNB': {
alignSelf: 'center',
fontSize: 20,
marginLeft: 0,
marginRight: 0,
},
},
marginRight: 0
}
}
};
return fabTheme;

67
native-base-theme/components/Footer.js
View file

@ -1,31 +1,32 @@
// @flow
import variable from "./../variables/platform";
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": {
'NativeBase.Icon': {
color: variables.tabBarActiveTextColor
}
};
const iconNBCommon = {
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.tabBarActiveTextColor
}
};
const textCommon = {
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.tabBarActiveTextColor
}
};
const footerTheme = {
"NativeBase.Left": {
"NativeBase.Button": {
".transparent": {
backgroundColor: "transparent",
'NativeBase.Left': {
'NativeBase.Button': {
'.transparent': {
backgroundColor: 'transparent',
borderColor: null,
elevation: 0,
shadowColor: null,
@ -38,22 +39,22 @@ export default (variables /*: * */ = variable) => {
},
alignSelf: null,
...iconCommon,
...iconNBCommon,
...iconNBCommon
// ...textCommon
},
flex: 1,
alignSelf: "center",
alignItems: "flex-start"
alignSelf: 'center',
alignItems: 'flex-start'
},
"NativeBase.Body": {
'NativeBase.Body': {
flex: 1,
alignItems: "center",
alignSelf: "center",
flexDirection: "row",
"NativeBase.Button": {
alignSelf: "center",
".transparent": {
backgroundColor: "transparent",
alignItems: 'center',
alignSelf: 'center',
flexDirection: 'row',
'NativeBase.Button': {
alignSelf: 'center',
'.transparent': {
backgroundColor: 'transparent',
borderColor: null,
elevation: 0,
shadowColor: null,
@ -64,20 +65,20 @@ export default (variables /*: * */ = variable) => {
...iconNBCommon,
...textCommon
},
".full": {
'.full': {
height: variables.footerHeight,
paddingBottom: variables.footerPaddingBottom,
flex: 1
},
...iconCommon,
...iconNBCommon,
...iconNBCommon
// ...textCommon
}
},
"NativeBase.Right": {
"NativeBase.Button": {
".transparent": {
backgroundColor: "transparent",
'NativeBase.Right': {
'NativeBase.Button': {
'.transparent': {
backgroundColor: 'transparent',
borderColor: null,
elevation: 0,
shadowColor: null,
@ -90,23 +91,23 @@ export default (variables /*: * */ = variable) => {
},
alignSelf: null,
...iconCommon,
...iconNBCommon,
...iconNBCommon
// ...textCommon
},
flex: 1,
alignSelf: "center",
alignItems: "flex-end"
alignSelf: 'center',
alignItems: 'flex-end'
},
backgroundColor: variables.footerDefaultBg,
flexDirection: "row",
justifyContent: "center",
flexDirection: 'row',
justifyContent: 'center',
borderTopWidth:
platform === "ios" && platformStyle !== "material"
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? variables.borderWidth
: undefined,
borderColor:
platform === "ios" && platformStyle !== "material"
? "#cbcbcb"
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? '#cbcbcb'
: undefined,
height: variables.footerHeight,
paddingBottom: variables.footerPaddingBottom,

50
native-base-theme/components/FooterTab.js
View file

@ -1,78 +1,78 @@
// @flow
import { Platform } from "react-native";
import { Platform } from 'react-native';
import variable from "./../variables/platform";
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": {
'NativeBase.Button': {
'.active': {
'NativeBase.Text': {
color: variables.tabBarActiveTextColor,
fontSize: variables.tabBarTextSize,
lineHeight: 16
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.tabBarActiveTextColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.tabBarActiveTextColor
},
backgroundColor: variables.tabActiveBgColor
},
flexDirection: null,
backgroundColor: "transparent",
backgroundColor: 'transparent',
borderColor: null,
elevation: 0,
shadowColor: null,
shadowOffset: null,
shadowRadius: null,
shadowOpacity: null,
alignSelf: "center",
alignSelf: 'center',
flex: 1,
height: variables.footerHeight,
justifyContent: "center",
".badge": {
"NativeBase.Badge": {
"NativeBase.Text": {
justifyContent: 'center',
'.badge': {
'NativeBase.Badge': {
'NativeBase.Text': {
fontSize: 11,
fontWeight: platform === "ios" ? "600" : undefined,
fontWeight: platform === PLATFORM.IOS ? '600' : undefined,
lineHeight: 14
},
top: -3,
alignSelf: "center",
alignSelf: 'center',
left: 10,
zIndex: 99,
height: 18,
padding: 1.7,
paddingHorizontal: 3
},
"NativeBase.Icon": {
'NativeBase.Icon': {
marginTop: -18
}
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.tabBarTextColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.tabBarTextColor
},
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.tabBarTextColor,
fontSize: variables.tabBarTextSize,
lineHeight: 16
}
},
backgroundColor: Platform.OS === "android"
? variables.footerDefaultBg
: undefined,
flexDirection: "row",
justifyContent: "space-between",
backgroundColor:
Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined,
flexDirection: 'row',
justifyContent: 'space-between',
flex: 1,
alignSelf: "stretch"
alignSelf: 'stretch'
};
return footerTabTheme;

56
native-base-theme/components/Form.js
View file

@ -1,85 +1,81 @@
// @flow
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => {
const platform = variables.platform;
export default () => {
const theme = {
"NativeBase.Item": {
".fixedLabel": {
"NativeBase.Label": {
'NativeBase.Item': {
'.fixedLabel': {
'NativeBase.Label': {
paddingLeft: null
},
marginLeft: 15
},
".inlineLabel": {
"NativeBase.Label": {
'.inlineLabel': {
'NativeBase.Label': {
paddingLeft: null
},
marginLeft: 15
},
".placeholderLabel": {
"NativeBase.Input": {}
'.placeholderLabel': {
'NativeBase.Input': {}
},
".stackedLabel": {
"NativeBase.Label": {
'.stackedLabel': {
'NativeBase.Label': {
top: 5,
paddingLeft: null
},
"NativeBase.Input": {
'NativeBase.Input': {
paddingLeft: null,
marginLeft: null
},
"NativeBase.Icon": {
'NativeBase.Icon': {
marginTop: 36
},
marginLeft: 15
},
".floatingLabel": {
"NativeBase.Input": {
'.floatingLabel': {
'NativeBase.Input': {
paddingLeft: null,
top: 10,
marginLeft: null
},
"NativeBase.Label": {
'NativeBase.Label': {
left: 0,
top: 6
},
"NativeBase.Icon": {
'NativeBase.Icon': {
top: 6
},
marginTop: 15,
marginLeft: 15
},
".regular": {
"NativeBase.Label": {
'.regular': {
'NativeBase.Label': {
left: 0
},
marginLeft: 0
},
".rounded": {
"NativeBase.Label": {
'.rounded': {
'NativeBase.Label': {
left: 0
},
marginLeft: 0
},
".underline": {
"NativeBase.Label": {
'.underline': {
'NativeBase.Label': {
left: 0,
top: 0,
position: "relative"
position: 'relative'
},
"NativeBase.Input": {
'NativeBase.Input': {
left: -15
},
marginLeft: 15
},
".last": {
'.last': {
marginLeft: 0,
paddingLeft: 15
},
"NativeBase.Label": {
'NativeBase.Label': {
paddingRight: 5
},
marginLeft: 15

4
native-base-theme/components/H1.js
View file

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

4
native-base-theme/components/H2.js
View file

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

2
native-base-theme/components/H3.js
View file

@ -1,6 +1,6 @@
// @flow
import variable from "./../variables/platform";
import variable from './../variables/platform';
export default (variables /* : * */ = variable) => {
const h3Theme = {

321
native-base-theme/components/Header.js
View file

@ -1,65 +1,70 @@
// @flow
import { PixelRatio, StatusBar } from "react-native";
import { PixelRatio, StatusBar } from 'react-native';
import variable from "./../variables/platform";
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": {
'.span': {
height: 128,
"NativeBase.Left": {
alignSelf: "flex-start"
'NativeBase.Left': {
alignSelf: 'flex-start'
},
"NativeBase.Body": {
alignSelf: "flex-end",
alignItems: "flex-start",
justifyContent: "center",
'NativeBase.Body': {
alignSelf: 'flex-end',
alignItems: 'flex-start',
justifyContent: 'center',
paddingBottom: 26
},
"NativeBase.Right": {
alignSelf: "flex-start"
'NativeBase.Right': {
alignSelf: 'flex-start'
}
},
".hasSubtitle": {
"NativeBase.Body": {
"NativeBase.Title": {
'.hasSubtitle': {
'NativeBase.Body': {
'NativeBase.Title': {
fontSize: variables.titleFontSize - 2,
fontFamily: variables.titleFontfamily,
textAlign: "center",
fontWeight: "500",
textAlign: 'center',
fontWeight: '500',
paddingBottom: 3
},
"NativeBase.Subtitle": {
'NativeBase.Subtitle': {
fontSize: variables.subTitleFontSize,
fontFamily: variables.titleFontfamily,
color: variables.subtitleColor,
textAlign: "center"
textAlign: 'center'
}
}
},
".transparent": {
backgroundColor: "transparent",
borderBottomColor: "transparent",
'.transparent': {
backgroundColor: 'transparent',
borderBottomColor: 'transparent',
elevation: 0,
shadowColor: null,
shadowOffset: null,
shadowRadius: null,
shadowOpacity: null,
paddingTop: platform === "android" ? StatusBar.currentHeight : undefined,
height: platform === "android" ? variables.toolbarHeight + StatusBar.currentHeight : variables.toolbarHeight
paddingTop:
platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined,
height:
platform === PLATFORM.ANDROID
? variables.toolbarHeight + StatusBar.currentHeight
: variables.toolbarHeight
},
".noShadow": {
'.noShadow': {
elevation: 0,
shadowColor: null,
shadowOffset: null,
shadowRadius: null,
shadowOpacity: null
},
".hasTabs": {
'.hasTabs': {
elevation: 0,
shadowColor: null,
shadowOffset: null,
@ -67,131 +72,133 @@ export default (variables /*: * */ = variable) => {
shadowOpacity: null,
borderBottomWidth: null
},
".hasSegment": {
'.hasSegment': {
elevation: 0,
shadowColor: null,
shadowOffset: null,
shadowRadius: null,
shadowOpacity: null,
borderBottomWidth: null,
"NativeBase.Left": {
'NativeBase.Left': {
flex: 0.3
},
"NativeBase.Right": {
'NativeBase.Right': {
flex: 0.3
},
"NativeBase.Body": {
'NativeBase.Body': {
flex: 1,
"NativeBase.Segment": {
'NativeBase.Segment': {
marginRight: 0,
alignSelf: "center",
"NativeBase.Button": {
alignSelf: 'center',
'NativeBase.Button': {
paddingLeft: 0,
paddingRight: 0
}
}
}
},
".noLeft": {
"NativeBase.Left": {
width: platform === "ios" ? undefined : 0,
flex: platform === "ios" ? 1 : 0
'.noLeft': {
'NativeBase.Left': {
width: platform === PLATFORM.IOS ? undefined : 0,
flex: platform === PLATFORM.IOS ? 1 : 0
},
"NativeBase.Body": {
"NativeBase.Title": {
paddingLeft: platform === "ios" ? undefined : 10
'NativeBase.Body': {
'NativeBase.Title': {
paddingLeft: platform === PLATFORM.IOS ? undefined : 10
},
"NativeBase.Subtitle": {
paddingLeft: platform === "ios" ? undefined : 10
'NativeBase.Subtitle': {
paddingLeft: platform === PLATFORM.IOS ? undefined : 10
}
}
},
"NativeBase.Button": {
justifyContent: "center",
alignSelf: "center",
alignItems: "center",
".transparent": {
"NativeBase.Text": {
'NativeBase.Button': {
justifyContent: 'center',
alignSelf: 'center',
alignItems: 'center',
'.transparent': {
'NativeBase.Text': {
color: variables.toolbarBtnTextColor,
fontWeight: "600"
fontWeight: '600'
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.toolbarBtnColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.toolbarBtnColor
},
paddingHorizontal: variables.buttonPadding
},
paddingHorizontal: 15
},
".searchBar": {
"NativeBase.Item": {
"NativeBase.Icon": {
backgroundColor: "transparent",
'.searchBar': {
'NativeBase.Item': {
'NativeBase.Icon': {
backgroundColor: 'transparent',
color: variables.dropdownLinkColor,
fontSize: variables.toolbarSearchIconSize,
alignItems: "center",
alignItems: 'center',
marginTop: 2,
paddingRight: 10,
paddingLeft: 10
},
"NativeBase.IconNB": {
backgroundColor: "transparent",
'NativeBase.IconNB': {
backgroundColor: 'transparent',
color: null,
alignSelf: "center"
alignSelf: 'center'
},
"NativeBase.Input": {
alignSelf: "center",
'NativeBase.Input': {
alignSelf: 'center',
lineHeight: null,
height: variables.searchBarInputHeight
},
alignSelf: "center",
alignItems: "center",
justifyContent: "flex-start",
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'flex-start',
flex: 1,
height: variables.searchBarHeight,
borderColor: "transparent",
borderColor: 'transparent',
backgroundColor: variables.toolbarInputColor
},
"NativeBase.Button": {
".transparent": {
"NativeBase.Text": {
fontWeight: "500"
'NativeBase.Button': {
'.transparent': {
'NativeBase.Text': {
fontWeight: '500'
},
paddingHorizontal: null,
paddingLeft: platform === "ios" ? 10 : null
paddingLeft: platform === PLATFORM.IOS ? 10 : null
},
paddingHorizontal: platform === "ios" ? undefined : null,
width: platform === "ios" ? undefined : 0,
height: platform === "ios" ? undefined : 0
paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
width: platform === PLATFORM.IOS ? undefined : 0,
height: platform === PLATFORM.IOS ? undefined : 0
}
},
".rounded": {
"NativeBase.Item": {
'.rounded': {
'NativeBase.Item': {
borderRadius:
platform === "ios" && platformStyle !== "material" ? 25 : 3
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? 25
: 3
}
},
"NativeBase.Left": {
"NativeBase.Button": {
".hasText": {
'NativeBase.Left': {
'NativeBase.Button': {
'.hasText': {
marginLeft: -10,
height: 30,
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize,
marginTop: 2,
marginRight: 5,
marginLeft: 2
},
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.toolbarBtnTextColor,
fontSize: platform === "ios" ? 17 : 0,
fontSize: platform === PLATFORM.IOS ? 17 : 0,
marginLeft: 7,
lineHeight: 19.5
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize,
marginTop: 2,
@ -199,13 +206,16 @@ export default (variables /*: * */ = variable) => {
marginLeft: 2
}
},
".transparent": {
'.transparent': {
marginLeft:
platform === "ios" && platformStyle !== "material" ? -3 : 0,
"NativeBase.Icon": {
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? -3
: 0,
'NativeBase.Icon': {
color: variables.toolbarBtnColor,
fontSize:
platform === "ios" && variables.platformStyle !== "material"
platform === PLATFORM.IOS &&
variables.platformStyle !== PLATFORM.MATERIAL
? variables.iconHeaderSize + 1
: variables.iconHeaderSize,
marginTop: 0,
@ -213,10 +223,11 @@ export default (variables /*: * */ = variable) => {
marginLeft: 1,
paddingTop: 1
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.toolbarBtnColor,
fontSize:
platform === "ios" && variables.platformStyle !== "material"
platform === PLATFORM.IOS &&
variables.platformStyle !== PLATFORM.MATERIAL
? variables.iconHeaderSize + 1
: variables.iconHeaderSize - 2,
marginTop: 0,
@ -224,18 +235,20 @@ export default (variables /*: * */ = variable) => {
marginLeft: 1,
paddingTop: 1
},
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.toolbarBtnTextColor,
fontSize: platform === "ios" ? 17 : 0,
top: platform === "ios" ? 1 : -1.5,
fontSize: platform === PLATFORM.IOS ? 17 : 0,
top: platform === PLATFORM.IOS ? 1 : -1.5,
paddingLeft:
platform === "ios" && platformStyle !== "material" ? 2 : 5,
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? 2
: 5,
paddingRight:
platform === "ios" && platformStyle !== "material"
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? undefined
: 10
},
backgroundColor: "transparent",
backgroundColor: 'transparent',
borderColor: null,
elevation: 0,
shadowColor: null,
@ -243,66 +256,72 @@ export default (variables /*: * */ = variable) => {
shadowRadius: null,
shadowOpacity: null
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.toolbarBtnColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.toolbarBtnColor
},
alignSelf: null,
paddingRight: variables.buttonPadding,
paddingLeft: platform === "ios" && platformStyle !== "material" ? 4 : 8
paddingLeft:
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? 4
: 8
},
flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.4,
alignSelf: "center",
alignItems: "flex-start"
flex:
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? 1
: 0.4,
alignSelf: 'center',
alignItems: 'flex-start'
},
"NativeBase.Body": {
'NativeBase.Body': {
flex: 1,
alignItems:
platform === "ios" && platformStyle !== "material"
? "center"
: "flex-start",
alignSelf: "center",
"NativeBase.Segment": {
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
? 'center'
: 'flex-start',
alignSelf: 'center',
'NativeBase.Segment': {
borderWidth: 0,
alignSelf: "flex-end",
marginRight: platform === "ios" ? -40 : -55
alignSelf: 'flex-end',
marginRight: platform === PLATFORM.IOS ? -40 : -55
},
"NativeBase.Button": {
alignSelf: "center",
".transparent": {
backgroundColor: "transparent"
'NativeBase.Button': {
alignSelf: 'center',
'.transparent': {
backgroundColor: 'transparent'
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.toolbarBtnColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.toolbarBtnColor
},
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.inverseTextColor,
backgroundColor: "transparent"
backgroundColor: 'transparent'
}
}
},
"NativeBase.Right": {
"NativeBase.Button": {
".hasText": {
'NativeBase.Right': {
'NativeBase.Button': {
'.hasText': {
height: 30,
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize - 2,
marginTop: 2,
marginRight: 2,
marginLeft: 5
},
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.toolbarBtnTextColor,
fontSize: platform === "ios" ? 17 : 14,
fontSize: platform === PLATFORM.IOS ? 17 : 14,
lineHeight: 19.5
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize - 2,
marginTop: 2,
@ -310,13 +329,13 @@ export default (variables /*: * */ = variable) => {
marginLeft: 5
}
},
".transparent": {
marginRight: platform === "ios" ? -9 : -5,
'.transparent': {
marginRight: platform === PLATFORM.IOS ? -9 : -5,
paddingLeft: 15,
paddingRight: 12,
paddingHorizontal: 15,
borderRadius: 50,
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize - 2,
marginTop: 0,
@ -324,7 +343,7 @@ export default (variables /*: * */ = variable) => {
marginRight: 0
// paddingTop: 0
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.toolbarBtnColor,
fontSize: variables.iconHeaderSize - 2,
marginTop: 0,
@ -332,16 +351,17 @@ export default (variables /*: * */ = variable) => {
marginRight: 0
// paddingTop: 0
},
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.toolbarBtnTextColor,
fontSize: platform === "ios" ? 17 : 14,
top: platform === "ios" ? 1 : -1.5,
fontSize: platform === PLATFORM.IOS ? 17 : 14,
top: platform === PLATFORM.IOS ? 1 : -1.5,
paddingRight:
platform === "ios" && variables.platformStyle !== "material"
platform === PLATFORM.IOS &&
variables.platformStyle !== PLATFORM.MATERIAL
? 0
: undefined
},
backgroundColor: "transparent",
backgroundColor: 'transparent',
borderColor: null,
elevation: 0,
shadowColor: null,
@ -349,42 +369,47 @@ export default (variables /*: * */ = variable) => {
shadowRadius: null,
shadowOpacity: null
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.toolbarBtnColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.toolbarBtnColor
},
alignSelf: null,
paddingHorizontal: variables.buttonPadding
},
flex: 1,
alignSelf: "center",
alignItems: "flex-end",
flexDirection: "row",
justifyContent: "flex-end"
alignSelf: 'center',
alignItems: 'flex-end',
flexDirection: 'row',
justifyContent: 'flex-end'
},
backgroundColor: variables.toolbarDefaultBg,
flexDirection: "row",
flexDirection: 'row',
// paddingHorizontal: 10,
paddingLeft:
platform === "ios" && variables.platformStyle !== "material" ? 6 : 10,
platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
? 6
: 10,
paddingRight: 10,
justifyContent: "center",
paddingTop: platform === "ios" ? 18 : 0,
justifyContent: 'center',
paddingTop: platform === PLATFORM.IOS ? 18 : 0,
borderBottomWidth:
platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0,
platform === PLATFORM.IOS
? 1 / PixelRatio.getPixelSizeForLayoutSize(1)
: 0,
borderBottomColor: variables.toolbarDefaultBorder,
height:
variables.platform === "ios" && variables.platformStyle === "material"
variables.platform === PLATFORM.IOS &&
variables.platformStyle === PLATFORM.MATERIAL
? variables.toolbarHeight + 10
: variables.toolbarHeight,
elevation: 3,
shadowColor: platformStyle === "material" ? "#000" : undefined,
shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
shadowOffset:
platformStyle === "material" ? { width: 0, height: 2 } : undefined,
shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
shadowRadius: platformStyle === "material" ? 1.2 : undefined,
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

4
native-base-theme/components/Icon.js
View file

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

2
native-base-theme/components/Input.js
View file

@ -5,7 +5,7 @@ import variable from './../variables/platform';
export default (variables /* : * */ = variable) => {
const inputTheme = {
'.multiline': {
height: null,
height: null
},
height: variables.inputHeightBase,
color: variables.inputColor,

66
native-base-theme/components/InputGroup.js
View file

@ -1,20 +1,20 @@
// @flow
import variable from "./../variables/platform";
import variable from './../variables/platform';
export default (variables /* : * */ = variable) => {
const inputGroupTheme = {
"NativeBase.Icon": {
'NativeBase.Icon': {
fontSize: 24,
color: variables.sTabBarActiveTextColor,
paddingHorizontal: 5
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
fontSize: 24,
color: variables.sTabBarActiveTextColor,
paddingHorizontal: 5
},
"NativeBase.Input": {
'NativeBase.Input': {
height: variables.inputHeightBase,
color: variables.inputColor,
paddingLeft: 5,
@ -23,11 +23,11 @@ export default (variables /*: * */ = variable) => {
fontSize: variables.inputFontSize,
lineHeight: variables.inputLineHeight
},
".underline": {
".success": {
'.underline': {
'.success': {
borderColor: variables.inputSuccessBorderColor
},
".error": {
'.error': {
borderColor: variables.inputErrorBorderColor
},
paddingLeft: 5,
@ -37,22 +37,22 @@ export default (variables /*: * */ = variable) => {
borderLeftWidth: 0,
borderColor: variables.inputBorderColor
},
".regular": {
".success": {
'.regular': {
'.success': {
borderColor: variables.inputSuccessBorderColor
},
".error": {
'.error': {
borderColor: variables.inputErrorBorderColor
},
paddingLeft: 5,
borderWidth: variables.borderWidth,
borderColor: variables.inputBorderColor
},
".rounded": {
".success": {
'.rounded': {
'.success': {
borderColor: variables.inputSuccessBorderColor
},
".error": {
'.error': {
borderColor: variables.inputErrorBorderColor
},
paddingLeft: 5,
@ -61,21 +61,21 @@ export default (variables /*: * */ = variable) => {
borderColor: variables.inputBorderColor
},
".success": {
"NativeBase.Icon": {
'.success': {
'NativeBase.Icon': {
color: variables.inputSuccessBorderColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.inputSuccessBorderColor
},
".rounded": {
'.rounded': {
borderRadius: 30,
borderColor: variables.inputSuccessBorderColor
},
".regular": {
'.regular': {
borderColor: variables.inputSuccessBorderColor
},
".underline": {
'.underline': {
borderWidth: variables.borderWidth,
borderTopWidth: 0,
borderRightWidth: 0,
@ -85,21 +85,21 @@ export default (variables /*: * */ = variable) => {
borderColor: variables.inputSuccessBorderColor
},
".error": {
"NativeBase.Icon": {
'.error': {
'NativeBase.Icon': {
color: variables.inputErrorBorderColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.inputErrorBorderColor
},
".rounded": {
'.rounded': {
borderRadius: 30,
borderColor: variables.inputErrorBorderColor
},
".regular": {
'.regular': {
borderColor: variables.inputErrorBorderColor
},
".underline": {
'.underline': {
borderWidth: variables.borderWidth,
borderTopWidth: 0,
borderRightWidth: 0,
@ -108,12 +108,12 @@ export default (variables /*: * */ = variable) => {
},
borderColor: variables.inputErrorBorderColor
},
".disabled": {
"NativeBase.Icon": {
color: "#384850"
'.disabled': {
'NativeBase.Icon': {
color: '#384850'
},
"NativeBase.IconNB": {
color: "#384850"
'NativeBase.IconNB': {
color: '#384850'
}
},
@ -123,9 +123,9 @@ export default (variables /*: * */ = variable) => {
borderRightWidth: 0,
borderLeftWidth: 0,
borderColor: variables.inputBorderColor,
backgroundColor: "transparent",
flexDirection: "row",
alignItems: "center"
backgroundColor: 'transparent',
flexDirection: 'row',
alignItems: 'center'
};
return inputGroupTheme;

141
native-base-theme/components/Item.js
View file

@ -1,37 +1,38 @@
// @flow
import { Platform } from "react-native";
import { Platform } from 'react-native';
import variable from "./../variables/platform";
import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /* : * */ = variable) => {
const itemTheme = {
".floatingLabel": {
"NativeBase.Input": {
'.floatingLabel': {
'NativeBase.Input': {
height: 50,
top: 8,
paddingTop: 3,
paddingBottom: 7,
".multiline": {
'.multiline': {
minHeight: variables.inputHeightBase,
paddingTop: Platform.OS === "ios" ? 10 : 3,
paddingBottom: Platform.OS === "ios" ? 14 : 10
paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3,
paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10
}
},
"NativeBase.Label": {
'NativeBase.Label': {
paddingTop: 5
},
"NativeBase.Icon": {
'NativeBase.Icon': {
top: 6,
paddingTop: 8
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
top: 6,
paddingTop: 8
}
},
".fixedLabel": {
"NativeBase.Label": {
'.fixedLabel': {
'NativeBase.Label': {
position: null,
top: null,
left: null,
@ -41,43 +42,43 @@ export default (variables /*: * */ = variable) => {
width: null,
fontSize: variables.inputFontSize
},
"NativeBase.Input": {
'NativeBase.Input': {
flex: 2,
fontSize: variables.inputFontSize
}
},
".stackedLabel": {
"NativeBase.Label": {
'.stackedLabel': {
'NativeBase.Label': {
position: null,
top: null,
left: null,
right: null,
paddingTop: 5,
alignSelf: "flex-start",
alignSelf: 'flex-start',
fontSize: variables.inputFontSize - 2
},
"NativeBase.Icon": {
'NativeBase.Icon': {
marginTop: 36
},
"NativeBase.Input": {
alignSelf: Platform.OS === "ios" ? "stretch" : "flex-start",
'NativeBase.Input': {
alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start',
flex: 1,
width: Platform.OS === "ios" ? null : variables.deviceWidth - 25,
width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25,
fontSize: variables.inputFontSize,
lineHeight: variables.inputLineHeight - 6,
".secureTextEntry": {
fontSize: variables.inputFontSize - 4
'.secureTextEntry': {
fontSize: variables.inputFontSize
},
".multiline": {
paddingTop: Platform.OS === "ios" ? 9 : undefined,
paddingBottom: Platform.OS === "ios" ? 9 : undefined
'.multiline': {
paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined,
paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined
}
},
flexDirection: null,
minHeight: variables.inputHeightBase + 15
},
".inlineLabel": {
"NativeBase.Label": {
'.inlineLabel': {
'NativeBase.Label': {
position: null,
top: null,
left: null,
@ -87,43 +88,43 @@ export default (variables /*: * */ = variable) => {
width: null,
fontSize: variables.inputFontSize
},
"NativeBase.Input": {
'NativeBase.Input': {
paddingLeft: 5,
fontSize: variables.inputFontSize
},
flexDirection: "row"
flexDirection: 'row'
},
"NativeBase.Label": {
'NativeBase.Label': {
fontSize: variables.inputFontSize,
color: variables.inputColorPlaceholder,
paddingRight: 5
},
"NativeBase.Icon": {
'NativeBase.Icon': {
fontSize: 24,
paddingRight: 8
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
fontSize: 24,
paddingRight: 8
},
"NativeBase.Input": {
".multiline": {
'NativeBase.Input': {
'.multiline': {
height: null
},
height: variables.inputHeightBase,
color: variables.inputColor,
flex: 1,
top: Platform.OS === "ios" ? 1.5 : undefined,
top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined,
fontSize: variables.inputFontSize
},
".underline": {
"NativeBase.Input": {
'.underline': {
'NativeBase.Input': {
paddingLeft: 15
},
".success": {
'.success': {
borderColor: variables.inputSuccessBorderColor
},
".error": {
'.error': {
borderColor: variables.inputErrorBorderColor
},
borderWidth: variables.borderWidth * 2,
@ -132,33 +133,33 @@ export default (variables /*: * */ = variable) => {
borderLeftWidth: 0,
borderColor: variables.inputBorderColor
},
".regular": {
"NativeBase.Input": {
'.regular': {
'NativeBase.Input': {
paddingLeft: 8
},
"NativeBase.Icon": {
'NativeBase.Icon': {
paddingLeft: 10
},
".success": {
'.success': {
borderColor: variables.inputSuccessBorderColor
},
".error": {
'.error': {
borderColor: variables.inputErrorBorderColor
},
borderWidth: variables.borderWidth * 2,
borderColor: variables.inputBorderColor
},
".rounded": {
"NativeBase.Input": {
'.rounded': {
'NativeBase.Input': {
paddingLeft: 8
},
"NativeBase.Icon": {
'NativeBase.Icon': {
paddingLeft: 10
},
".success": {
'.success': {
borderColor: variables.inputSuccessBorderColor
},
".error": {
'.error': {
borderColor: variables.inputErrorBorderColor
},
borderWidth: variables.borderWidth * 2,
@ -166,21 +167,21 @@ export default (variables /*: * */ = variable) => {
borderColor: variables.inputBorderColor
},
".success": {
"NativeBase.Icon": {
'.success': {
'NativeBase.Icon': {
color: variables.inputSuccessBorderColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.inputSuccessBorderColor
},
".rounded": {
'.rounded': {
borderRadius: 30,
borderColor: variables.inputSuccessBorderColor
},
".regular": {
'.regular': {
borderColor: variables.inputSuccessBorderColor
},
".underline": {
'.underline': {
borderWidth: variables.borderWidth * 2,
borderTopWidth: 0,
borderRightWidth: 0,
@ -190,21 +191,21 @@ export default (variables /*: * */ = variable) => {
borderColor: variables.inputSuccessBorderColor
},
".error": {
"NativeBase.Icon": {
'.error': {
'NativeBase.Icon': {
color: variables.inputErrorBorderColor
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
color: variables.inputErrorBorderColor
},
".rounded": {
'.rounded': {
borderRadius: 30,
borderColor: variables.inputErrorBorderColor
},
".regular": {
'.regular': {
borderColor: variables.inputErrorBorderColor
},
".underline": {
'.underline': {
borderWidth: variables.borderWidth * 2,
borderTopWidth: 0,
borderRightWidth: 0,
@ -213,15 +214,15 @@ export default (variables /*: * */ = variable) => {
},
borderColor: variables.inputErrorBorderColor
},
".disabled": {
"NativeBase.Icon": {
color: "#384850"
'.disabled': {
'NativeBase.Icon': {
color: '#384850'
},
"NativeBase.IconNB": {
color: "#384850"
'NativeBase.IconNB': {
color: '#384850'
}
},
".picker": {
'.picker': {
marginLeft: 0
},
@ -230,9 +231,9 @@ export default (variables /*: * */ = variable) => {
borderRightWidth: 0,
borderLeftWidth: 0,
borderColor: variables.inputBorderColor,
backgroundColor: "transparent",
flexDirection: "row",
alignItems: "center",
backgroundColor: 'transparent',
flexDirection: 'row',
alignItems: 'center',
marginLeft: 2
};

6
native-base-theme/components/Label.js
View file

@ -1,10 +1,8 @@
// @flow
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => {
export default () => {
const labelTheme = {
".focused": {
'.focused': {
width: 0
},
fontSize: 17

6
native-base-theme/components/Left.js
View file

@ -1,12 +1,10 @@
// @flow
import variable from './../variables/platform';
export default (variables /*: * */ = variable) => {
export default () => {
const leftTheme = {
flex: 1,
alignSelf: 'center',
alignItems: 'flex-start',
alignItems: 'flex-start'
};
return leftTheme;

322
native-base-theme/components/ListItem.js
View file

@ -1,244 +1,246 @@
// @flow
import { Platform, PixelRatio } from "react-native";
import { Platform, PixelRatio } from 'react-native';
import pickerTheme from "./Picker";
import variable from "./../variables/platform";
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": {
'NativeBase.Text': {
color: variables.listItemSelected
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.listItemSelected
}
};
const listItemTheme = {
"NativeBase.InputGroup": {
"NativeBase.Icon": {
'NativeBase.InputGroup': {
'NativeBase.Icon': {
paddingRight: 5
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
paddingRight: 5
},
"NativeBase.Input": {
'NativeBase.Input': {
paddingHorizontal: 5
},
flex: 1,
borderWidth: null,
margin: -10,
borderBottomColor: "transparent"
borderBottomColor: 'transparent'
},
".searchBar": {
"NativeBase.Item": {
"NativeBase.Icon": {
backgroundColor: "transparent",
'.searchBar': {
'NativeBase.Item': {
'NativeBase.Icon': {
backgroundColor: 'transparent',
color: variables.dropdownLinkColor,
fontSize:
platform === "ios"
platform === PLATFORM.IOS
? variables.iconFontSize - 10
: variables.iconFontSize - 5,
alignItems: "center",
alignItems: 'center',
marginTop: 2,
paddingRight: 8
},
"NativeBase.IconNB": {
backgroundColor: "transparent",
'NativeBase.IconNB': {
backgroundColor: 'transparent',
color: null,
alignSelf: "center"
alignSelf: 'center'
},
"NativeBase.Input": {
alignSelf: "center"
'NativeBase.Input': {
alignSelf: 'center'
},
alignSelf: "center",
alignItems: "center",
justifyContent: "flex-start",
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'flex-start',
flex: 1,
height: platform === "ios" ? 30 : 40,
borderColor: "transparent",
backgroundColor: "#fff",
height: platform === PLATFORM.IOS ? 30 : 40,
borderColor: 'transparent',
backgroundColor: '#fff',
borderRadius: 5
},
"NativeBase.Button": {
".transparent": {
"NativeBase.Text": {
fontWeight: "500"
'NativeBase.Button': {
'.transparent': {
'NativeBase.Text': {
fontWeight: '500'
},
paddingHorizontal: null,
paddingLeft: platform === "ios" ? 10 : null
paddingLeft: platform === PLATFORM.IOS ? 10 : null
},
paddingHorizontal: platform === "ios" ? undefined : null,
width: platform === "ios" ? undefined : 0,
height: platform === "ios" ? undefined : 0
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": {
'NativeBase.CheckBox': {
marginLeft: -10,
marginRight: 10
},
".first": {
".itemHeader": {
'.first': {
'.itemHeader': {
paddingTop: variables.listItemPadding + 3
}
},
".itemHeader": {
".first": {
'.itemHeader': {
'.first': {
paddingTop: variables.listItemPadding + 3
},
borderBottomWidth: platform === "ios" ? variables.borderWidth : null,
borderBottomWidth:
platform === PLATFORM.IOS ? variables.borderWidth : null,
marginLeft: null,
padding: variables.listItemPadding,
paddingLeft: variables.listItemPadding + 5,
paddingTop:
platform === "ios" ? variables.listItemPadding + 25 : undefined,
platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined,
paddingBottom:
platform === "android" ? variables.listItemPadding + 20 : undefined,
flexDirection: "row",
platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined,
flexDirection: 'row',
borderColor: variables.listBorderColor,
"NativeBase.Text": {
'NativeBase.Text': {
fontSize: 14,
color: platform === "ios" ? undefined : variables.listNoteColor
color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor
}
},
".itemDivider": {
'.itemDivider': {
borderBottomWidth: null,
marginLeft: null,
padding: variables.listItemPadding,
paddingLeft: variables.listItemPadding + 5,
backgroundColor: variables.listDividerBg,
flexDirection: "row",
flexDirection: 'row',
borderColor: variables.listBorderColor
},
".selected": {
"NativeBase.Left": {
'.selected': {
'NativeBase.Left': {
...selectedStyle
},
"NativeBase.Body": {
'NativeBase.Body': {
...selectedStyle
},
"NativeBase.Right": {
'NativeBase.Right': {
...selectedStyle
},
...selectedStyle
},
"NativeBase.Left": {
"NativeBase.Body": {
"NativeBase.Text": {
".note": {
'NativeBase.Left': {
'NativeBase.Body': {
'NativeBase.Text': {
'.note': {
color: variables.listNoteColor,
fontWeight: "200"
fontWeight: '200'
},
fontWeight: "600"
fontWeight: '600'
},
marginLeft: 10,
alignItems: null,
alignSelf: null
},
"NativeBase.Icon": {
'NativeBase.Icon': {
width: variables.iconFontSize - 10,
fontSize: variables.iconFontSize - 10
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
width: variables.iconFontSize - 10,
fontSize: variables.iconFontSize - 10
},
"NativeBase.Text": {
alignSelf: "center"
'NativeBase.Text': {
alignSelf: 'center'
},
flexDirection: "row"
flexDirection: 'row'
},
"NativeBase.Body": {
"NativeBase.Text": {
'NativeBase.Body': {
'NativeBase.Text': {
marginHorizontal: variables.listItemPadding,
".note": {
'.note': {
color: variables.listNoteColor,
fontWeight: "200"
fontWeight: '200'
}
},
alignSelf: null,
alignItems: null
},
"NativeBase.Right": {
"NativeBase.Badge": {
'NativeBase.Right': {
'NativeBase.Badge': {
alignSelf: null
},
"NativeBase.PickerNB": {
"NativeBase.Button": {
'NativeBase.PickerNB': {
'NativeBase.Button': {
marginRight: -15,
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.topTabBarActiveTextColor
}
}
},
"NativeBase.Button": {
'NativeBase.Button': {
alignSelf: null,
".transparent": {
"NativeBase.Text": {
'.transparent': {
'NativeBase.Text': {
color: variables.topTabBarActiveTextColor
}
}
},
"NativeBase.Icon": {
'NativeBase.Icon': {
alignSelf: null,
fontSize: variables.iconFontSize - 8,
color: "#c9c8cd"
color: '#c9c8cd'
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
alignSelf: null,
fontSize: variables.iconFontSize - 8,
color: "#c9c8cd"
color: '#c9c8cd'
},
"NativeBase.Text": {
".note": {
'NativeBase.Text': {
'.note': {
color: variables.listNoteColor,
fontWeight: "200"
fontWeight: '200'
},
alignSelf: null
},
"NativeBase.Thumbnail": {
'NativeBase.Thumbnail': {
alignSelf: null
},
"NativeBase.Image": {
'NativeBase.Image': {
alignSelf: null
},
"NativeBase.Radio": {
'NativeBase.Radio': {
alignSelf: null
},
"NativeBase.Checkbox": {
'NativeBase.Checkbox': {
alignSelf: null
},
"NativeBase.Switch": {
'NativeBase.Switch': {
alignSelf: null
},
padding: null,
flex: 0.28
},
"NativeBase.Text": {
".note": {
'NativeBase.Text': {
'.note': {
color: variables.listNoteColor,
fontWeight: "200"
fontWeight: '200'
},
alignSelf: "center"
alignSelf: 'center'
},
".last": {
'.last': {
marginLeft: -(variables.listItemPadding + 5),
paddingLeft: (variables.listItemPadding + 5) * 2,
top: 1
},
".avatar": {
"NativeBase.Left": {
'.avatar': {
'NativeBase.Left': {
flex: 0,
alignSelf: "flex-start",
alignSelf: 'flex-start',
paddingTop: 14
},
"NativeBase.Body": {
"NativeBase.Text": {
'NativeBase.Body': {
'NativeBase.Text': {
marginLeft: null
},
flex: 1,
@ -247,24 +249,24 @@ export default (variables /*: * */ = variable) => {
borderColor: variables.listBorderColor,
marginLeft: variables.listItemPadding + 5
},
"NativeBase.Right": {
"NativeBase.Text": {
".note": {
'NativeBase.Right': {
'NativeBase.Text': {
'.note': {
fontSize: variables.noteFontSize - 2
}
},
flex: 0,
paddingRight: variables.listItemPadding + 5,
alignSelf: "stretch",
alignSelf: 'stretch',
paddingVertical: variables.listItemPadding,
borderBottomWidth: variables.borderWidth,
borderColor: variables.listBorderColor
},
".noBorder": {
"NativeBase.Body": {
'.noBorder': {
'NativeBase.Body': {
borderBottomWidth: null
},
"NativeBase.Right": {
'NativeBase.Right': {
borderBottomWidth: null
}
},
@ -272,12 +274,12 @@ export default (variables /*: * */ = variable) => {
paddingVertical: null,
paddingRight: null
},
".thumbnail": {
"NativeBase.Left": {
'.thumbnail': {
'NativeBase.Left': {
flex: 0
},
"NativeBase.Body": {
"NativeBase.Text": {
'NativeBase.Body': {
'NativeBase.Text': {
marginLeft: null
},
flex: 1,
@ -286,10 +288,10 @@ export default (variables /*: * */ = variable) => {
borderColor: variables.listBorderColor,
marginLeft: variables.listItemPadding + 5
},
"NativeBase.Right": {
"NativeBase.Button": {
".transparent": {
"NativeBase.Text": {
'NativeBase.Right': {
'NativeBase.Button': {
'.transparent': {
'NativeBase.Text': {
fontSize: variables.listNoteSize,
color: variables.sTabBarActiveTextColor
}
@ -297,18 +299,18 @@ export default (variables /*: * */ = variable) => {
height: null
},
flex: 0,
justifyContent: "center",
alignSelf: "stretch",
justifyContent: 'center',
alignSelf: 'stretch',
paddingRight: variables.listItemPadding + 5,
paddingVertical: variables.listItemPadding + 5,
borderBottomWidth: variables.borderWidth,
borderColor: variables.listBorderColor
},
".noBorder": {
"NativeBase.Body": {
'.noBorder': {
'NativeBase.Body': {
borderBottomWidth: null
},
"NativeBase.Right": {
'NativeBase.Right': {
borderBottomWidth: null
}
},
@ -316,103 +318,103 @@ export default (variables /*: * */ = variable) => {
paddingVertical: null,
paddingRight: null
},
".icon": {
".last": {
"NativeBase.Body": {
'.icon': {
'.last': {
'NativeBase.Body': {
borderBottomWidth: null
},
"NativeBase.Right": {
'NativeBase.Right': {
borderBottomWidth: null
},
borderBottomWidth: variables.borderWidth,
borderColor: variables.listBorderColor
},
"NativeBase.Left": {
"NativeBase.Button": {
"NativeBase.IconNB": {
'NativeBase.Left': {
'NativeBase.Button': {
'NativeBase.IconNB': {
marginHorizontal: null,
fontSize: variables.iconFontSize - 5
},
"NativeBase.Icon": {
'NativeBase.Icon': {
marginHorizontal: null,
fontSize: variables.iconFontSize - 8
},
alignSelf: "center",
alignSelf: 'center',
height: 29,
width: 29,
borderRadius: 6,
paddingVertical: null,
paddingHorizontal: null,
alignItems: "center",
justifyContent: "center"
alignItems: 'center',
justifyContent: 'center'
},
"NativeBase.Icon": {
'NativeBase.Icon': {
width: variables.iconFontSize - 5,
fontSize: variables.iconFontSize - 2
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
width: variables.iconFontSize - 5,
fontSize: variables.iconFontSize - 2
},
paddingRight: variables.listItemPadding + 5,
flex: 0,
height: 44,
justifyContent: "center",
alignItems: "center"
justifyContent: 'center',
alignItems: 'center'
},
"NativeBase.Body": {
"NativeBase.Text": {
'NativeBase.Body': {
'NativeBase.Text': {
marginLeft: null,
fontSize: 17
},
flex: 1,
height: 44,
justifyContent: "center",
justifyContent: 'center',
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
borderColor: variables.listBorderColor
},
"NativeBase.Right": {
"NativeBase.Text": {
textAlign: "center",
color: "#8F8E95",
'NativeBase.Right': {
'NativeBase.Text': {
textAlign: 'center',
color: '#8F8E95',
fontSize: 17
},
"NativeBase.IconNB": {
color: "#C8C7CC",
'NativeBase.IconNB': {
color: '#C8C7CC',
fontSize: variables.iconFontSize - 10,
alignSelf: "center",
alignSelf: 'center',
paddingLeft: 10,
paddingTop: 3
},
"NativeBase.Icon": {
color: "#C8C7CC",
'NativeBase.Icon': {
color: '#C8C7CC',
fontSize: variables.iconFontSize - 10,
alignSelf: "center",
alignSelf: 'center',
paddingLeft: 10,
paddingTop: 3
},
"NativeBase.Switch": {
marginRight: Platform.OS === "ios" ? undefined : -5,
'NativeBase.Switch': {
marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5,
alignSelf: null
},
"NativeBase.PickerNB": {
'NativeBase.PickerNB': {
...pickerTheme()
},
flexDirection: "row",
alignItems: "center",
flexDirection: 'row',
alignItems: 'center',
flex: 0,
alignSelf: "stretch",
alignSelf: 'stretch',
height: 44,
justifyContent: "flex-end",
justifyContent: 'flex-end',
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
borderColor: variables.listBorderColor,
paddingRight: variables.listItemPadding + 5
},
".noBorder": {
"NativeBase.Body": {
'.noBorder': {
'NativeBase.Body': {
borderBottomWidth: null
},
"NativeBase.Right": {
'NativeBase.Right': {
borderBottomWidth: null
}
},
@ -420,18 +422,18 @@ export default (variables /*: * */ = variable) => {
paddingVertical: null,
paddingRight: null,
height: 44,
justifyContent: "center"
justifyContent: 'center'
},
".noBorder": {
'.noBorder': {
borderBottomWidth: null
},
".noIndent": {
'.noIndent': {
marginLeft: null,
padding: variables.listItemPadding,
paddingLeft: variables.listItemPadding + 6
},
alignItems: "center",
flexDirection: "row",
alignItems: 'center',
flexDirection: 'row',
paddingRight: variables.listItemPadding + 6,
paddingVertical: variables.listItemPadding + 3,
marginLeft: variables.listItemPadding + 6,

8
native-base-theme/components/Picker.android.js
View file

@ -1,11 +1,9 @@
// @flow
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => {
export default () => {
const pickerTheme = {
".note": {
color: "#8F8E95"
'.note': {
color: '#8F8E95'
},
// width: 90,
marginRight: -4,

4
native-base-theme/components/Picker.ios.js
View file

@ -1,8 +1,6 @@
// @flow
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => {
export default () => {
const pickerTheme = {};
return pickerTheme;

8
native-base-theme/components/Picker.js
View file

@ -1,11 +1,9 @@
// @flow
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => {
export default () => {
const pickerTheme = {
".note": {
color: "#8F8E95"
'.note': {
color: '#8F8E95'
},
// width: 90,
marginRight: -4,

29
native-base-theme/components/Radio.js
View file

@ -1,26 +1,29 @@
// @flow
import { Platform } from "react-native";
import { Platform } from 'react-native';
import variable from "./../variables/platform";
import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /* : * */ = variable) => {
const radioTheme = {
".selected": {
"NativeBase.IconNB": {
color: Platform.OS === "ios"
'.selected': {
'NativeBase.IconNB': {
color:
Platform.OS === PLATFORM.IOS
? variables.radioColor
: variables.radioSelectedColorAndroid,
lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight,
height: Platform.OS === "ios" ? 20 : undefined
lineHeight:
Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight,
height: Platform.OS === PLATFORM.IOS ? 20 : undefined
}
},
"NativeBase.IconNB": {
color: Platform.OS === "ios" ? "transparent" : undefined,
lineHeight: Platform.OS === "ios"
? undefined
: variables.radioBtnLineHeight,
fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize
'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
}
};

8
native-base-theme/components/Right.js
View file

@ -1,15 +1,13 @@
// @flow
import variable from './../variables/platform';
export default (variables /*: * */ = variable) => {
export default () => {
const rightTheme = {
'NativeBase.Button': {
alignSelf: null,
alignSelf: null
},
flex: 1,
alignSelf: 'center',
alignItems: 'flex-end',
alignItems: 'flex-end'
};
return rightTheme;

35
native-base-theme/components/Segment.js
View file

@ -1,6 +1,7 @@
// @flow
import variable from "./../variables/platform";
import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /* : * */ = variable) => {
const platform = variables.platform;
@ -8,43 +9,43 @@ export default (variables /*: * */ = variable) => {
const segmentTheme = {
height: 45,
borderColor: variables.segmentBorderColorMain,
flexDirection: "row",
justifyContent: "center",
flexDirection: 'row',
justifyContent: 'center',
backgroundColor: variables.segmentBackgroundColor,
"NativeBase.Button": {
alignSelf: "center",
'NativeBase.Button': {
alignSelf: 'center',
borderRadius: 0,
paddingTop: 3,
paddingBottom: 3,
height: 30,
backgroundColor: "transparent",
backgroundColor: 'transparent',
borderWidth: 1,
borderLeftWidth: 0,
borderColor: variables.segmentBorderColor,
elevation: 0,
".active": {
'.active': {
backgroundColor: variables.segmentActiveBackgroundColor,
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.segmentActiveTextColor
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.segmentActiveTextColor
}
},
".first": {
borderTopLeftRadius: platform === "ios" ? 5 : undefined,
borderBottomLeftRadius: platform === "ios" ? 5 : undefined,
'.first': {
borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
borderLeftWidth: 1
},
".last": {
borderTopRightRadius: platform === "ios" ? 5 : undefined,
borderBottomRightRadius: platform === "ios" ? 5 : undefined
'.last': {
borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined,
borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined
},
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.segmentTextColor,
fontSize: 14
},
"NativeBase.Icon": {
'NativeBase.Icon': {
fontSize: 22,
paddingTop: 0,
color: variables.segmentTextColor

18
native-base-theme/components/Separator.js
View file

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

4
native-base-theme/components/Spinner.js
View file

@ -1,8 +1,6 @@
// @flow
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => {
export default () => {
const spinnerTheme = {
height: 80
};

11
native-base-theme/components/Subtitle.js
View file

@ -1,17 +1,18 @@
// @flow
import { Platform } from "react-native";
import { Platform } from 'react-native';
import variable from "./../variables/platform";
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: "center",
paddingLeft: Platform.OS === "ios" ? 4 : 0,
marginLeft: Platform.OS === "ios" ? undefined : -3
textAlign: 'center',
paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3
};
return subtitleTheme;

52
native-base-theme/components/SwipeRow.js
View file

@ -1,47 +1,45 @@
// @flow
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => {
export default () => {
const swipeRowTheme = {
"NativeBase.ListItem": {
".list": {
backgroundColor: "#FFF",
'NativeBase.ListItem': {
'.list': {
backgroundColor: '#FFF'
},
marginLeft: 0,
marginLeft: 0
},
"NativeBase.Left": {
'NativeBase.Left': {
flex: 0,
alignSelf: null,
alignItems: null,
"NativeBase.Button": {
'NativeBase.Button': {
flex: 1,
alignItems: "center",
justifyContent: "center",
alignSelf: "stretch",
borderRadius: 0,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'stretch',
borderRadius: 0
}
},
},
"NativeBase.Right": {
'NativeBase.Right': {
flex: 0,
alignSelf: null,
alignItems: null,
"NativeBase.Button": {
'NativeBase.Button': {
flex: 1,
alignItems: "center",
justifyContent: "center",
alignSelf: "stretch",
borderRadius: 0,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'stretch',
borderRadius: 0
}
},
},
"NativeBase.Button": {
'NativeBase.Button': {
flex: 1,
height: null,
alignItems: "center",
justifyContent: "center",
alignSelf: "stretch",
borderRadius: 0,
},
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'stretch',
borderRadius: 0
}
};
return swipeRowTheme;

6
native-base-theme/components/Switch.js
View file

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

6
native-base-theme/components/Tab.js
View file

@ -1,11 +1,9 @@
// @flow
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => {
export default () => {
const tabTheme = {
flex: 1,
backgroundColor: "#FFF"
backgroundColor: '#FFF'
};
return tabTheme;

42
native-base-theme/components/TabBar.js
View file

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

24
native-base-theme/components/TabContainer.js
View file

@ -1,24 +1,24 @@
// @flow
import variable from "./../variables/platform";
import { Platform } from "react-native";
import { Platform } 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 tabContainerTheme = {
elevation: 3,
height: 50,
flexDirection: "row",
shadowColor: platformStyle === "material" ? "#000" : undefined,
shadowOffset: platformStyle === "material"
? { width: 0, height: 2 }
: undefined,
shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
shadowRadius: platformStyle === "material" ? 1.2 : undefined,
justifyContent: "space-around",
borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0,
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
};

29
native-base-theme/components/TabHeading.js
View file

@ -1,35 +1,36 @@
// @flow
import variable from "./../variables/platform";
import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /* : * */ = variable) => {
const platform = variables.platform;
const tabHeadingTheme = {
flexDirection: "row",
flexDirection: 'row',
backgroundColor: variables.tabDefaultBg,
flex: 1,
alignItems: "center",
justifyContent: "center",
".scrollable": {
alignItems: 'center',
justifyContent: 'center',
'.scrollable': {
paddingHorizontal: 20,
flex: platform === "android" ? 0 : 1,
minWidth: platform === "android" ? undefined : 60
flex: platform === PLATFORM.ANDROID ? 0 : 1,
minWidth: platform === PLATFORM.ANDROID ? undefined : 60
},
"NativeBase.Text": {
'NativeBase.Text': {
color: variables.topTabBarTextColor,
marginHorizontal: 7
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.topTabBarTextColor,
fontSize: platform === "ios" ? 26 : undefined
fontSize: platform === PLATFORM.IOS ? 26 : undefined
},
".active": {
"NativeBase.Text": {
'.active': {
'NativeBase.Text': {
color: variables.topTabBarActiveTextColor,
fontWeight: "600"
fontWeight: '600'
},
"NativeBase.Icon": {
'NativeBase.Icon': {
color: variables.topTabBarActiveTextColor
}
}

6
native-base-theme/components/Text.js
View file

@ -1,14 +1,14 @@
// @flow
import variable from "./../variables/platform";
import variable from './../variables/platform';
export default (variables /* : * */ = variable) => {
const textTheme = {
fontSize: variables.DefaultFontSize,
fontFamily: variables.fontFamily,
color: variables.textColor,
".note": {
color: "#a7a7a7",
'.note': {
color: '#a7a7a7',
fontSize: variables.noteFontSize
}
};

8
native-base-theme/components/Textarea.js
View file

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

20
native-base-theme/components/Thumbnail.js
View file

@ -1,41 +1,39 @@
// @flow
import variable from './../variables/platform';
export default (variables /*: * */ = variable) => {
export default () => {
const thumbnailTheme = {
'.square': {
borderRadius: 0,
'.small': {
width: 36,
height: 36,
borderRadius: 0,
borderRadius: 0
},
'.large': {
width: 80,
height: 80,
borderRadius: 0,
},
borderRadius: 0
}
},
'.small': {
width: 36,
height: 36,
borderRadius: 18,
'.square': {
borderRadius: 0,
},
borderRadius: 0
}
},
'.large': {
width: 80,
height: 80,
borderRadius: 40,
'.square': {
borderRadius: 0,
},
borderRadius: 0
}
},
width: 56,
height: 56,
borderRadius: 28,
borderRadius: 28
};
return thumbnailTheme;

13
native-base-theme/components/Title.js
View file

@ -1,18 +1,19 @@
// @flow
import { Platform } from "react-native";
import { Platform } from 'react-native';
import variable from "./../variables/platform";
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 === "ios" ? "700" : undefined,
textAlign: "center",
paddingLeft: Platform.OS === "ios" ? 4 : 0,
marginLeft: Platform.OS === "ios" ? undefined : -3,
fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined,
textAlign: 'center',
paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3,
paddingTop: 1
};

29
native-base-theme/components/Toast.js
View file

@ -1,36 +1,37 @@
// @flow
import variable from "./../variables/platform";
import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /* : * */ = variable) => {
const platform = variables.platform;
const toastTheme = {
".danger": {
'.danger': {
backgroundColor: variables.brandDanger
},
".warning": {
'.warning': {
backgroundColor: variables.brandWarning
},
".success": {
'.success': {
backgroundColor: variables.brandSuccess
},
backgroundColor: "rgba(0,0,0,0.8)",
borderRadius: platform === "ios" ? 5 : 0,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
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",
'NativeBase.Text': {
color: '#fff',
flex: 1
},
"NativeBase.Button": {
backgroundColor: "transparent",
'NativeBase.Button': {
backgroundColor: 'transparent',
height: 30,
elevation: 0,
"NativeBase.Text": {
'NativeBase.Text': {
fontSize: 14
}
}

4
native-base-theme/components/View.js
View file

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

195
native-base-theme/components/index.js
View file

@ -1,216 +1,218 @@
/* 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";
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": {
'NativeBase.Left': {
...leftTheme(variables)
},
"NativeBase.Right": {
'NativeBase.Right': {
...rightTheme(variables)
},
"NativeBase.Body": {
'NativeBase.Body': {
...bodyTheme(variables)
},
"NativeBase.Header": {
'NativeBase.Header': {
...headerTheme(variables)
},
"NativeBase.Button": {
'NativeBase.Button': {
...buttonTheme(variables)
},
"NativeBase.Title": {
'NativeBase.Title': {
...titleTheme(variables)
},
"NativeBase.Subtitle": {
'NativeBase.Subtitle': {
...subtitleTheme(variables)
},
"NativeBase.InputGroup": {
'NativeBase.InputGroup': {
...inputGroupTheme(variables)
},
"NativeBase.Input": {
'NativeBase.Input': {
...inputTheme(variables)
},
"NativeBase.Badge": {
'NativeBase.Badge': {
...badgeTheme(variables)
},
"NativeBase.CheckBox": {
'NativeBase.CheckBox': {
...checkBoxTheme(variables)
},
"NativeBase.Radio": {
'NativeBase.Radio': {
...radioTheme(variables)
},
"NativeBase.Card": {
'NativeBase.Card': {
...cardTheme(variables)
},
"NativeBase.CardItem": {
'NativeBase.CardItem': {
...cardItemTheme(variables)
},
"NativeBase.Toast": {
'NativeBase.Toast': {
...toastTheme(variables)
},
"NativeBase.H1": {
'NativeBase.H1': {
...h1Theme(variables)
},
"NativeBase.H2": {
'NativeBase.H2': {
...h2Theme(variables)
},
"NativeBase.H3": {
'NativeBase.H3': {
...h3Theme(variables)
},
"NativeBase.Form": {
'NativeBase.Form': {
...formTheme(variables)
},
"NativeBase.Container": {
'NativeBase.Container': {
...containerTheme(variables)
},
"NativeBase.Content": {
'NativeBase.Content': {
...contentTheme(variables)
},
"NativeBase.Footer": {
'NativeBase.Footer': {
...footerTheme(variables)
},
"NativeBase.Tabs": {
'NativeBase.Tabs': {
flex: 1
},
"NativeBase.FooterTab": {
'NativeBase.FooterTab': {
...footerTabTheme(variables)
},
"NativeBase.ListItem": {
'NativeBase.ListItem': {
...listItemTheme(variables)
},
"NativeBase.ListItem1": {
'NativeBase.ListItem1': {
...listItemTheme(variables)
},
"NativeBase.Icon": {
'NativeBase.Icon': {
...iconTheme(variables)
},
"NativeBase.IconNB": {
'NativeBase.IconNB': {
...iconTheme(variables)
},
"NativeBase.Text": {
'NativeBase.Text': {
...textTheme(variables)
},
"NativeBase.Spinner": {
'NativeBase.Spinner': {
...spinnerTheme(variables)
},
"NativeBase.Fab": {
'NativeBase.Fab': {
...fabTheme(variables)
},
"NativeBase.Item": {
'NativeBase.Item': {
...itemTheme(variables)
},
"NativeBase.Label": {
'NativeBase.Label': {
...labelTheme(variables)
},
"NativeBase.Textarea": {
'NativeBase.Textarea': {
...textAreaTheme(variables)
},
"NativeBase.PickerNB": {
'NativeBase.PickerNB': {
...pickerTheme(variables),
"NativeBase.Button": {
"NativeBase.Text": {}
'NativeBase.Button': {
'NativeBase.Text': {}
}
},
"NativeBase.Tab": {
'NativeBase.Tab': {
...tabTheme(variables)
},
"NativeBase.Segment": {
'NativeBase.Segment': {
...segmentTheme(variables)
},
"NativeBase.TabBar": {
'NativeBase.TabBar': {
...tabBarTheme(variables)
},
"NativeBase.ViewNB": {
'NativeBase.ViewNB': {
...viewTheme(variables)
},
"NativeBase.TabHeading": {
'NativeBase.TabHeading': {
...tabHeadingTheme(variables)
},
"NativeBase.TabContainer": {
'NativeBase.TabContainer': {
...tabContainerTheme(variables)
},
"NativeBase.Switch": {
'NativeBase.Switch': {
...switchTheme(variables)
},
"NativeBase.Separator": {
'NativeBase.Separator': {
...separatorTheme(variables)
},
"NativeBase.SwipeRow": {
'NativeBase.SwipeRow': {
...swipeRowTheme(variables)
},
"NativeBase.Thumbnail": {
'NativeBase.Thumbnail': {
...thumbnailTheme(variables)
}
};
@ -218,9 +220,9 @@ export default (variables /*: * */ = variable) => {
const cssifyTheme = (grandparent, parent, parentKey) => {
_.forEach(parent, (style, styleName) => {
if (
styleName.indexOf(".") === 0 &&
styleName.indexOf('.') === 0 &&
parentKey &&
parentKey.indexOf(".") === 0
parentKey.indexOf('.') === 0
) {
if (grandparent) {
if (!grandparent[styleName]) {
@ -230,7 +232,12 @@ export default (variables /*: * */ = variable) => {
}
}
}
if (style && typeof style === "object" && styleName !== "fontVariant" && styleName !== "transform") {
if (
style &&
typeof style === 'object' &&
styleName !== 'fontVariant' &&
styleName !== 'transform'
) {
cssifyTheme(parent, style, styleName);
}
});

260
native-base-theme/variables/commonColor.js
View file

@ -1,79 +1,104 @@
// @flow
import color from "color";
import color from 'color';
import { Platform, Dimensions, PixelRatio } from 'react-native';
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 deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS;
const platformStyle = undefined;
const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
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",
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)",
btnUppercaseAndroidText: true,
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
buttonUppercaseAndroidText: true,
// Badge
badgeBg: "#ED1727",
badgeColor: "#fff",
badgePadding: platform === "ios" ? 3 : 0,
badgeBg: '#ED1727',
badgeColor: '#fff',
badgePadding: platform === PLATFORM.IOS ? 3 : 0,
// Button
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
btnDisabledBg: "#b5b5b5",
buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
buttonDisabledBg: '#b5b5b5',
buttonPadding: 6,
get btnPrimaryBg() {
get buttonPrimaryBg() {
return this.brandPrimary;
},
get btnPrimaryColor() {
get buttonPrimaryColor() {
return this.inverseTextColor;
},
get btnInfoBg() {
get buttonInfoBg() {
return this.brandInfo;
},
get btnInfoColor() {
get buttonInfoColor() {
return this.inverseTextColor;
},
get btnSuccessBg() {
get buttonSuccessBg() {
return this.brandSuccess;
},
get btnSuccessColor() {
get buttonSuccessColor() {
return this.inverseTextColor;
},
get btnDangerBg() {
get buttonDangerBg() {
return this.brandDanger;
},
get btnDangerColor() {
get buttonDangerColor() {
return this.inverseTextColor;
},
get btnWarningBg() {
get buttonWarningBg() {
return this.brandWarning;
},
get btnWarningColor() {
get buttonWarningColor() {
return this.inverseTextColor;
},
get btnTextSize() {
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
get buttonTextSize() {
return platform === PLATFORM.IOS
? this.fontSizeBase * 1.1
: this.fontSizeBase - 1;
},
get btnTextSizeLarge() {
get buttonTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get btnTextSizeSmall() {
get buttonTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
@ -87,42 +112,45 @@ export default {
},
// Card
cardDefaultBg: "#fff",
cardBorderColor: "#ccc",
cardDefaultBg: '#fff',
cardBorderColor: '#ccc',
cardBorderRadius: 2,
cardItemPadding: platform === "ios" ? 10 : 12,
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
// CheckBox
CheckboxRadius: platform === "ios" ? 13 : 0,
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
CheckboxIconSize: platform === "ios" ? 21 : 16,
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
checkboxBgColor: "#039BE5",
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",
checkboxTickColor: '#fff',
// Color
brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
brandWarning: "#f0ad4e",
brandDark: "#000",
brandLight: "#f4f4f4",
brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
brandInfo: '#62B1F6',
brandSuccess: '#5cb85c',
brandDanger: '#d9534f',
brandWarning: '#f0ad4e',
brandDark: '#000',
brandLight: '#f4f4f4',
// Container
containerBgColor: "#fff",
containerBgColor: '#fff',
// Date Picker
datePickerTextColor: "#000",
datePickerBg: "transparent",
datePickerTextColor: '#000',
datePickerBg: 'transparent',
// FAB
fabWidth: 56,
// Font
DefaultFontSize: 16,
fontFamily: platform === "ios" ? "System" : "Roboto",
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
@ -136,28 +164,28 @@ export default {
// Footer
footerHeight: 55,
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === "ios" ? "#737373" : "#bfc6ea",
tabBarTextSize: platform === "ios" ? 14 : 11,
activeTab: platform === "ios" ? "#007aff" : "#fff",
sTabBarActiveTextColor: "#007aff",
tabBarActiveTextColor: platform === "ios" ? "#2874F0" : "#fff",
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
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 === "ios" ? "#007aff" : "#fff",
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#007aff" : "#fff",
iosStatusbar: "dark-content",
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5",
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)
@ -170,95 +198,95 @@ export default {
},
// Icon
iconFamily: "Ionicons",
iconFontSize: platform === "ios" ? 30 : 28,
iconHeaderSize: platform === "ios" ? 33 : 24,
iconFamily: 'Ionicons',
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: "#D9D5DC",
inputSuccessBorderColor: "#2b8339",
inputErrorBorderColor: "#ed2f2f",
inputBorderColor: '#D9D5DC',
inputSuccessBorderColor: '#2b8339',
inputErrorBorderColor: '#ed2f2f',
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return "#575757";
return '#575757';
},
// Line Height
btnLineHeight: 19,
buttonLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: platform === "ios" ? 20 : 24,
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
// List
listBg: "transparent",
listBorderColor: "#c9c9c9",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#DDD",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#808080",
listBg: 'transparent',
listBorderColor: '#c9c9c9',
listDividerBg: '#f4f4f4',
listBtnUnderlayColor: '#DDD',
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
listNoteColor: '#808080',
listNoteSize: 13,
listItemSelected: platform === "ios" ? "#007aff" : "#3F51B5",
listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
// Progress Bar
defaultProgressColor: "#E4202D",
inverseProgressColor: "#1A191B",
defaultProgressColor: '#E4202D',
inverseProgressColor: '#1A191B',
// Radio Button
radioBtnSize: platform === "ios" ? 25 : 23,
radioSelectedColorAndroid: "#3F51B5",
radioBtnLineHeight: platform === "ios" ? 29 : 24,
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
radioSelectedColorAndroid: '#3F51B5',
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
get radioColor() {
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
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",
defaultSpinnerColor: '#45D56E',
inverseSpinnerColor: '#1A191B',
// Tab
tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff",
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",
tabBgColor: '#F8F8F8',
tabFontSize: 15,
// Text
textColor: "#000",
inverseTextColor: "#fff",
textColor: '#000',
inverseTextColor: '#fff',
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
titleFontSize: platform === "ios" ? 17 : 19,
subTitleFontSize: platform === "ios" ? 11 : 14,
subtitleColor: platform === "ios" ? "#000" : "#fff",
titleFontColor: platform === "ios" ? "#000" : "#fff",
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 === "ios" ? 5 : 2,
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: "#414142",
dropdownLinkColor: '#414142',
inputLineHeight: 24,
deviceWidth,
deviceHeight,

213
native-base-theme/variables/material.js
View file

@ -1,79 +1,97 @@
// @flow
import color from "color";
import color from 'color';
import { Platform, Dimensions, PixelRatio } from 'react-native';
import { Platform, Dimensions, PixelRatio } from "react-native";
import { PLATFORM } from './commonColor';
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS;
const platformStyle = "material";
const platformStyle = PLATFORM.MATERIAL;
const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
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",
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)",
btnUppercaseAndroidText: true,
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
buttonUppercaseAndroidText: true,
// Badge
badgeBg: "#ED1727",
badgeColor: "#fff",
badgeBg: '#ED1727',
badgeColor: '#fff',
badgePadding: 0,
// Button
btnFontFamily: "Roboto",
btnDisabledBg: "#b5b5b5",
buttonFontFamily: 'Roboto',
buttonDisabledBg: '#b5b5b5',
buttonPadding: 6,
get btnPrimaryBg() {
get buttonPrimaryBg() {
return this.brandPrimary;
},
get btnPrimaryColor() {
get buttonPrimaryColor() {
return this.inverseTextColor;
},
get btnInfoBg() {
get buttonInfoBg() {
return this.brandInfo;
},
get btnInfoColor() {
get buttonInfoColor() {
return this.inverseTextColor;
},
get btnSuccessBg() {
get buttonSuccessBg() {
return this.brandSuccess;
},
get btnSuccessColor() {
get buttonSuccessColor() {
return this.inverseTextColor;
},
get btnDangerBg() {
get buttonDangerBg() {
return this.brandDanger;
},
get btnDangerColor() {
get buttonDangerColor() {
return this.inverseTextColor;
},
get btnWarningBg() {
get buttonWarningBg() {
return this.brandWarning;
},
get btnWarningColor() {
get buttonWarningColor() {
return this.inverseTextColor;
},
get btnTextSize() {
get buttonTextSize() {
return this.fontSizeBase - 1;
},
get btnTextSizeLarge() {
get buttonTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get btnTextSizeSmall() {
get buttonTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
@ -87,10 +105,10 @@ export default {
},
// Card
cardDefaultBg: "#fff",
cardBorderColor: "#ccc",
cardDefaultBg: '#fff',
cardBorderColor: '#ccc',
cardBorderRadius: 2,
cardItemPadding: platform === "ios" ? 10 : 12,
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
// CheckBox
CheckboxRadius: 0,
@ -100,29 +118,32 @@ export default {
CheckboxIconSize: 16,
CheckboxIconMarginTop: 1,
CheckboxFontSize: 17,
checkboxBgColor: "#039BE5",
checkboxBgColor: '#039BE5',
checkboxSize: 20,
checkboxTickColor: "#fff",
checkboxTickColor: '#fff',
// Color
brandPrimary: "#3F51B5",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
brandWarning: "#f0ad4e",
brandDark: "#000",
brandLight: "#f4f4f4",
brandPrimary: '#3F51B5',
brandInfo: '#62B1F6',
brandSuccess: '#5cb85c',
brandDanger: '#d9534f',
brandWarning: '#f0ad4e',
brandDark: '#000',
brandLight: '#f4f4f4',
// Container
containerBgColor: "#fff",
containerBgColor: '#fff',
// Date Picker
datePickerTextColor: "#000",
datePickerBg: "transparent",
datePickerTextColor: '#000',
datePickerBg: 'transparent',
// FAB
fabWidth: 56,
// Font
DefaultFontSize: 16,
fontFamily: "Roboto",
fontFamily: 'Roboto',
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
@ -136,28 +157,28 @@ export default {
// Footer
footerHeight: 55,
footerDefaultBg: "#3F51B5",
footerDefaultBg: '#3F51B5',
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: "#bfc6ea",
tabBarTextColor: '#bfc6ea',
tabBarTextSize: 11,
activeTab: "#fff",
sTabBarActiveTextColor: "#007aff",
tabBarActiveTextColor: "#fff",
tabActiveBgColor: "#3F51B5",
activeTab: '#fff',
sTabBarActiveTextColor: '#007aff',
tabBarActiveTextColor: '#fff',
tabActiveBgColor: '#3F51B5',
// Header
toolbarBtnColor: "#fff",
toolbarDefaultBg: "#3F51B5",
toolbarBtnColor: '#fff',
toolbarDefaultBg: '#3F51B5',
toolbarHeight: 56,
toolbarSearchIconSize: 23,
toolbarInputColor: "#fff",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 40 : 50,
toolbarBtnTextColor: "#fff",
toolbarDefaultBorder: "#3F51B5",
iosStatusbar: "light-content",
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)
@ -170,95 +191,95 @@ export default {
},
// Icon
iconFamily: "Ionicons",
iconFamily: 'Ionicons',
iconFontSize: 28,
iconHeaderSize: 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: "#D9D5DC",
inputSuccessBorderColor: "#2b8339",
inputErrorBorderColor: "#ed2f2f",
inputBorderColor: '#D9D5DC',
inputSuccessBorderColor: '#2b8339',
inputErrorBorderColor: '#ed2f2f',
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return "#575757";
return '#575757';
},
// Line Height
btnLineHeight: 19,
buttonLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: 24,
// List
listBg: "transparent",
listBorderColor: "#c9c9c9",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#DDD",
listBg: 'transparent',
listBorderColor: '#c9c9c9',
listDividerBg: '#f4f4f4',
listBtnUnderlayColor: '#DDD',
listItemPadding: 12,
listNoteColor: "#808080",
listNoteColor: '#808080',
listNoteSize: 13,
listItemSelected: "#3F51B5",
listItemSelected: '#3F51B5',
// Progress Bar
defaultProgressColor: "#E4202D",
inverseProgressColor: "#1A191B",
defaultProgressColor: '#E4202D',
inverseProgressColor: '#1A191B',
// Radio Button
radioBtnSize: 23,
radioSelectedColorAndroid: "#3F51B5",
radioSelectedColorAndroid: '#3F51B5',
radioBtnLineHeight: 24,
get radioColor() {
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: "#3F51B5",
segmentActiveBackgroundColor: "#fff",
segmentTextColor: "#fff",
segmentActiveTextColor: "#3F51B5",
segmentBorderColor: "#fff",
segmentBorderColorMain: "#3F51B5",
segmentBackgroundColor: '#3F51B5',
segmentActiveBackgroundColor: '#fff',
segmentTextColor: '#fff',
segmentActiveTextColor: '#3F51B5',
segmentBorderColor: '#fff',
segmentBorderColorMain: '#3F51B5',
// Spinner
defaultSpinnerColor: "#45D56E",
inverseSpinnerColor: "#1A191B",
defaultSpinnerColor: '#45D56E',
inverseSpinnerColor: '#1A191B',
// Tab
tabDefaultBg: "#3F51B5",
topTabBarTextColor: "#b3c7f9",
topTabBarActiveTextColor: "#fff",
topTabBarBorderColor: "#fff",
topTabBarActiveBorderColor: "#fff",
tabDefaultBg: '#3F51B5',
topTabBarTextColor: '#b3c7f9',
topTabBarActiveTextColor: '#fff',
topTabBarBorderColor: '#fff',
topTabBarActiveBorderColor: '#fff',
// Tabs
tabBgColor: "#F8F8F8",
tabBgColor: '#F8F8F8',
tabFontSize: 15,
// Text
textColor: "#000",
inverseTextColor: "#fff",
textColor: '#000',
inverseTextColor: '#fff',
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: "Roboto",
titleFontfamily: 'Roboto',
titleFontSize: 19,
subTitleFontSize: 14,
subtitleColor: "#FFF",
titleFontColor: "#FFF",
subtitleColor: '#FFF',
titleFontColor: '#FFF',
// Other
borderRadiusBase: 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: "#414142",
dropdownLinkColor: '#414142',
inputLineHeight: 24,
deviceWidth,
deviceHeight,

288
native-base-theme/variables/platform.js
View file

@ -1,80 +1,106 @@
// @flow
import color from "color";
import color from 'color';
import { Platform, Dimensions, PixelRatio } from 'react-native';
import {Dimensions, PixelRatio, Platform} from "react-native";
import { PLATFORM } from './commonColor';
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS;
const platformStyle = undefined;
const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
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",
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)",
btnUppercaseAndroidText: true,
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
buttonUppercaseAndroidText: true,
// Badge
badgeBg: "#ED1727",
badgeColor: "#fff",
badgePadding: platform === "ios" ? 3 : 0,
badgeBg: '#ED1727',
badgeColor: '#fff',
badgePadding: platform === PLATFORM.IOS ? 3 : 0,
// Button
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
btnTextColor: '#fff',
btnDisabledBg: "#b5b5b5",
buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
buttonTextColor: '#fff',
buttonDisabledBg: '#b5b5b5',
buttonPadding: 6,
get btnPrimaryBg() {
buttonDefaultActiveOpacity: 0.5,
buttonDefaultFlex: 1,
buttonDefaultBorderRadius: 2,
buttonDefaultBorderWidth: 1,
get buttonPrimaryBg() {
return this.brandPrimary;
},
get btnPrimaryColor() {
get buttonPrimaryColor() {
return this.inverseTextColor;
},
get btnInfoBg() {
get buttonInfoBg() {
return this.brandInfo;
},
get btnInfoColor() {
get buttonInfoColor() {
return this.inverseTextColor;
},
get btnSuccessBg() {
get buttonSuccessBg() {
return this.brandSuccess;
},
get btnSuccessColor() {
get buttonSuccessColor() {
return this.inverseTextColor;
},
get btnDangerBg() {
get buttonDangerBg() {
return this.brandDanger;
},
get btnDangerColor() {
get buttonDangerColor() {
return this.inverseTextColor;
},
get btnWarningBg() {
get buttonWarningBg() {
return this.brandWarning;
},
get btnWarningColor() {
get buttonWarningColor() {
return this.inverseTextColor;
},
get btnTextSize() {
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
get buttonTextSize() {
return platform === PLATFORM.IOS
? this.fontSizeBase * 1.1
: this.fontSizeBase - 1;
},
get btnTextSizeLarge() {
get buttonTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get btnTextSizeSmall() {
get buttonTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
@ -88,42 +114,67 @@ export default {
},
// Card
cardDefaultBg: "#fff",
cardBorderColor: "#ccc",
cardDefaultBg: '#fff',
cardBorderColor: '#ccc',
cardBorderRadius: 2,
cardItemPadding: platform === "ios" ? 10 : 12,
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
// CheckBox
CheckboxRadius: platform === "ios" ? 13 : 0,
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
CheckboxIconSize: platform === "ios" ? 21 : 16,
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
checkboxBgColor: "#be1522",
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: '#be1522',
checkboxSize: 20,
checkboxTickColor: "#fff",
checkboxTickColor: '#fff',
checkboxDefaultColor: 'transparent',
checkboxTextShadowRadius: 0,
// Color
brandPrimary: "#be1522",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
brandWarning: "#f0ad4e",
brandDark: "#000",
brandLight: "#f4f4f4",
brandPrimary: '#be1522',
brandInfo: '#62B1F6',
brandSuccess: '#5cb85c',
brandDanger: '#d9534f',
brandWarning: '#f0ad4e',
brandDark: '#000',
brandLight: '#f4f4f4',
// Container
containerBgColor: "#fff",
containerBgColor: '#fff',
sideMenuBgColor: "#f2f2f2",
// Date Picker
datePickerTextColor: "#000",
datePickerBg: "transparent",
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 === "ios" ? "System" : "Roboto",
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
@ -137,29 +188,28 @@ export default {
// Footer
footerHeight: 55,
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
tabBarTextSize: platform === "ios" ? 14 : 11,
activeTab: platform === "ios" ? "#007aff" : "#fff",
sTabBarActiveTextColor: "#007aff",
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
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 === "ios" ? "#be1522" : "#fff",
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
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 ? '#be1522' : '#fff',
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#be1522',
iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
get statusBarColor() {
return color(this.toolbarDefaultBg)
.darken(0.2)
@ -172,92 +222,92 @@ export default {
},
// Icon
iconFamily: "Ionicons",
iconFontSize: platform === "ios" ? 30 : 28,
iconHeaderSize: platform === "ios" ? 33 : 24,
iconFamily: 'Ionicons',
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: "#D9D5DC",
inputSuccessBorderColor: "#2b8339",
inputErrorBorderColor: "#ed2f2f",
inputBorderColor: '#D9D5DC',
inputSuccessBorderColor: '#2b8339',
inputErrorBorderColor: '#ed2f2f',
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return "#575757";
return '#575757';
},
// Line Height
btnLineHeight: 19,
buttonLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: platform === "ios" ? 20 : 24,
listItemSelected: platform === "ios" ? "#be1522" : "#be1522",
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
listItemSelected: '#be1522',
// List
listBg: "transparent",
listBorderColor: "#c9c9c9",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#DDD",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#808080",
listBg: 'transparent',
listBorderColor: '#c9c9c9',
listDividerBg: '#f4f4f4',
listBtnUnderlayColor: '#DDD',
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
listNoteColor: '#808080',
listNoteSize: 13,
// Progress Bar
defaultProgressColor: "#E4202D",
inverseProgressColor: "#1A191B",
defaultProgressColor: '#E4202D',
inverseProgressColor: '#1A191B',
// Radio Button
radioBtnSize: platform === "ios" ? 25 : 23,
radioSelectedColorAndroid: "#E4202D",
radioBtnLineHeight: platform === "ios" ? 29 : 24,
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
radioSelectedColorAndroid: '#be1522',
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
get radioColor() {
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
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: "#be1522",
inverseSpinnerColor: "#1A191B",
defaultSpinnerColor: '#be1522',
inverseSpinnerColor: '#1A191B',
// Tab
tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
tabBarDisabledTextColor: '#BDBDBD',
tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
// Tabs
tabBgColor: "#F8F8F8",
tabBgColor: '#F8F8F8',
tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
tabFontSize: 15,
// Text
textColor: "#000",
textColor: '#000',
textDisabledColor: "#c1c1c1",
inverseTextColor: "#fff",
inverseTextColor: '#fff',
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
titleFontSize: platform === "ios" ? 17 : 19,
subTitleFontSize: platform === "ios" ? 11 : 14,
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
titleFontColor: platform === "ios" ? "#000" : "#FFF",
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',
// CUSTOM
customMaterialIconColor: "#5d5d5d",
@ -283,10 +333,10 @@ export default {
// Other
borderRadiusBase: platform === "ios" ? 5 : 2,
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: "#414142",
dropdownLinkColor: '#414142',
inputLineHeight: 24,
deviceWidth,
deviceHeight,

290
native-base-theme/variables/platformDark.js
View file

@ -1,80 +1,106 @@
// @flow
import color from "color";
import color from 'color';
import { Platform, Dimensions, PixelRatio } from 'react-native';
import {Dimensions, PixelRatio, Platform} from "react-native";
import { PLATFORM } from './commonColor';
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS;
const platformStyle = undefined;
const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
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",
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)",
btnUppercaseAndroidText: true,
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
buttonUppercaseAndroidText: true,
// Badge
badgeBg: "#ED1727",
badgeColor: "#fff",
badgePadding: platform === "ios" ? 3 : 0,
badgeBg: '#ED1727',
badgeColor: '#fff',
badgePadding: platform === PLATFORM.IOS ? 3 : 0,
// Button
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
btnTextColor: '#fff',
btnDisabledBg: "#b5b5b5",
buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
buttonTextColor: '#fff',
buttonDisabledBg: '#b5b5b5',
buttonPadding: 6,
get btnPrimaryBg() {
buttonDefaultActiveOpacity: 0.5,
buttonDefaultFlex: 1,
buttonDefaultBorderRadius: 2,
buttonDefaultBorderWidth: 1,
get buttonPrimaryBg() {
return this.brandPrimary;
},
get btnPrimaryColor() {
get buttonPrimaryColor() {
return this.textColor;
},
get btnInfoBg() {
get buttonInfoBg() {
return this.brandInfo;
},
get btnInfoColor() {
get buttonInfoColor() {
return this.textColor;
},
get btnSuccessBg() {
get buttonSuccessBg() {
return this.brandSuccess;
},
get btnSuccessColor() {
get buttonSuccessColor() {
return this.textColor;
},
get btnDangerBg() {
get buttonDangerBg() {
return this.brandDanger;
},
get btnDangerColor() {
get buttonDangerColor() {
return this.textColor;
},
get btnWarningBg() {
get buttonWarningBg() {
return this.brandWarning;
},
get btnWarningColor() {
get buttonWarningColor() {
return this.textColor;
},
get btnTextSize() {
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
get buttonTextSize() {
return platform === PLATFORM.IOS
? this.fontSizeBase * 1.1
: this.fontSizeBase - 1;
},
get btnTextSizeLarge() {
get buttonTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get btnTextSizeSmall() {
get buttonTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
@ -88,43 +114,67 @@ export default {
},
// Card
cardDefaultBg: "#2A2A2A",
cardBorderColor: "#1a1a1a",
cardDefaultBg: '#2A2A2A',
cardBorderColor: '#1a1a1a',
cardBorderRadius: 2,
cardItemPadding: platform === "ios" ? 10 : 12,
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
// CheckBox
CheckboxRadius: platform === "ios" ? 13 : 0,
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
CheckboxIconSize: platform === "ios" ? 21 : 16,
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
checkboxBgColor: "#E4202D",
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: '#be1522',
checkboxSize: 20,
checkboxTickColor: "#fff",
checkboxTickColor: '#fff',
checkboxDefaultColor: 'transparent',
checkboxTextShadowRadius: 0,
// Color
brandPrimary: "#be1522",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
brandWarning: "#f0ad4e",
brandDark: "#000",
brandLight: "#f4f4f4",
brandPrimary: '#be1522',
brandInfo: '#62B1F6',
brandSuccess: '#5cb85c',
brandDanger: '#d9534f',
brandWarning: '#f0ad4e',
brandDark: '#000',
brandLight: '#f4f4f4',
// Container
containerBgColor: "#222222",
containerBgColor: '#222222',
sideMenuBgColor: "#1c1c1c",
// Date Picker
datePickerTextColor: "#fff",
datePickerBg: "transparent",
datePickerFlex: 1,
datePickerPadding: 10,
datePickerTextColor: '#fff',
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 === "ios" ? "System" : "Roboto",
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
@ -138,29 +188,28 @@ export default {
// Footer
footerHeight: 55,
footerDefaultBg: platform === "ios" ? "#333333" : "#be1522",
footerDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
tabBarTextSize: platform === "ios" ? 14 : 11,
activeTab: platform === "ios" ? "#007aff" : "#fff",
sTabBarActiveTextColor: "#007aff",
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
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 === "ios" ? "#be1522" : "#fff",
toolbarDefaultBg: platform === "ios" ? "#333333" : "#be1522",
toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
toolbarDefaultBorder: platform === "ios" ? "#3f3f3f" : "#ba1f0f",
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
toolbarDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
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 ? '#be1522' : '#fff',
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#3f3f3f' : '#be1522',
iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
get statusBarColor() {
return color(this.toolbarDefaultBg)
.darken(0.2)
@ -173,92 +222,92 @@ export default {
},
// Icon
iconFamily: "Ionicons",
iconFontSize: platform === "ios" ? 30 : 28,
iconHeaderSize: platform === "ios" ? 33 : 24,
iconFamily: 'Ionicons',
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: "#D9D5DC",
inputSuccessBorderColor: "#2b8339",
inputErrorBorderColor: "#ed2f2f",
inputBorderColor: '#D9D5DC',
inputSuccessBorderColor: '#2b8339',
inputErrorBorderColor: '#ed2f2f',
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return "#575757";
return '#575757';
},
// Line Height
btnLineHeight: 19,
buttonLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: platform === "ios" ? 20 : 24,
listItemSelected: "#be1522",
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
listItemSelected: '#be1522',
// List
listBg: "transparent",
listBorderColor: "#3e3e3e",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#3a3a3a",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#acacac",
listBg: 'transparent',
listBorderColor: '#3e3e3e',
listDividerBg: '#f4f4f4',
listBtnUnderlayColor: '#3a3a3a',
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
listNoteColor: '#acacac',
listNoteSize: 13,
// Progress Bar
defaultProgressColor: "#E4202D",
inverseProgressColor: "#1A191B",
defaultProgressColor: '#E4202D',
inverseProgressColor: '#1A191B',
// Radio Button
radioBtnSize: platform === "ios" ? 25 : 23,
radioSelectedColorAndroid: "#E4202D",
radioBtnLineHeight: platform === "ios" ? 29 : 24,
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
radioSelectedColorAndroid: '#be1522',
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
get radioColor() {
return "#be1522";
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
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: "#be1522",
inverseSpinnerColor: "#1A191B",
defaultSpinnerColor: '#be1522',
inverseSpinnerColor: '#1A191B',
// Tab
tabDefaultBg: platform === "ios" ? "#333333" : "#be1522",
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
topTabBarBorderColor: platform === "ios" ? "#3f3f3f" : "#fff",
topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
tabBarDisabledTextColor: '#BDBDBD',
tabDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
topTabBarBorderColor: platform === PLATFORM.IOS ? '#3f3f3f' : '#fff',
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
// Tabs
tabBgColor: "#2b2b2b",
tabBgColor: '#2b2b2b',
tabIconColor: "#fff",
tabFontSize: 15,
// Text
textColor: "#ebebeb",
textColor: '#ebebeb',
textDisabledColor: "#5b5b5b",
inverseTextColor: "#000",
inverseTextColor: '#000',
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
titleFontSize: platform === "ios" ? 17 : 19,
subTitleFontSize: platform === "ios" ? 11 : 14,
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
titleFontColor: platform === "ios" ? "#FFF" : "#FFF",
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',
// CUSTOM
customMaterialIconColor: "#b3b3b3",
@ -282,11 +331,12 @@ export default {
menuColor: '#b81213',
tutorinsaColor: '#f93943',
// Other
borderRadiusBase: platform === "ios" ? 5 : 2,
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: "#414142",
dropdownLinkColor: '#414142',
inputLineHeight: 24,
deviceWidth,
deviceHeight,