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