forked from vergnet/application-amicale
Added first application draft
This commit is contained in:
keplyx
parent
2d641579aa
commit
dd2cb38c58
73 changed files with 6587 additions and 58 deletions
67
App.js
67
App.js
|
|
@ -1,19 +1,54 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
import {Dimensions, StyleSheet, View, Text} from 'react-native';
|
||||
import {StyleProvider} from 'native-base';
|
||||
import AppNavigator from './navigation/AppNavigator';
|
||||
import ThemeManager from './utils/ThemeManager';
|
||||
import LocaleManager from './utils/LocaleManager';
|
||||
import * as Font from 'expo-font';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>Open up App.js to start working on your app!</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
export default class App extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
LocaleManager.getInstance().initTranslations();
|
||||
this.updateTheme = this.updateTheme.bind(this);
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
currentTheme: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
async componentWillMount() {
|
||||
await Font.loadAsync({
|
||||
'Roboto': require('native-base/Fonts/Roboto.ttf'),
|
||||
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
|
||||
});
|
||||
ThemeManager.getInstance().setUpdateThemeCallback(this.updateTheme);
|
||||
await ThemeManager.getInstance().getDataFromPreferences();
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
currentTheme: ThemeManager.getInstance().getCurrentTheme()
|
||||
});
|
||||
}
|
||||
|
||||
updateTheme() {
|
||||
console.log('update theme called');
|
||||
// Change not propagating, need to restart the app
|
||||
// this.setState({
|
||||
// currentTheme: ThemeManager.getInstance().getCurrentTheme()
|
||||
// });
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.isLoading) {
|
||||
return <View/>;
|
||||
}
|
||||
console.log('rendering');
|
||||
// console.log(this.state.currentTheme.variables.containerBgColor);
|
||||
return (
|
||||
<StyleProvider style={this.state.currentTheme}>
|
||||
<AppNavigator/>
|
||||
</StyleProvider>);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
BIN
assets/amicale.png
Normal file
BIN
assets/amicale.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
assets/drawer-cover.png
Normal file
BIN
assets/drawer-cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
assets/icon.png
BIN
assets/icon.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 12 KiB |
BIN
assets/image-missing.png
Normal file
BIN
assets/image-missing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 732 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7 KiB After Width: | Height: | Size: 75 KiB |
33
components/CustomHeader.js
Normal file
33
components/CustomHeader.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import React from "react";
|
||||
import {Body, Button, Header, Icon, Left, Right, Title} from "native-base";
|
||||
import {StyleSheet} from "react-native";
|
||||
import {getStatusBarHeight} from "react-native-status-bar-height";
|
||||
|
||||
export default class CustomHeader extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Header style={styles.header}>
|
||||
<Left>
|
||||
<Button
|
||||
transparent
|
||||
onPress={() => this.props.navigation.toggleDrawer()}
|
||||
>
|
||||
<Icon name="menu"/>
|
||||
</Button>
|
||||
</Left>
|
||||
<Body>
|
||||
<Title>{this.props.title}</Title>
|
||||
</Body>
|
||||
<Right/>
|
||||
</Header>);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Fix header in status bar on Android
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
paddingTop: getStatusBarHeight(),
|
||||
height: 54 + getStatusBarHeight(),
|
||||
},
|
||||
});
|
||||
146
components/SideMenu.js
Normal file
146
components/SideMenu.js
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
import React from 'react';
|
||||
import {Platform, Dimensions, ScrollView, StyleSheet, View, Image, FlatList} from 'react-native';
|
||||
import {Drawer} from 'react-native-paper';
|
||||
import {Badge, Text, Container, Content, Icon, Left, List, ListItem, Right} from "native-base";
|
||||
import i18n from "i18n-js";
|
||||
|
||||
const deviceHeight = Dimensions.get("window").height;
|
||||
|
||||
const drawerCover = require("../assets/drawer-cover.png");
|
||||
|
||||
export default class SideBar extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
active: 'Home',
|
||||
};
|
||||
this.dataSet = [
|
||||
{
|
||||
name: i18n.t('screens.home'),
|
||||
route: "Home",
|
||||
icon: "home",
|
||||
bg: "#C5F442"
|
||||
// types: "11" // Shows the badge
|
||||
},
|
||||
{
|
||||
name: i18n.t('screens.planning'),
|
||||
route: "Planning",
|
||||
icon: "calendar-range",
|
||||
bg: "#477EEA",
|
||||
// types: "11"
|
||||
},
|
||||
{
|
||||
name: "Proxiwash",
|
||||
route: "Proxiwash",
|
||||
icon: "washing-machine",
|
||||
bg: "#477EEA",
|
||||
// types: "11"
|
||||
},
|
||||
{
|
||||
name: "Proximo",
|
||||
route: "Proximo",
|
||||
icon: "shopping",
|
||||
bg: "#477EEA",
|
||||
// types: "11"
|
||||
},
|
||||
{
|
||||
name: i18n.t('screens.settings'),
|
||||
route: "Settings",
|
||||
icon: "settings",
|
||||
bg: "#477EEA",
|
||||
// types: "11"
|
||||
},
|
||||
{
|
||||
name: i18n.t('screens.about'),
|
||||
route: "About",
|
||||
icon: "information",
|
||||
bg: "#477EEA",
|
||||
// types: "11"
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
navigateToScreen = (route) => () => {
|
||||
this.props.navigation.navigate(route);
|
||||
this.props.navigation.closeDrawer();
|
||||
this.setState({active: route});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<Content
|
||||
bounces={false}
|
||||
style={{ flex: 1, top: -1 }}
|
||||
>
|
||||
<Image source={drawerCover} style={styles.drawerCover} />
|
||||
|
||||
<FlatList
|
||||
data={this.dataSet}
|
||||
extraData={this.state}
|
||||
keyExtractor={(item, index) => item.route}
|
||||
renderItem={({item}) =>
|
||||
<ListItem
|
||||
button
|
||||
noBorder={item.route !== 'Proximo'} // Display a separator before settings
|
||||
selected={this.state.active === item.route}
|
||||
onPress={
|
||||
this.navigateToScreen(item.route)
|
||||
}
|
||||
>
|
||||
<Left>
|
||||
<Icon
|
||||
active
|
||||
name={item.icon}
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{ color: "#777", fontSize: 26, width: 30 }}
|
||||
/>
|
||||
<Text style={styles.text}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</Left>
|
||||
{item.types &&
|
||||
<Right style={{ flex: 1 }}>
|
||||
<Badge
|
||||
style={{
|
||||
borderRadius: 3,
|
||||
height: 25,
|
||||
width: 72,
|
||||
backgroundColor: item.bg
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={styles.badgeText}
|
||||
>{`${item.types} Types`}</Text>
|
||||
</Badge>
|
||||
</Right>}
|
||||
</ListItem>}
|
||||
/>
|
||||
</Content>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
drawerCover: {
|
||||
alignSelf: "stretch",
|
||||
height: deviceHeight / 4,
|
||||
width: null,
|
||||
position: "relative",
|
||||
marginBottom: 10,
|
||||
marginTop: 20
|
||||
},
|
||||
text: {
|
||||
fontWeight: Platform.OS === "ios" ? "500" : "400",
|
||||
fontSize: 16,
|
||||
marginLeft: 20
|
||||
},
|
||||
badgeText: {
|
||||
fontSize: Platform.OS === "ios" ? 13 : 11,
|
||||
fontWeight: "400",
|
||||
textAlign: "center",
|
||||
marginTop: Platform.OS === "android" ? -3 : undefined
|
||||
}
|
||||
});
|
||||
16
components/TabBarIcon.js
Normal file
16
components/TabBarIcon.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react';
|
||||
import {Ionicons} from '@expo/vector-icons/build/Icons';
|
||||
|
||||
export default class TabBarIcon extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Ionicons
|
||||
name={this.props.name}
|
||||
size={26}
|
||||
style={{marginBottom: -3}}
|
||||
color={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
38
native-base-theme/components/Badge.js
Normal file
38
native-base-theme/components/Badge.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
// @flow
|
||||
|
||||
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",
|
||||
justifyContent: variables.platform === "ios" ? "center" : undefined,
|
||||
borderRadius: 13.5,
|
||||
height: 27
|
||||
};
|
||||
return badgeTheme;
|
||||
};
|
||||
13
native-base-theme/components/Body.js
Normal file
13
native-base-theme/components/Body.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const bodyTheme = {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
};
|
||||
|
||||
return bodyTheme;
|
||||
};
|
||||
396
native-base-theme/components/Button.js
Normal file
396
native-base-theme/components/Button.js
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const platformStyle = variables.platformStyle;
|
||||
const platform = variables.platform;
|
||||
const darkCommon = {
|
||||
"NativeBase.Text": {
|
||||
color: variables.brandDark
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.brandDark
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.brandDark
|
||||
}
|
||||
};
|
||||
const lightCommon = {
|
||||
"NativeBase.Text": {
|
||||
color: variables.brandLight
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.brandLight
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.brandLight
|
||||
}
|
||||
};
|
||||
const primaryCommon = {
|
||||
"NativeBase.Text": {
|
||||
color: variables.btnPrimaryBg
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.btnPrimaryBg
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.btnPrimaryBg
|
||||
}
|
||||
};
|
||||
const successCommon = {
|
||||
"NativeBase.Text": {
|
||||
color: variables.btnSuccessBg
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.btnSuccessBg
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.btnSuccessBg
|
||||
}
|
||||
};
|
||||
const infoCommon = {
|
||||
"NativeBase.Text": {
|
||||
color: variables.btnInfoBg
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.btnInfoBg
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.btnInfoBg
|
||||
}
|
||||
};
|
||||
const warningCommon = {
|
||||
"NativeBase.Text": {
|
||||
color: variables.btnWarningBg
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.btnWarningBg
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.btnWarningBg
|
||||
}
|
||||
};
|
||||
const dangerCommon = {
|
||||
"NativeBase.Text": {
|
||||
color: variables.btnDangerBg
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.btnDangerBg
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.btnDangerBg
|
||||
}
|
||||
};
|
||||
const buttonTheme = {
|
||||
".disabled": {
|
||||
".transparent": {
|
||||
backgroundColor: null,
|
||||
"NativeBase.Text": {
|
||||
color: variables.btnDisabledBg
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.btnDisabledBg
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.btnDisabledBg
|
||||
}
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.brandLight
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.brandLight
|
||||
},
|
||||
backgroundColor: variables.btnDisabledBg
|
||||
},
|
||||
".bordered": {
|
||||
".dark": {
|
||||
...darkCommon,
|
||||
backgroundColor: "transparent",
|
||||
borderColor: variables.brandDark,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
".light": {
|
||||
...lightCommon,
|
||||
backgroundColor: "transparent",
|
||||
borderColor: variables.brandLight,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
".primary": {
|
||||
...primaryCommon,
|
||||
backgroundColor: "transparent",
|
||||
borderColor: variables.btnPrimaryBg,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
".success": {
|
||||
...successCommon,
|
||||
backgroundColor: "transparent",
|
||||
borderColor: variables.btnSuccessBg,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
".info": {
|
||||
...infoCommon,
|
||||
backgroundColor: "transparent",
|
||||
borderColor: variables.btnInfoBg,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
".warning": {
|
||||
...warningCommon,
|
||||
backgroundColor: "transparent",
|
||||
borderColor: variables.btnWarningBg,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
".danger": {
|
||||
...dangerCommon,
|
||||
backgroundColor: "transparent",
|
||||
borderColor: variables.btnDangerBg,
|
||||
borderWidth: variables.borderWidth * 2
|
||||
},
|
||||
".disabled": {
|
||||
backgroundColor: null,
|
||||
borderColor: variables.btnDisabledBg,
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
"NativeBase.Text": {
|
||||
color: variables.btnDisabledBg
|
||||
}
|
||||
},
|
||||
...primaryCommon,
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
elevation: null,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowOpacity: null,
|
||||
shadowRadius: null,
|
||||
backgroundColor: "transparent"
|
||||
},
|
||||
|
||||
".dark": {
|
||||
".bordered": {
|
||||
...darkCommon
|
||||
},
|
||||
backgroundColor: variables.brandDark
|
||||
},
|
||||
".light": {
|
||||
".transparent": {
|
||||
...lightCommon,
|
||||
backgroundColor: null
|
||||
},
|
||||
".bordered": {
|
||||
...lightCommon
|
||||
},
|
||||
...darkCommon,
|
||||
backgroundColor: variables.brandLight
|
||||
},
|
||||
|
||||
".primary": {
|
||||
".bordered": {
|
||||
...primaryCommon
|
||||
},
|
||||
backgroundColor: variables.btnPrimaryBg
|
||||
},
|
||||
|
||||
".success": {
|
||||
".bordered": {
|
||||
...successCommon
|
||||
},
|
||||
backgroundColor: variables.btnSuccessBg
|
||||
},
|
||||
|
||||
".info": {
|
||||
".bordered": {
|
||||
...infoCommon
|
||||
},
|
||||
backgroundColor: variables.btnInfoBg
|
||||
},
|
||||
|
||||
".warning": {
|
||||
".bordered": {
|
||||
...warningCommon
|
||||
},
|
||||
backgroundColor: variables.btnWarningBg
|
||||
},
|
||||
|
||||
".danger": {
|
||||
".bordered": {
|
||||
...dangerCommon
|
||||
},
|
||||
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,
|
||||
...primaryCommon,
|
||||
".dark": {
|
||||
...darkCommon,
|
||||
backgroundColor: null
|
||||
},
|
||||
".danger": {
|
||||
...dangerCommon,
|
||||
backgroundColor: null
|
||||
},
|
||||
".warning": {
|
||||
...warningCommon,
|
||||
backgroundColor: null
|
||||
},
|
||||
".info": {
|
||||
...infoCommon,
|
||||
backgroundColor: null
|
||||
},
|
||||
".primary": {
|
||||
...primaryCommon,
|
||||
backgroundColor: null
|
||||
},
|
||||
".success": {
|
||||
...successCommon,
|
||||
backgroundColor: null
|
||||
},
|
||||
".light": {
|
||||
...lightCommon,
|
||||
backgroundColor: null
|
||||
},
|
||||
".disabled": {
|
||||
backgroundColor: "transparent",
|
||||
borderColor: variables.btnDisabledBg,
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
"NativeBase.Text": {
|
||||
color: variables.btnDisabledBg
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.btnDisabledBg
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.btnDisabledBg
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
".small": {
|
||||
height: 30,
|
||||
"NativeBase.Text": {
|
||||
fontSize: 14
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
fontSize: 20,
|
||||
paddingTop: 0
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
fontSize: 20,
|
||||
paddingTop: 0
|
||||
}
|
||||
},
|
||||
|
||||
".large": {
|
||||
height: 60,
|
||||
"NativeBase.Text": {
|
||||
fontSize: 22,
|
||||
}
|
||||
},
|
||||
|
||||
".capitalize": {},
|
||||
|
||||
".vertical": {
|
||||
flexDirection: "column",
|
||||
height: null
|
||||
},
|
||||
|
||||
"NativeBase.Text": {
|
||||
fontFamily: variables.btnFontFamily,
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
color: variables.inverseTextColor,
|
||||
fontSize: variables.btnTextSize,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: "transparent"
|
||||
// childPosition: 1
|
||||
},
|
||||
|
||||
"NativeBase.Icon": {
|
||||
color: variables.inverseTextColor,
|
||||
fontSize: 24,
|
||||
marginHorizontal: 16,
|
||||
paddingTop: platform === "ios" ? 2 : undefined
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.inverseTextColor,
|
||||
fontSize: 24,
|
||||
marginHorizontal: 16,
|
||||
paddingTop: platform === "ios" ? 2 : undefined
|
||||
},
|
||||
|
||||
".iconLeft": {
|
||||
"NativeBase.Text": {
|
||||
marginLeft: 0
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
marginRight: 0,
|
||||
marginLeft: 16
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
marginRight: 0,
|
||||
marginLeft: 16
|
||||
}
|
||||
},
|
||||
".iconRight": {
|
||||
"NativeBase.Text": {
|
||||
marginRight: 0
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
marginLeft: 0,
|
||||
marginRight: 16
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
marginLeft: 0,
|
||||
marginRight: 16
|
||||
}
|
||||
},
|
||||
".picker": {
|
||||
"NativeBase.Text": {
|
||||
".note": {
|
||||
fontSize: 16,
|
||||
lineHeight: null
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
paddingVertical: variables.buttonPadding,
|
||||
// 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" ? variables.brandDark : undefined,
|
||||
shadowOffset:
|
||||
platformStyle === "material" ? { width: 0, height: 2 } : undefined,
|
||||
shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
|
||||
shadowRadius: platformStyle === "material" ? 1.2 : undefined,
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between"
|
||||
};
|
||||
return buttonTheme;
|
||||
};
|
||||
37
native-base-theme/components/Card.js
Normal file
37
native-base-theme/components/Card.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const cardTheme = {
|
||||
".transparent": {
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowOpacity: null,
|
||||
shadowRadius: null,
|
||||
elevation: null,
|
||||
backgroundColor: "transparent",
|
||||
borderWidth: 0
|
||||
},
|
||||
".noShadow": {
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowOpacity: null,
|
||||
elevation: null
|
||||
},
|
||||
marginVertical: 5,
|
||||
marginHorizontal: 2,
|
||||
borderWidth: variables.borderWidth,
|
||||
borderRadius: variables.cardBorderRadius,
|
||||
borderColor: variables.cardBorderColor,
|
||||
flexWrap: "nowrap",
|
||||
backgroundColor: variables.cardDefaultBg,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 1.5,
|
||||
elevation: 3
|
||||
};
|
||||
|
||||
return cardTheme;
|
||||
};
|
||||
196
native-base-theme/components/CardItem.js
Normal file
196
native-base-theme/components/CardItem.js
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
// @flow
|
||||
|
||||
import { StyleSheet } from "react-native";
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const platform = variables.platform;
|
||||
const transparentBtnCommon = {
|
||||
"NativeBase.Text": {
|
||||
fontSize: variables.DefaultFontSize - 3,
|
||||
color: variables.sTabBarActiveTextColor
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
fontSize: variables.iconFontSize - 10,
|
||||
color: variables.sTabBarActiveTextColor,
|
||||
marginHorizontal: null
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
fontSize: variables.iconFontSize - 10,
|
||||
color: variables.sTabBarActiveTextColor
|
||||
},
|
||||
paddingVertical: null,
|
||||
paddingHorizontal: null
|
||||
};
|
||||
|
||||
const cardItemTheme = {
|
||||
"NativeBase.Left": {
|
||||
"NativeBase.Body": {
|
||||
"NativeBase.Text": {
|
||||
".note": {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: "400",
|
||||
marginRight: 20
|
||||
}
|
||||
},
|
||||
flex: 1,
|
||||
marginLeft: 10,
|
||||
alignItems: null
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
fontSize: variables.iconFontSize
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
fontSize: variables.iconFontSize
|
||||
},
|
||||
"NativeBase.Text": {
|
||||
marginLeft: 10,
|
||||
alignSelf: "center"
|
||||
},
|
||||
"NativeBase.Button": {
|
||||
".transparent": {
|
||||
...transparentBtnCommon,
|
||||
paddingRight: variables.cardItemPadding + 5
|
||||
}
|
||||
},
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
alignItems: "center"
|
||||
},
|
||||
".content": {
|
||||
"NativeBase.Text": {
|
||||
color: platform === "ios" ? "#555" : "#222",
|
||||
fontSize: variables.DefaultFontSize - 2
|
||||
}
|
||||
},
|
||||
".cardBody": {
|
||||
padding: -5,
|
||||
"NativeBase.Text": {
|
||||
marginTop: 5
|
||||
}
|
||||
},
|
||||
"NativeBase.Body": {
|
||||
"NativeBase.Text": {
|
||||
".note": {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: "200",
|
||||
marginRight: 20
|
||||
}
|
||||
},
|
||||
"NativeBase.Button": {
|
||||
".transparent": {
|
||||
...transparentBtnCommon,
|
||||
paddingRight: variables.cardItemPadding + 5,
|
||||
alignSelf: "stretch"
|
||||
}
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: "stretch",
|
||||
alignItems: "flex-start"
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
"NativeBase.Badge": {
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Button": {
|
||||
".transparent": {
|
||||
...transparentBtnCommon
|
||||
},
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
alignSelf: null,
|
||||
fontSize: variables.iconFontSize - 8,
|
||||
color: variables.cardBorderColor
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
alignSelf: null,
|
||||
fontSize: variables.iconFontSize - 8,
|
||||
color: variables.cardBorderColor
|
||||
},
|
||||
"NativeBase.Text": {
|
||||
fontSize: variables.DefaultFontSize - 1,
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Thumbnail": {
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Image": {
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Radio": {
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Checkbox": {
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Switch": {
|
||||
alignSelf: null
|
||||
},
|
||||
flex: 0.8
|
||||
},
|
||||
".header": {
|
||||
"NativeBase.Text": {
|
||||
fontSize: 16,
|
||||
fontWeight: platform === "ios" ? "600" : "500"
|
||||
},
|
||||
".bordered": {
|
||||
"NativeBase.Text": {
|
||||
color: variables.brandPrimary,
|
||||
fontWeight: platform === "ios" ? "600" : "500"
|
||||
},
|
||||
borderBottomWidth: variables.borderWidth
|
||||
},
|
||||
borderBottomWidth: null,
|
||||
paddingVertical: variables.cardItemPadding + 5
|
||||
},
|
||||
".footer": {
|
||||
"NativeBase.Text": {
|
||||
fontSize: 16,
|
||||
fontWeight: platform === "ios" ? "600" : "500"
|
||||
},
|
||||
".bordered": {
|
||||
"NativeBase.Text": {
|
||||
color: variables.brandPrimary,
|
||||
fontWeight: platform === "ios" ? "600" : "500"
|
||||
},
|
||||
borderTopWidth: variables.borderWidth
|
||||
},
|
||||
borderBottomWidth: null
|
||||
},
|
||||
"NativeBase.Text": {
|
||||
".note": {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: "200"
|
||||
}
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
width: variables.iconFontSize + 5,
|
||||
fontSize: variables.iconFontSize - 2
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
width: variables.iconFontSize + 5,
|
||||
fontSize: variables.iconFontSize - 2
|
||||
},
|
||||
".bordered": {
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: variables.cardBorderColor
|
||||
},
|
||||
".first": {
|
||||
borderTopLeftRadius: variables.cardBorderRadius,
|
||||
borderTopRightRadius: variables.cardBorderRadius
|
||||
},
|
||||
".last": {
|
||||
borderBottomLeftRadius: variables.cardBorderRadius,
|
||||
borderBottomRightRadius: variables.cardBorderRadius
|
||||
},
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
borderRadius: variables.cardBorderRadius,
|
||||
padding: variables.cardItemPadding + 5,
|
||||
paddingVertical: variables.cardItemPadding,
|
||||
backgroundColor: variables.cardDefaultBg
|
||||
};
|
||||
|
||||
return cardItemTheme;
|
||||
};
|
||||
38
native-base-theme/components/CheckBox.js
Normal file
38
native-base-theme/components/CheckBox.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const checkBoxTheme = {
|
||||
".checked": {
|
||||
"NativeBase.Icon": {
|
||||
color: variables.checkboxTickColor
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.checkboxTickColor
|
||||
}
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: "transparent",
|
||||
lineHeight: variables.CheckboxIconSize,
|
||||
marginTop: variables.CheckboxIconMarginTop,
|
||||
fontSize: variables.CheckboxFontSize
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: "transparent",
|
||||
lineHeight: variables.CheckboxIconSize,
|
||||
marginTop: variables.CheckboxIconMarginTop,
|
||||
fontSize: variables.CheckboxFontSize
|
||||
},
|
||||
borderRadius: variables.CheckboxRadius,
|
||||
overflow: "hidden",
|
||||
width: variables.checkboxSize,
|
||||
height: variables.checkboxSize,
|
||||
borderWidth: variables.CheckboxBorderWidth,
|
||||
paddingLeft: variables.CheckboxPaddingLeft - 1,
|
||||
paddingBottom: variables.CheckboxPaddingBottom,
|
||||
left: 10
|
||||
};
|
||||
|
||||
return checkBoxTheme;
|
||||
};
|
||||
16
native-base-theme/components/Container.js
Normal file
16
native-base-theme/components/Container.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
// @flow
|
||||
|
||||
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,
|
||||
backgroundColor: variables.containerBgColor
|
||||
};
|
||||
|
||||
return theme;
|
||||
};
|
||||
16
native-base-theme/components/Content.js
Normal file
16
native-base-theme/components/Content.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const contentTheme = {
|
||||
flex: 1,
|
||||
backgroundColor: "transparent",
|
||||
"NativeBase.Segment": {
|
||||
borderWidth: 0,
|
||||
backgroundColor: "transparent"
|
||||
}
|
||||
};
|
||||
|
||||
return contentTheme;
|
||||
};
|
||||
29
native-base-theme/components/Fab.js
Normal file
29
native-base-theme/components/Fab.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
// @flow
|
||||
|
||||
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",
|
||||
fontSize: 20,
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
alignSelf: "center",
|
||||
fontSize: 20,
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return fabTheme;
|
||||
};
|
||||
118
native-base-theme/components/Footer.js
Normal file
118
native-base-theme/components/Footer.js
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const platformStyle = variables.platformStyle;
|
||||
const platform = variables.platform;
|
||||
|
||||
const iconCommon = {
|
||||
"NativeBase.Icon": {
|
||||
color: variables.tabBarActiveTextColor
|
||||
}
|
||||
};
|
||||
const iconNBCommon = {
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.tabBarActiveTextColor
|
||||
}
|
||||
};
|
||||
const textCommon = {
|
||||
"NativeBase.Text": {
|
||||
color: variables.tabBarActiveTextColor
|
||||
}
|
||||
};
|
||||
const footerTheme = {
|
||||
"NativeBase.Left": {
|
||||
"NativeBase.Button": {
|
||||
".transparent": {
|
||||
backgroundColor: "transparent",
|
||||
borderColor: null,
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
...iconCommon,
|
||||
...iconNBCommon,
|
||||
...textCommon
|
||||
},
|
||||
alignSelf: null,
|
||||
...iconCommon,
|
||||
...iconNBCommon,
|
||||
// ...textCommon
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: "center",
|
||||
alignItems: "flex-start"
|
||||
},
|
||||
"NativeBase.Body": {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
alignSelf: "center",
|
||||
flexDirection: "row",
|
||||
"NativeBase.Button": {
|
||||
alignSelf: "center",
|
||||
".transparent": {
|
||||
backgroundColor: "transparent",
|
||||
borderColor: null,
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
...iconCommon,
|
||||
...iconNBCommon,
|
||||
...textCommon
|
||||
},
|
||||
".full": {
|
||||
height: variables.footerHeight,
|
||||
paddingBottom: variables.footerPaddingBottom,
|
||||
flex: 1
|
||||
},
|
||||
...iconCommon,
|
||||
...iconNBCommon,
|
||||
// ...textCommon
|
||||
}
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
"NativeBase.Button": {
|
||||
".transparent": {
|
||||
backgroundColor: "transparent",
|
||||
borderColor: null,
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
...iconCommon,
|
||||
...iconNBCommon,
|
||||
...textCommon
|
||||
},
|
||||
alignSelf: null,
|
||||
...iconCommon,
|
||||
...iconNBCommon,
|
||||
// ...textCommon
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: "center",
|
||||
alignItems: "flex-end"
|
||||
},
|
||||
backgroundColor: variables.footerDefaultBg,
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
borderTopWidth:
|
||||
platform === "ios" && platformStyle !== "material"
|
||||
? variables.borderWidth
|
||||
: undefined,
|
||||
borderColor:
|
||||
platform === "ios" && platformStyle !== "material"
|
||||
? "#cbcbcb"
|
||||
: undefined,
|
||||
height: variables.footerHeight,
|
||||
paddingBottom: variables.footerPaddingBottom,
|
||||
elevation: 3,
|
||||
left: 0,
|
||||
right: 0
|
||||
};
|
||||
return footerTheme;
|
||||
};
|
||||
79
native-base-theme/components/FooterTab.js
Normal file
79
native-base-theme/components/FooterTab.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
// @flow
|
||||
|
||||
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.footerDefaultBg
|
||||
: undefined,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
flex: 1,
|
||||
alignSelf: "stretch"
|
||||
};
|
||||
|
||||
return footerTabTheme;
|
||||
};
|
||||
90
native-base-theme/components/Form.js
Normal file
90
native-base-theme/components/Form.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
// @flow
|
||||
|
||||
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: null
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
marginTop: 36
|
||||
},
|
||||
marginLeft: 15
|
||||
},
|
||||
".floatingLabel": {
|
||||
"NativeBase.Input": {
|
||||
paddingLeft: null,
|
||||
top: 10,
|
||||
marginLeft: null
|
||||
},
|
||||
"NativeBase.Label": {
|
||||
left: 0,
|
||||
top: 6
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
top: 6
|
||||
},
|
||||
marginTop: 15,
|
||||
marginLeft: 15
|
||||
},
|
||||
".regular": {
|
||||
"NativeBase.Label": {
|
||||
left: 0
|
||||
},
|
||||
marginLeft: 0
|
||||
},
|
||||
".rounded": {
|
||||
"NativeBase.Label": {
|
||||
left: 0
|
||||
},
|
||||
marginLeft: 0
|
||||
},
|
||||
".underline": {
|
||||
"NativeBase.Label": {
|
||||
left: 0,
|
||||
top: 0,
|
||||
position: "relative"
|
||||
},
|
||||
"NativeBase.Input": {
|
||||
left: -15
|
||||
},
|
||||
marginLeft: 15
|
||||
},
|
||||
".last": {
|
||||
marginLeft: 0,
|
||||
paddingLeft: 15
|
||||
},
|
||||
"NativeBase.Label": {
|
||||
paddingRight: 5
|
||||
},
|
||||
marginLeft: 15
|
||||
}
|
||||
};
|
||||
|
||||
return theme;
|
||||
};
|
||||
13
native-base-theme/components/H1.js
Normal file
13
native-base-theme/components/H1.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const h1Theme = {
|
||||
color: variables.textColor,
|
||||
fontSize: variables.fontSizeH1,
|
||||
lineHeight: variables.lineHeightH1,
|
||||
};
|
||||
|
||||
return h1Theme;
|
||||
};
|
||||
13
native-base-theme/components/H2.js
Normal file
13
native-base-theme/components/H2.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const h2Theme = {
|
||||
color: variables.textColor,
|
||||
fontSize: variables.fontSizeH2,
|
||||
lineHeight: variables.lineHeightH2,
|
||||
};
|
||||
|
||||
return h2Theme;
|
||||
};
|
||||
13
native-base-theme/components/H3.js
Normal file
13
native-base-theme/components/H3.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const h3Theme = {
|
||||
color: variables.textColor,
|
||||
fontSize: variables.fontSizeH3,
|
||||
lineHeight: variables.lineHeightH3
|
||||
};
|
||||
|
||||
return h3Theme;
|
||||
};
|
||||
394
native-base-theme/components/Header.js
Normal file
394
native-base-theme/components/Header.js
Normal file
|
|
@ -0,0 +1,394 @@
|
|||
// @flow
|
||||
|
||||
import { PixelRatio, StatusBar } 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",
|
||||
fontWeight: "500",
|
||||
paddingBottom: 3
|
||||
},
|
||||
"NativeBase.Subtitle": {
|
||||
fontSize: variables.subTitleFontSize,
|
||||
fontFamily: variables.titleFontfamily,
|
||||
color: variables.subtitleColor,
|
||||
textAlign: "center"
|
||||
}
|
||||
}
|
||||
},
|
||||
".transparent": {
|
||||
backgroundColor: "transparent",
|
||||
borderBottomColor: "transparent",
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
paddingTop: platform === "android" ? StatusBar.currentHeight : undefined,
|
||||
height: platform === "android" ? variables.toolbarHeight + StatusBar.currentHeight : variables.toolbarHeight
|
||||
},
|
||||
".noShadow": {
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null
|
||||
},
|
||||
".hasTabs": {
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
borderBottomWidth: null
|
||||
},
|
||||
".hasSegment": {
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null,
|
||||
borderBottomWidth: null,
|
||||
"NativeBase.Left": {
|
||||
flex: 0.3
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
flex: 0.3
|
||||
},
|
||||
"NativeBase.Body": {
|
||||
flex: 1,
|
||||
"NativeBase.Segment": {
|
||||
marginRight: 0,
|
||||
alignSelf: "center",
|
||||
"NativeBase.Button": {
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
".noLeft": {
|
||||
"NativeBase.Left": {
|
||||
width: platform === "ios" ? undefined : 0,
|
||||
flex: platform === "ios" ? 1 : 0
|
||||
},
|
||||
"NativeBase.Body": {
|
||||
"NativeBase.Title": {
|
||||
paddingLeft: platform === "ios" ? undefined : 10
|
||||
},
|
||||
"NativeBase.Subtitle": {
|
||||
paddingLeft: platform === "ios" ? undefined : 10
|
||||
}
|
||||
}
|
||||
},
|
||||
"NativeBase.Button": {
|
||||
justifyContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
".transparent": {
|
||||
"NativeBase.Text": {
|
||||
color: variables.toolbarBtnTextColor,
|
||||
fontWeight: "600"
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
paddingHorizontal: variables.buttonPadding
|
||||
},
|
||||
paddingHorizontal: 15
|
||||
},
|
||||
".searchBar": {
|
||||
"NativeBase.Item": {
|
||||
"NativeBase.Icon": {
|
||||
backgroundColor: "transparent",
|
||||
color: variables.dropdownLinkColor,
|
||||
fontSize: variables.toolbarSearchIconSize,
|
||||
alignItems: "center",
|
||||
marginTop: 2,
|
||||
paddingRight: 10,
|
||||
paddingLeft: 10
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
backgroundColor: "transparent",
|
||||
color: null,
|
||||
alignSelf: "center"
|
||||
},
|
||||
"NativeBase.Input": {
|
||||
alignSelf: "center",
|
||||
lineHeight: null,
|
||||
height: variables.searchBarInputHeight
|
||||
},
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
flex: 1,
|
||||
height: variables.searchBarHeight,
|
||||
borderColor: "transparent",
|
||||
backgroundColor: variables.toolbarInputColor
|
||||
},
|
||||
"NativeBase.Button": {
|
||||
".transparent": {
|
||||
"NativeBase.Text": {
|
||||
fontWeight: "500"
|
||||
},
|
||||
paddingHorizontal: null,
|
||||
paddingLeft: platform === "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.toolbarBtnTextColor,
|
||||
fontSize: platform === "ios" ? 17 : 0,
|
||||
marginLeft: 7,
|
||||
lineHeight: 19.5
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize: variables.iconHeaderSize,
|
||||
marginTop: 2,
|
||||
marginRight: 5,
|
||||
marginLeft: 2
|
||||
}
|
||||
},
|
||||
".transparent": {
|
||||
marginLeft:
|
||||
platform === "ios" && platformStyle !== "material" ? -3 : 0,
|
||||
"NativeBase.Icon": {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize:
|
||||
platform === "ios" && variables.platformStyle !== "material"
|
||||
? variables.iconHeaderSize + 1
|
||||
: variables.iconHeaderSize,
|
||||
marginTop: 0,
|
||||
marginRight: 2,
|
||||
marginLeft: 1,
|
||||
paddingTop: 1
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize:
|
||||
platform === "ios" && variables.platformStyle !== "material"
|
||||
? variables.iconHeaderSize + 1
|
||||
: variables.iconHeaderSize - 2,
|
||||
marginTop: 0,
|
||||
marginRight: 2,
|
||||
marginLeft: 1,
|
||||
paddingTop: 1
|
||||
},
|
||||
"NativeBase.Text": {
|
||||
color: variables.toolbarBtnTextColor,
|
||||
fontSize: platform === "ios" ? 17 : 0,
|
||||
top: platform === "ios" ? 1 : -1.5,
|
||||
paddingLeft:
|
||||
platform === "ios" && platformStyle !== "material" ? 2 : 5,
|
||||
paddingRight:
|
||||
platform === "ios" && platformStyle !== "material"
|
||||
? undefined
|
||||
: 10
|
||||
},
|
||||
backgroundColor: "transparent",
|
||||
borderColor: null,
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
alignSelf: null,
|
||||
paddingRight: variables.buttonPadding,
|
||||
paddingLeft: platform === "ios" && platformStyle !== "material" ? 4 : 8
|
||||
},
|
||||
flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.4,
|
||||
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.toolbarBtnTextColor,
|
||||
fontSize: platform === "ios" ? 17 : 14,
|
||||
lineHeight: 19.5
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize: variables.iconHeaderSize - 2,
|
||||
marginTop: 2,
|
||||
marginRight: 2,
|
||||
marginLeft: 5
|
||||
}
|
||||
},
|
||||
".transparent": {
|
||||
marginRight: platform === "ios" ? -9 : -5,
|
||||
paddingLeft: 15,
|
||||
paddingRight: 12,
|
||||
paddingHorizontal: 15,
|
||||
borderRadius: 50,
|
||||
"NativeBase.Icon": {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize: variables.iconHeaderSize - 2,
|
||||
marginTop: 0,
|
||||
marginLeft: 2,
|
||||
marginRight: 0
|
||||
// paddingTop: 0
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.toolbarBtnColor,
|
||||
fontSize: variables.iconHeaderSize - 2,
|
||||
marginTop: 0,
|
||||
marginLeft: 2,
|
||||
marginRight: 0
|
||||
// paddingTop: 0
|
||||
},
|
||||
"NativeBase.Text": {
|
||||
color: variables.toolbarBtnTextColor,
|
||||
fontSize: platform === "ios" ? 17 : 14,
|
||||
top: platform === "ios" ? 1 : -1.5,
|
||||
paddingRight:
|
||||
platform === "ios" && variables.platformStyle !== "material"
|
||||
? 0
|
||||
: undefined
|
||||
},
|
||||
backgroundColor: "transparent",
|
||||
borderColor: null,
|
||||
elevation: 0,
|
||||
shadowColor: null,
|
||||
shadowOffset: null,
|
||||
shadowRadius: null,
|
||||
shadowOpacity: null
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.toolbarBtnColor
|
||||
},
|
||||
alignSelf: null,
|
||||
paddingHorizontal: variables.buttonPadding
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: "center",
|
||||
alignItems: "flex-end",
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-end"
|
||||
},
|
||||
backgroundColor: variables.toolbarDefaultBg,
|
||||
flexDirection: "row",
|
||||
// paddingHorizontal: 10,
|
||||
paddingLeft:
|
||||
platform === "ios" && variables.platformStyle !== "material" ? 6 : 10,
|
||||
paddingRight: 10,
|
||||
justifyContent: "center",
|
||||
paddingTop: platform === "ios" ? 18 : 0,
|
||||
borderBottomWidth:
|
||||
platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0,
|
||||
borderBottomColor: variables.toolbarDefaultBorder,
|
||||
height:
|
||||
variables.platform === "ios" && variables.platformStyle === "material"
|
||||
? variables.toolbarHeight + 10
|
||||
: 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;
|
||||
};
|
||||
12
native-base-theme/components/Icon.js
Normal file
12
native-base-theme/components/Icon.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const iconTheme = {
|
||||
fontSize: variables.iconFontSize,
|
||||
color: "#000"
|
||||
};
|
||||
|
||||
return iconTheme;
|
||||
};
|
||||
19
native-base-theme/components/Input.js
Normal file
19
native-base-theme/components/Input.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const inputTheme = {
|
||||
'.multiline': {
|
||||
height: null,
|
||||
},
|
||||
height: variables.inputHeightBase,
|
||||
color: variables.inputColor,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
flex: 1,
|
||||
fontSize: variables.inputFontSize
|
||||
};
|
||||
|
||||
return inputTheme;
|
||||
};
|
||||
132
native-base-theme/components/InputGroup.js
Normal file
132
native-base-theme/components/InputGroup.js
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const inputGroupTheme = {
|
||||
"NativeBase.Icon": {
|
||||
fontSize: 24,
|
||||
color: variables.sTabBarActiveTextColor,
|
||||
paddingHorizontal: 5
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
fontSize: 24,
|
||||
color: variables.sTabBarActiveTextColor,
|
||||
paddingHorizontal: 5
|
||||
},
|
||||
"NativeBase.Input": {
|
||||
height: variables.inputHeightBase,
|
||||
color: variables.inputColor,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
flex: 1,
|
||||
fontSize: variables.inputFontSize,
|
||||
lineHeight: variables.inputLineHeight
|
||||
},
|
||||
".underline": {
|
||||
".success": {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
".error": {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
paddingLeft: 5,
|
||||
borderWidth: variables.borderWidth,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
".regular": {
|
||||
".success": {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
".error": {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
paddingLeft: 5,
|
||||
borderWidth: variables.borderWidth,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
".rounded": {
|
||||
".success": {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
".error": {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
paddingLeft: 5,
|
||||
borderWidth: variables.borderWidth,
|
||||
borderRadius: variables.inputGroupRoundedBorderRadius,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
|
||||
".success": {
|
||||
"NativeBase.Icon": {
|
||||
color: variables.inputSuccessBorderColor
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.inputSuccessBorderColor
|
||||
},
|
||||
".rounded": {
|
||||
borderRadius: 30,
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
".regular": {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
".underline": {
|
||||
borderWidth: variables.borderWidth,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
|
||||
".error": {
|
||||
"NativeBase.Icon": {
|
||||
color: variables.inputErrorBorderColor
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.inputErrorBorderColor
|
||||
},
|
||||
".rounded": {
|
||||
borderRadius: 30,
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
".regular": {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
".underline": {
|
||||
borderWidth: variables.borderWidth,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
".disabled": {
|
||||
"NativeBase.Icon": {
|
||||
color: "#384850"
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: "#384850"
|
||||
}
|
||||
},
|
||||
|
||||
paddingLeft: 5,
|
||||
borderWidth: variables.borderWidth,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputBorderColor,
|
||||
backgroundColor: "transparent",
|
||||
flexDirection: "row",
|
||||
alignItems: "center"
|
||||
};
|
||||
|
||||
return inputGroupTheme;
|
||||
};
|
||||
240
native-base-theme/components/Item.js
Normal file
240
native-base-theme/components/Item.js
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
// @flow
|
||||
|
||||
import { Platform } from "react-native";
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const itemTheme = {
|
||||
".floatingLabel": {
|
||||
"NativeBase.Input": {
|
||||
height: 50,
|
||||
top: 8,
|
||||
paddingTop: 3,
|
||||
paddingBottom: 7,
|
||||
".multiline": {
|
||||
minHeight: variables.inputHeightBase,
|
||||
paddingTop: Platform.OS === "ios" ? 10 : 3,
|
||||
paddingBottom: Platform.OS === "ios" ? 14 : 10
|
||||
}
|
||||
},
|
||||
"NativeBase.Label": {
|
||||
paddingTop: 5
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
top: 6,
|
||||
paddingTop: 8
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
top: 6,
|
||||
paddingTop: 8
|
||||
}
|
||||
},
|
||||
".fixedLabel": {
|
||||
"NativeBase.Label": {
|
||||
position: null,
|
||||
top: null,
|
||||
left: null,
|
||||
right: null,
|
||||
flex: 1,
|
||||
height: null,
|
||||
width: null,
|
||||
fontSize: variables.inputFontSize
|
||||
},
|
||||
"NativeBase.Input": {
|
||||
flex: 2,
|
||||
fontSize: variables.inputFontSize
|
||||
}
|
||||
},
|
||||
".stackedLabel": {
|
||||
"NativeBase.Label": {
|
||||
position: null,
|
||||
top: null,
|
||||
left: null,
|
||||
right: null,
|
||||
paddingTop: 5,
|
||||
alignSelf: "flex-start",
|
||||
fontSize: variables.inputFontSize - 2
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
marginTop: 36
|
||||
},
|
||||
"NativeBase.Input": {
|
||||
alignSelf: Platform.OS === "ios" ? "stretch" : "flex-start",
|
||||
flex: 1,
|
||||
width: Platform.OS === "ios" ? null : variables.deviceWidth - 25,
|
||||
fontSize: variables.inputFontSize,
|
||||
lineHeight: variables.inputLineHeight - 6,
|
||||
".secureTextEntry": {
|
||||
fontSize: variables.inputFontSize - 4
|
||||
},
|
||||
".multiline": {
|
||||
paddingTop: Platform.OS === "ios" ? 9 : undefined,
|
||||
paddingBottom: Platform.OS === "ios" ? 9 : undefined
|
||||
}
|
||||
},
|
||||
flexDirection: null,
|
||||
minHeight: variables.inputHeightBase + 15
|
||||
},
|
||||
".inlineLabel": {
|
||||
"NativeBase.Label": {
|
||||
position: null,
|
||||
top: null,
|
||||
left: null,
|
||||
right: null,
|
||||
paddingRight: 20,
|
||||
height: null,
|
||||
width: null,
|
||||
fontSize: variables.inputFontSize
|
||||
},
|
||||
"NativeBase.Input": {
|
||||
paddingLeft: 5,
|
||||
fontSize: variables.inputFontSize
|
||||
},
|
||||
flexDirection: "row"
|
||||
},
|
||||
"NativeBase.Label": {
|
||||
fontSize: variables.inputFontSize,
|
||||
color: variables.inputColorPlaceholder,
|
||||
paddingRight: 5
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
fontSize: 24,
|
||||
paddingRight: 8
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
fontSize: 24,
|
||||
paddingRight: 8
|
||||
},
|
||||
"NativeBase.Input": {
|
||||
".multiline": {
|
||||
height: null
|
||||
},
|
||||
height: variables.inputHeightBase,
|
||||
color: variables.inputColor,
|
||||
flex: 1,
|
||||
top: Platform.OS === "ios" ? 1.5 : undefined,
|
||||
fontSize: variables.inputFontSize
|
||||
},
|
||||
".underline": {
|
||||
"NativeBase.Input": {
|
||||
paddingLeft: 15
|
||||
},
|
||||
".success": {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
".error": {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
".regular": {
|
||||
"NativeBase.Input": {
|
||||
paddingLeft: 8
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
paddingLeft: 10
|
||||
},
|
||||
".success": {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
".error": {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
".rounded": {
|
||||
"NativeBase.Input": {
|
||||
paddingLeft: 8
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
paddingLeft: 10
|
||||
},
|
||||
".success": {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
".error": {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderRadius: 30,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
|
||||
".success": {
|
||||
"NativeBase.Icon": {
|
||||
color: variables.inputSuccessBorderColor
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.inputSuccessBorderColor
|
||||
},
|
||||
".rounded": {
|
||||
borderRadius: 30,
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
".regular": {
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
".underline": {
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
borderColor: variables.inputSuccessBorderColor
|
||||
},
|
||||
|
||||
".error": {
|
||||
"NativeBase.Icon": {
|
||||
color: variables.inputErrorBorderColor
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.inputErrorBorderColor
|
||||
},
|
||||
".rounded": {
|
||||
borderRadius: 30,
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
".regular": {
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
".underline": {
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
borderColor: variables.inputErrorBorderColor
|
||||
},
|
||||
".disabled": {
|
||||
"NativeBase.Icon": {
|
||||
color: "#384850"
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: "#384850"
|
||||
}
|
||||
},
|
||||
".picker": {
|
||||
marginLeft: 0
|
||||
},
|
||||
|
||||
borderWidth: variables.borderWidth * 2,
|
||||
borderTopWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.inputBorderColor,
|
||||
backgroundColor: "transparent",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginLeft: 2
|
||||
};
|
||||
|
||||
return itemTheme;
|
||||
};
|
||||
14
native-base-theme/components/Label.js
Normal file
14
native-base-theme/components/Label.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const labelTheme = {
|
||||
".focused": {
|
||||
width: 0
|
||||
},
|
||||
fontSize: 17
|
||||
};
|
||||
|
||||
return labelTheme;
|
||||
};
|
||||
13
native-base-theme/components/Left.js
Normal file
13
native-base-theme/components/Left.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const leftTheme = {
|
||||
flex: 1,
|
||||
alignSelf: 'center',
|
||||
alignItems: 'flex-start',
|
||||
};
|
||||
|
||||
return leftTheme;
|
||||
};
|
||||
444
native-base-theme/components/ListItem.js
Normal file
444
native-base-theme/components/ListItem.js
Normal file
|
|
@ -0,0 +1,444 @@
|
|||
// @flow
|
||||
|
||||
import { Platform, PixelRatio } from "react-native";
|
||||
|
||||
import pickerTheme from "./Picker";
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const platform = variables.platform;
|
||||
const selectedStyle = {
|
||||
"NativeBase.Text": {
|
||||
color: variables.listItemSelected
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.listItemSelected
|
||||
}
|
||||
};
|
||||
|
||||
const listItemTheme = {
|
||||
"NativeBase.InputGroup": {
|
||||
"NativeBase.Icon": {
|
||||
paddingRight: 5
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
paddingRight: 5
|
||||
},
|
||||
"NativeBase.Input": {
|
||||
paddingHorizontal: 5
|
||||
},
|
||||
flex: 1,
|
||||
borderWidth: null,
|
||||
margin: -10,
|
||||
borderBottomColor: "transparent"
|
||||
},
|
||||
".searchBar": {
|
||||
"NativeBase.Item": {
|
||||
"NativeBase.Icon": {
|
||||
backgroundColor: "transparent",
|
||||
color: variables.dropdownLinkColor,
|
||||
fontSize:
|
||||
platform === "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": {
|
||||
...selectedStyle
|
||||
},
|
||||
"NativeBase.Body": {
|
||||
...selectedStyle
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
...selectedStyle
|
||||
},
|
||||
...selectedStyle
|
||||
},
|
||||
"NativeBase.Left": {
|
||||
"NativeBase.Body": {
|
||||
"NativeBase.Text": {
|
||||
".note": {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: "200"
|
||||
},
|
||||
fontWeight: "600"
|
||||
},
|
||||
marginLeft: 10,
|
||||
alignItems: null,
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
width: variables.iconFontSize - 10,
|
||||
fontSize: variables.iconFontSize - 10
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
width: variables.iconFontSize - 10,
|
||||
fontSize: variables.iconFontSize - 10
|
||||
},
|
||||
"NativeBase.Text": {
|
||||
alignSelf: "center"
|
||||
},
|
||||
flexDirection: "row"
|
||||
},
|
||||
"NativeBase.Body": {
|
||||
"NativeBase.Text": {
|
||||
marginHorizontal: variables.listItemPadding,
|
||||
".note": {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: "200"
|
||||
}
|
||||
},
|
||||
alignSelf: null,
|
||||
alignItems: null
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
"NativeBase.Badge": {
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.PickerNB": {
|
||||
"NativeBase.Button": {
|
||||
marginRight: -15,
|
||||
"NativeBase.Text": {
|
||||
color: variables.topTabBarActiveTextColor
|
||||
}
|
||||
}
|
||||
},
|
||||
"NativeBase.Button": {
|
||||
alignSelf: null,
|
||||
".transparent": {
|
||||
"NativeBase.Text": {
|
||||
color: variables.topTabBarActiveTextColor
|
||||
}
|
||||
}
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
alignSelf: null,
|
||||
fontSize: variables.iconFontSize - 8,
|
||||
color: "#c9c8cd"
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
alignSelf: null,
|
||||
fontSize: variables.iconFontSize - 8,
|
||||
color: "#c9c8cd"
|
||||
},
|
||||
"NativeBase.Text": {
|
||||
".note": {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: "200"
|
||||
},
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Thumbnail": {
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Image": {
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Radio": {
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Checkbox": {
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.Switch": {
|
||||
alignSelf: null
|
||||
},
|
||||
padding: null,
|
||||
flex: 0.28
|
||||
},
|
||||
"NativeBase.Text": {
|
||||
".note": {
|
||||
color: variables.listNoteColor,
|
||||
fontWeight: "200"
|
||||
},
|
||||
alignSelf: "center"
|
||||
},
|
||||
".last": {
|
||||
marginLeft: -(variables.listItemPadding + 5),
|
||||
paddingLeft: (variables.listItemPadding + 5) * 2,
|
||||
top: 1
|
||||
},
|
||||
".avatar": {
|
||||
"NativeBase.Left": {
|
||||
flex: 0,
|
||||
alignSelf: "flex-start",
|
||||
paddingTop: 14
|
||||
},
|
||||
"NativeBase.Body": {
|
||||
"NativeBase.Text": {
|
||||
marginLeft: null
|
||||
},
|
||||
flex: 1,
|
||||
paddingVertical: variables.listItemPadding,
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor,
|
||||
marginLeft: variables.listItemPadding + 5
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
"NativeBase.Text": {
|
||||
".note": {
|
||||
fontSize: variables.noteFontSize - 2
|
||||
}
|
||||
},
|
||||
flex: 0,
|
||||
paddingRight: variables.listItemPadding + 5,
|
||||
alignSelf: "stretch",
|
||||
paddingVertical: variables.listItemPadding,
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor
|
||||
},
|
||||
".noBorder": {
|
||||
"NativeBase.Body": {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
borderBottomWidth: null
|
||||
}
|
||||
},
|
||||
borderBottomWidth: null,
|
||||
paddingVertical: null,
|
||||
paddingRight: null
|
||||
},
|
||||
".thumbnail": {
|
||||
"NativeBase.Left": {
|
||||
flex: 0
|
||||
},
|
||||
"NativeBase.Body": {
|
||||
"NativeBase.Text": {
|
||||
marginLeft: null
|
||||
},
|
||||
flex: 1,
|
||||
paddingVertical: variables.listItemPadding + 8,
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor,
|
||||
marginLeft: variables.listItemPadding + 5
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
"NativeBase.Button": {
|
||||
".transparent": {
|
||||
"NativeBase.Text": {
|
||||
fontSize: variables.listNoteSize,
|
||||
color: variables.sTabBarActiveTextColor
|
||||
}
|
||||
},
|
||||
height: null
|
||||
},
|
||||
flex: 0,
|
||||
justifyContent: "center",
|
||||
alignSelf: "stretch",
|
||||
paddingRight: variables.listItemPadding + 5,
|
||||
paddingVertical: variables.listItemPadding + 5,
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor
|
||||
},
|
||||
".noBorder": {
|
||||
"NativeBase.Body": {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
borderBottomWidth: null
|
||||
}
|
||||
},
|
||||
borderBottomWidth: null,
|
||||
paddingVertical: null,
|
||||
paddingRight: null
|
||||
},
|
||||
".icon": {
|
||||
".last": {
|
||||
"NativeBase.Body": {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor
|
||||
},
|
||||
"NativeBase.Left": {
|
||||
"NativeBase.Button": {
|
||||
"NativeBase.IconNB": {
|
||||
marginHorizontal: null,
|
||||
fontSize: variables.iconFontSize - 5
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
marginHorizontal: null,
|
||||
fontSize: variables.iconFontSize - 8
|
||||
},
|
||||
alignSelf: "center",
|
||||
height: 29,
|
||||
width: 29,
|
||||
borderRadius: 6,
|
||||
paddingVertical: null,
|
||||
paddingHorizontal: null,
|
||||
alignItems: "center",
|
||||
justifyContent: "center"
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
width: variables.iconFontSize - 5,
|
||||
fontSize: variables.iconFontSize - 2
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
width: variables.iconFontSize - 5,
|
||||
fontSize: variables.iconFontSize - 2
|
||||
},
|
||||
paddingRight: variables.listItemPadding + 5,
|
||||
flex: 0,
|
||||
height: 44,
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
},
|
||||
"NativeBase.Body": {
|
||||
"NativeBase.Text": {
|
||||
marginLeft: null,
|
||||
fontSize: 17
|
||||
},
|
||||
flex: 1,
|
||||
height: 44,
|
||||
justifyContent: "center",
|
||||
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
borderColor: variables.listBorderColor
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
"NativeBase.Text": {
|
||||
textAlign: "center",
|
||||
color: "#8F8E95",
|
||||
fontSize: 17
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: "#C8C7CC",
|
||||
fontSize: variables.iconFontSize - 10,
|
||||
alignSelf: "center",
|
||||
paddingLeft: 10,
|
||||
paddingTop: 3
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: "#C8C7CC",
|
||||
fontSize: variables.iconFontSize - 10,
|
||||
alignSelf: "center",
|
||||
paddingLeft: 10,
|
||||
paddingTop: 3
|
||||
},
|
||||
"NativeBase.Switch": {
|
||||
marginRight: Platform.OS === "ios" ? undefined : -5,
|
||||
alignSelf: null
|
||||
},
|
||||
"NativeBase.PickerNB": {
|
||||
...pickerTheme()
|
||||
},
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
flex: 0,
|
||||
alignSelf: "stretch",
|
||||
height: 44,
|
||||
justifyContent: "flex-end",
|
||||
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
borderColor: variables.listBorderColor,
|
||||
paddingRight: variables.listItemPadding + 5
|
||||
},
|
||||
".noBorder": {
|
||||
"NativeBase.Body": {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
borderBottomWidth: null
|
||||
}
|
||||
},
|
||||
borderBottomWidth: null,
|
||||
paddingVertical: null,
|
||||
paddingRight: null,
|
||||
height: 44,
|
||||
justifyContent: "center"
|
||||
},
|
||||
".noBorder": {
|
||||
borderBottomWidth: null
|
||||
},
|
||||
".noIndent": {
|
||||
marginLeft: null,
|
||||
padding: variables.listItemPadding,
|
||||
paddingLeft: variables.listItemPadding + 6
|
||||
},
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
paddingRight: variables.listItemPadding + 6,
|
||||
paddingVertical: variables.listItemPadding + 3,
|
||||
marginLeft: variables.listItemPadding + 6,
|
||||
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
backgroundColor: variables.listBg,
|
||||
borderColor: variables.listBorderColor
|
||||
};
|
||||
|
||||
return listItemTheme;
|
||||
};
|
||||
16
native-base-theme/components/Picker.android.js
Normal file
16
native-base-theme/components/Picker.android.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const pickerTheme = {
|
||||
".note": {
|
||||
color: "#8F8E95"
|
||||
},
|
||||
// width: 90,
|
||||
marginRight: -4,
|
||||
flexGrow: 1
|
||||
};
|
||||
|
||||
return pickerTheme;
|
||||
};
|
||||
9
native-base-theme/components/Picker.ios.js
Normal file
9
native-base-theme/components/Picker.ios.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const pickerTheme = {};
|
||||
|
||||
return pickerTheme;
|
||||
};
|
||||
16
native-base-theme/components/Picker.js
Normal file
16
native-base-theme/components/Picker.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const pickerTheme = {
|
||||
".note": {
|
||||
color: "#8F8E95"
|
||||
},
|
||||
// width: 90,
|
||||
marginRight: -4,
|
||||
flexGrow: 1
|
||||
};
|
||||
|
||||
return pickerTheme;
|
||||
};
|
||||
28
native-base-theme/components/Radio.js
Normal file
28
native-base-theme/components/Radio.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
// @flow
|
||||
|
||||
import { Platform } from "react-native";
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const radioTheme = {
|
||||
".selected": {
|
||||
"NativeBase.IconNB": {
|
||||
color: Platform.OS === "ios"
|
||||
? variables.radioColor
|
||||
: 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;
|
||||
};
|
||||
16
native-base-theme/components/Right.js
Normal file
16
native-base-theme/components/Right.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const rightTheme = {
|
||||
'NativeBase.Button': {
|
||||
alignSelf: null,
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: 'center',
|
||||
alignItems: 'flex-end',
|
||||
};
|
||||
|
||||
return rightTheme;
|
||||
};
|
||||
56
native-base-theme/components/Segment.js
Normal file
56
native-base-theme/components/Segment.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
// @flow
|
||||
|
||||
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,
|
||||
paddingTop: 3,
|
||||
paddingBottom: 3,
|
||||
height: 30,
|
||||
backgroundColor: "transparent",
|
||||
borderWidth: 1,
|
||||
borderLeftWidth: 0,
|
||||
borderColor: variables.segmentBorderColor,
|
||||
elevation: 0,
|
||||
".active": {
|
||||
backgroundColor: variables.segmentActiveBackgroundColor,
|
||||
"NativeBase.Text": {
|
||||
color: variables.segmentActiveTextColor
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
color: variables.segmentActiveTextColor
|
||||
}
|
||||
},
|
||||
".first": {
|
||||
borderTopLeftRadius: platform === "ios" ? 5 : undefined,
|
||||
borderBottomLeftRadius: platform === "ios" ? 5 : undefined,
|
||||
borderLeftWidth: 1
|
||||
},
|
||||
".last": {
|
||||
borderTopRightRadius: platform === "ios" ? 5 : undefined,
|
||||
borderBottomRightRadius: platform === "ios" ? 5 : undefined
|
||||
},
|
||||
"NativeBase.Text": {
|
||||
color: variables.segmentTextColor,
|
||||
fontSize: 14
|
||||
},
|
||||
"NativeBase.Icon": {
|
||||
fontSize: 22,
|
||||
paddingTop: 0,
|
||||
color: variables.segmentTextColor
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return segmentTheme;
|
||||
};
|
||||
49
native-base-theme/components/Separator.js
Normal file
49
native-base-theme/components/Separator.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
// @flow
|
||||
|
||||
import variable from './../variables/platform';
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const theme = {
|
||||
'.group': {
|
||||
height: 50,
|
||||
paddingVertical: variables.listItemPadding - 8,
|
||||
paddingTop: variables.listItemPadding + 12,
|
||||
'.bordered': {
|
||||
height: 50,
|
||||
paddingVertical: variables.listItemPadding - 8,
|
||||
paddingTop: variables.listItemPadding + 12,
|
||||
},
|
||||
},
|
||||
'.bordered': {
|
||||
'.noTopBorder': {
|
||||
borderTopWidth: 0,
|
||||
},
|
||||
'.noBottomBorder': {
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
height: 35,
|
||||
paddingTop: variables.listItemPadding + 2,
|
||||
paddingBottom: variables.listItemPadding,
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
borderTopWidth: variables.borderWidth,
|
||||
borderColor: variables.listBorderColor,
|
||||
},
|
||||
'NativeBase.Text': {
|
||||
fontSize: variables.tabBarTextSize - 2,
|
||||
color: '#777',
|
||||
},
|
||||
'.noTopBorder': {
|
||||
borderTopWidth: 0,
|
||||
},
|
||||
'.noBottomBorder': {
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
height: 38,
|
||||
backgroundColor: '#F0EFF5',
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
paddingLeft: variables.listItemPadding + 5,
|
||||
};
|
||||
|
||||
return theme;
|
||||
};
|
||||
11
native-base-theme/components/Spinner.js
Normal file
11
native-base-theme/components/Spinner.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const spinnerTheme = {
|
||||
height: 80
|
||||
};
|
||||
|
||||
return spinnerTheme;
|
||||
};
|
||||
18
native-base-theme/components/Subtitle.js
Normal file
18
native-base-theme/components/Subtitle.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// @flow
|
||||
|
||||
import { Platform } from "react-native";
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const subtitleTheme = {
|
||||
fontSize: variables.subTitleFontSize,
|
||||
fontFamily: variables.titleFontfamily,
|
||||
color: variables.subtitleColor,
|
||||
textAlign: "center",
|
||||
paddingLeft: Platform.OS === "ios" ? 4 : 0,
|
||||
marginLeft: Platform.OS === "ios" ? undefined : -3
|
||||
};
|
||||
|
||||
return subtitleTheme;
|
||||
};
|
||||
48
native-base-theme/components/SwipeRow.js
Normal file
48
native-base-theme/components/SwipeRow.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const swipeRowTheme = {
|
||||
"NativeBase.ListItem": {
|
||||
".list": {
|
||||
backgroundColor: "#FFF",
|
||||
},
|
||||
marginLeft: 0,
|
||||
},
|
||||
"NativeBase.Left": {
|
||||
flex: 0,
|
||||
alignSelf: null,
|
||||
alignItems: null,
|
||||
"NativeBase.Button": {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
alignSelf: "stretch",
|
||||
borderRadius: 0,
|
||||
},
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
flex: 0,
|
||||
alignSelf: null,
|
||||
alignItems: null,
|
||||
"NativeBase.Button": {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
alignSelf: "stretch",
|
||||
borderRadius: 0,
|
||||
},
|
||||
},
|
||||
"NativeBase.Button": {
|
||||
flex: 1,
|
||||
height: null,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
alignSelf: "stretch",
|
||||
borderRadius: 0,
|
||||
},
|
||||
};
|
||||
|
||||
return swipeRowTheme;
|
||||
};
|
||||
11
native-base-theme/components/Switch.js
Normal file
11
native-base-theme/components/Switch.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const switchTheme = {
|
||||
marginVertical: -5,
|
||||
};
|
||||
|
||||
return switchTheme;
|
||||
};
|
||||
12
native-base-theme/components/Tab.js
Normal file
12
native-base-theme/components/Tab.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const tabTheme = {
|
||||
flex: 1,
|
||||
backgroundColor: "#FFF"
|
||||
};
|
||||
|
||||
return tabTheme;
|
||||
};
|
||||
57
native-base-theme/components/TabBar.js
Normal file
57
native-base-theme/components/TabBar.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const tabBarTheme = {
|
||||
".tabIcon": {
|
||||
height: undefined
|
||||
},
|
||||
".vertical": {
|
||||
height: 60
|
||||
},
|
||||
"NativeBase.Button": {
|
||||
".transparent": {
|
||||
"NativeBase.Text": {
|
||||
fontSize: variables.tabFontSize,
|
||||
color: variables.sTabBarActiveTextColor,
|
||||
fontWeight: "400"
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.sTabBarActiveTextColor
|
||||
}
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
color: variables.sTabBarActiveTextColor
|
||||
},
|
||||
"NativeBase.Text": {
|
||||
fontSize: variables.tabFontSize,
|
||||
color: variables.sTabBarActiveTextColor,
|
||||
fontWeight: "400"
|
||||
},
|
||||
".isTabActive": {
|
||||
"NativeBase.Text": {
|
||||
fontWeight: "900"
|
||||
}
|
||||
},
|
||||
flex: 1,
|
||||
alignSelf: "stretch",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: null,
|
||||
borderBottomColor: "transparent",
|
||||
backgroundColor: variables.tabBgColor
|
||||
},
|
||||
height: 45,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
borderWidth: 1,
|
||||
borderTopWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 0,
|
||||
borderBottomColor: "#ccc",
|
||||
backgroundColor: variables.tabBgColor
|
||||
};
|
||||
|
||||
return tabBarTheme;
|
||||
};
|
||||
26
native-base-theme/components/TabContainer.js
Normal file
26
native-base-theme/components/TabContainer.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
// @flow
|
||||
|
||||
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;
|
||||
};
|
||||
39
native-base-theme/components/TabHeading.js
Normal file
39
native-base-theme/components/TabHeading.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
// @flow
|
||||
|
||||
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;
|
||||
};
|
||||
17
native-base-theme/components/Text.js
Normal file
17
native-base-theme/components/Text.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const textTheme = {
|
||||
fontSize: variables.DefaultFontSize,
|
||||
fontFamily: variables.fontFamily,
|
||||
color: variables.textColor,
|
||||
".note": {
|
||||
color: "#a7a7a7",
|
||||
fontSize: variables.noteFontSize
|
||||
}
|
||||
};
|
||||
|
||||
return textTheme;
|
||||
};
|
||||
25
native-base-theme/components/Textarea.js
Normal file
25
native-base-theme/components/Textarea.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const textAreaTheme = {
|
||||
".underline": {
|
||||
borderBottomWidth: variables.borderWidth,
|
||||
marginTop: 5,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
".bordered": {
|
||||
borderWidth: 1,
|
||||
marginTop: 5,
|
||||
borderColor: variables.inputBorderColor
|
||||
},
|
||||
color: variables.textColor,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 5,
|
||||
fontSize: 15,
|
||||
textAlignVertical: "top"
|
||||
};
|
||||
|
||||
return textAreaTheme;
|
||||
};
|
||||
42
native-base-theme/components/Thumbnail.js
Normal file
42
native-base-theme/components/Thumbnail.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
// @flow
|
||||
|
||||
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;
|
||||
};
|
||||
20
native-base-theme/components/Title.js
Normal file
20
native-base-theme/components/Title.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
// @flow
|
||||
|
||||
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" ? "700" : undefined,
|
||||
textAlign: "center",
|
||||
paddingLeft: Platform.OS === "ios" ? 4 : 0,
|
||||
marginLeft: Platform.OS === "ios" ? undefined : -3,
|
||||
paddingTop: 1
|
||||
};
|
||||
|
||||
return titleTheme;
|
||||
};
|
||||
40
native-base-theme/components/Toast.js
Normal file
40
native-base-theme/components/Toast.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
// @flow
|
||||
|
||||
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;
|
||||
};
|
||||
13
native-base-theme/components/View.js
Normal file
13
native-base-theme/components/View.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// @flow
|
||||
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const viewTheme = {
|
||||
".padder": {
|
||||
padding: variables.contentPadding
|
||||
}
|
||||
};
|
||||
|
||||
return viewTheme;
|
||||
};
|
||||
242
native-base-theme/components/index.js
Normal file
242
native-base-theme/components/index.js
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
// @flow
|
||||
|
||||
import _ from "lodash";
|
||||
import bodyTheme from "./Body";
|
||||
import leftTheme from "./Left";
|
||||
import rightTheme from "./Right";
|
||||
import headerTheme from "./Header";
|
||||
import switchTheme from "./Switch";
|
||||
import thumbnailTheme from "./Thumbnail";
|
||||
import containerTheme from "./Container";
|
||||
import contentTheme from "./Content";
|
||||
import buttonTheme from "./Button";
|
||||
import titleTheme from "./Title";
|
||||
import subtitleTheme from "./Subtitle";
|
||||
import inputGroupTheme from "./InputGroup";
|
||||
import badgeTheme from "./Badge";
|
||||
import checkBoxTheme from "./CheckBox";
|
||||
import cardTheme from "./Card";
|
||||
import radioTheme from "./Radio";
|
||||
import h3Theme from "./H3";
|
||||
import h2Theme from "./H2";
|
||||
import h1Theme from "./H1";
|
||||
import footerTheme from "./Footer";
|
||||
import footerTabTheme from "./FooterTab";
|
||||
import fabTheme from "./Fab";
|
||||
import itemTheme from "./Item";
|
||||
import labelTheme from "./Label";
|
||||
import textAreaTheme from "./Textarea";
|
||||
import textTheme from "./Text";
|
||||
import toastTheme from "./Toast";
|
||||
import tabTheme from "./Tab";
|
||||
import tabBarTheme from "./TabBar";
|
||||
import tabContainerTheme from "./TabContainer";
|
||||
import viewTheme from "./View";
|
||||
import tabHeadingTheme from "./TabHeading";
|
||||
import iconTheme from "./Icon";
|
||||
import inputTheme from "./Input";
|
||||
import swipeRowTheme from "./SwipeRow";
|
||||
import segmentTheme from "./Segment";
|
||||
import spinnerTheme from "./Spinner";
|
||||
import cardItemTheme from "./CardItem";
|
||||
import listItemTheme from "./ListItem";
|
||||
import formTheme from "./Form";
|
||||
import separatorTheme from "./Separator";
|
||||
import pickerTheme from "./Picker"
|
||||
import variable from "./../variables/platform";
|
||||
|
||||
export default (variables /*: * */ = variable) => {
|
||||
const theme = {
|
||||
variables,
|
||||
"NativeBase.Left": {
|
||||
...leftTheme(variables)
|
||||
},
|
||||
"NativeBase.Right": {
|
||||
...rightTheme(variables)
|
||||
},
|
||||
"NativeBase.Body": {
|
||||
...bodyTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Header": {
|
||||
...headerTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Button": {
|
||||
...buttonTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Title": {
|
||||
...titleTheme(variables)
|
||||
},
|
||||
"NativeBase.Subtitle": {
|
||||
...subtitleTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.InputGroup": {
|
||||
...inputGroupTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Input": {
|
||||
...inputTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Badge": {
|
||||
...badgeTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.CheckBox": {
|
||||
...checkBoxTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Radio": {
|
||||
...radioTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Card": {
|
||||
...cardTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.CardItem": {
|
||||
...cardItemTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Toast": {
|
||||
...toastTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.H1": {
|
||||
...h1Theme(variables)
|
||||
},
|
||||
"NativeBase.H2": {
|
||||
...h2Theme(variables)
|
||||
},
|
||||
"NativeBase.H3": {
|
||||
...h3Theme(variables)
|
||||
},
|
||||
"NativeBase.Form": {
|
||||
...formTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Container": {
|
||||
...containerTheme(variables)
|
||||
},
|
||||
"NativeBase.Content": {
|
||||
...contentTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Footer": {
|
||||
...footerTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Tabs": {
|
||||
flex: 1
|
||||
},
|
||||
|
||||
"NativeBase.FooterTab": {
|
||||
...footerTabTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.ListItem": {
|
||||
...listItemTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.ListItem1": {
|
||||
...listItemTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Icon": {
|
||||
...iconTheme(variables)
|
||||
},
|
||||
"NativeBase.IconNB": {
|
||||
...iconTheme(variables)
|
||||
},
|
||||
"NativeBase.Text": {
|
||||
...textTheme(variables)
|
||||
},
|
||||
"NativeBase.Spinner": {
|
||||
...spinnerTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Fab": {
|
||||
...fabTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Item": {
|
||||
...itemTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Label": {
|
||||
...labelTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Textarea": {
|
||||
...textAreaTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.PickerNB": {
|
||||
...pickerTheme(variables),
|
||||
"NativeBase.Button": {
|
||||
"NativeBase.Text": {}
|
||||
}
|
||||
},
|
||||
|
||||
"NativeBase.Tab": {
|
||||
...tabTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.Segment": {
|
||||
...segmentTheme(variables)
|
||||
},
|
||||
|
||||
"NativeBase.TabBar": {
|
||||
...tabBarTheme(variables)
|
||||
},
|
||||
"NativeBase.ViewNB": {
|
||||
...viewTheme(variables)
|
||||
},
|
||||
"NativeBase.TabHeading": {
|
||||
...tabHeadingTheme(variables)
|
||||
},
|
||||
"NativeBase.TabContainer": {
|
||||
...tabContainerTheme(variables)
|
||||
},
|
||||
"NativeBase.Switch": {
|
||||
...switchTheme(variables)
|
||||
},
|
||||
"NativeBase.Separator": {
|
||||
...separatorTheme(variables)
|
||||
},
|
||||
"NativeBase.SwipeRow": {
|
||||
...swipeRowTheme(variables)
|
||||
},
|
||||
"NativeBase.Thumbnail": {
|
||||
...thumbnailTheme(variables)
|
||||
}
|
||||
};
|
||||
|
||||
const cssifyTheme = (grandparent, parent, parentKey) => {
|
||||
_.forEach(parent, (style, styleName) => {
|
||||
if (
|
||||
styleName.indexOf(".") === 0 &&
|
||||
parentKey &&
|
||||
parentKey.indexOf(".") === 0
|
||||
) {
|
||||
if (grandparent) {
|
||||
if (!grandparent[styleName]) {
|
||||
grandparent[styleName] = {};
|
||||
} else {
|
||||
grandparent[styleName][parentKey] = style;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (style && typeof style === "object" && styleName !== "fontVariant" && styleName !== "transform") {
|
||||
cssifyTheme(parent, style, styleName);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
cssifyTheme(null, theme, null);
|
||||
|
||||
return theme;
|
||||
};
|
||||
283
native-base-theme/variables/commonColor.js
Normal file
283
native-base-theme/variables/commonColor.js
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
// @flow
|
||||
|
||||
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;
|
||||
const isIphoneX =
|
||||
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
|
||||
|
||||
export default {
|
||||
platformStyle,
|
||||
platform,
|
||||
|
||||
//Accordion
|
||||
headerStyle: "#edebed",
|
||||
iconStyle: "#000",
|
||||
contentStyle: "#f5f4f5",
|
||||
expandedIconStyle: "#000",
|
||||
accordionBorderColor: "#d3d3d3",
|
||||
|
||||
//Android
|
||||
androidRipple: true,
|
||||
androidRippleColor: "rgba(256, 256, 256, 0.3)",
|
||||
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
|
||||
btnUppercaseAndroidText: true,
|
||||
|
||||
// Badge
|
||||
badgeBg: "#ED1727",
|
||||
badgeColor: "#fff",
|
||||
badgePadding: platform === "ios" ? 3 : 0,
|
||||
|
||||
// Button
|
||||
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
|
||||
btnDisabledBg: "#b5b5b5",
|
||||
buttonPadding: 6,
|
||||
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;
|
||||
},
|
||||
get iconSizeLarge() {
|
||||
return this.iconFontSize * 1.5;
|
||||
},
|
||||
get iconSizeSmall() {
|
||||
return this.iconFontSize * 0.6;
|
||||
},
|
||||
|
||||
// Card
|
||||
cardDefaultBg: "#fff",
|
||||
cardBorderColor: "#ccc",
|
||||
cardBorderRadius: 2,
|
||||
cardItemPadding: platform === "ios" ? 10 : 12,
|
||||
|
||||
// CheckBox
|
||||
CheckboxRadius: platform === "ios" ? 13 : 0,
|
||||
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
|
||||
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
|
||||
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
|
||||
CheckboxIconSize: platform === "ios" ? 21 : 16,
|
||||
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
|
||||
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
|
||||
checkboxBgColor: "#039BE5",
|
||||
checkboxSize: 20,
|
||||
checkboxTickColor: "#fff",
|
||||
|
||||
// Color
|
||||
brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5",
|
||||
brandInfo: "#62B1F6",
|
||||
brandSuccess: "#5cb85c",
|
||||
brandDanger: "#d9534f",
|
||||
brandWarning: "#f0ad4e",
|
||||
brandDark: "#000",
|
||||
brandLight: "#f4f4f4",
|
||||
|
||||
//Container
|
||||
containerBgColor: "#fff",
|
||||
|
||||
//Date Picker
|
||||
datePickerTextColor: "#000",
|
||||
datePickerBg: "transparent",
|
||||
|
||||
// Font
|
||||
DefaultFontSize: 16,
|
||||
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" : "#3F51B5",
|
||||
footerPaddingBottom: 0,
|
||||
|
||||
// FooterTab
|
||||
tabBarTextColor: platform === "ios" ? "#737373" : "#bfc6ea",
|
||||
tabBarTextSize: platform === "ios" ? 14 : 11,
|
||||
activeTab: platform === "ios" ? "#007aff" : "#fff",
|
||||
sTabBarActiveTextColor: "#007aff",
|
||||
tabBarActiveTextColor: platform === "ios" ? "#2874F0" : "#fff",
|
||||
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
|
||||
|
||||
// Header
|
||||
toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
|
||||
toolbarHeight: platform === "ios" ? 64 : 56,
|
||||
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
|
||||
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
|
||||
searchBarHeight: platform === "ios" ? 30 : 40,
|
||||
searchBarInputHeight: platform === "ios" ? 30 : 50,
|
||||
toolbarBtnTextColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
iosStatusbar: "dark-content",
|
||||
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5",
|
||||
get statusBarColor() {
|
||||
return color(this.toolbarDefaultBg)
|
||||
.darken(0.2)
|
||||
.hex();
|
||||
},
|
||||
get darkenHeader() {
|
||||
return color(this.tabBgColor)
|
||||
.darken(0.03)
|
||||
.hex();
|
||||
},
|
||||
|
||||
// Icon
|
||||
iconFamily: "Ionicons",
|
||||
iconFontSize: platform === "ios" ? 30 : 28,
|
||||
iconHeaderSize: platform === "ios" ? 33 : 24,
|
||||
|
||||
// InputGroup
|
||||
inputFontSize: 17,
|
||||
inputBorderColor: "#D9D5DC",
|
||||
inputSuccessBorderColor: "#2b8339",
|
||||
inputErrorBorderColor: "#ed2f2f",
|
||||
inputHeightBase: 50,
|
||||
get inputColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get inputColorPlaceholder() {
|
||||
return "#575757";
|
||||
},
|
||||
|
||||
// Line Height
|
||||
btnLineHeight: 19,
|
||||
lineHeightH1: 32,
|
||||
lineHeightH2: 27,
|
||||
lineHeightH3: 22,
|
||||
lineHeight: platform === "ios" ? 20 : 24,
|
||||
|
||||
// List
|
||||
listBg: "transparent",
|
||||
listBorderColor: "#c9c9c9",
|
||||
listDividerBg: "#f4f4f4",
|
||||
listBtnUnderlayColor: "#DDD",
|
||||
listItemPadding: platform === "ios" ? 10 : 12,
|
||||
listNoteColor: "#808080",
|
||||
listNoteSize: 13,
|
||||
listItemSelected: platform === "ios" ? "#007aff" : "#3F51B5",
|
||||
|
||||
// Progress Bar
|
||||
defaultProgressColor: "#E4202D",
|
||||
inverseProgressColor: "#1A191B",
|
||||
|
||||
// Radio Button
|
||||
radioBtnSize: platform === "ios" ? 25 : 23,
|
||||
radioSelectedColorAndroid: "#3F51B5",
|
||||
radioBtnLineHeight: platform === "ios" ? 29 : 24,
|
||||
get radioColor() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
|
||||
// Segment
|
||||
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
|
||||
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
|
||||
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
|
||||
|
||||
// Spinner
|
||||
defaultSpinnerColor: "#45D56E",
|
||||
inverseSpinnerColor: "#1A191B",
|
||||
|
||||
// Tab
|
||||
tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
|
||||
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
|
||||
topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
|
||||
topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
|
||||
// Tabs
|
||||
tabBgColor: "#F8F8F8",
|
||||
tabFontSize: 15,
|
||||
|
||||
// Text
|
||||
textColor: "#000",
|
||||
inverseTextColor: "#fff",
|
||||
noteFontSize: 14,
|
||||
get defaultTextColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
|
||||
// Title
|
||||
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
|
||||
titleFontSize: platform === "ios" ? 17 : 19,
|
||||
subTitleFontSize: platform === "ios" ? 11 : 14,
|
||||
subtitleColor: platform === "ios" ? "#000" : "#fff",
|
||||
titleFontColor: platform === "ios" ? "#000" : "#fff",
|
||||
|
||||
// Other
|
||||
borderRadiusBase: platform === "ios" ? 5 : 2,
|
||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
contentPadding: 10,
|
||||
dropdownLinkColor: "#414142",
|
||||
inputLineHeight: 24,
|
||||
deviceWidth,
|
||||
deviceHeight,
|
||||
isIphoneX,
|
||||
inputGroupRoundedBorderRadius: 30,
|
||||
|
||||
//iPhoneX SafeArea
|
||||
Inset: {
|
||||
portrait: {
|
||||
topInset: 24,
|
||||
leftInset: 0,
|
||||
rightInset: 0,
|
||||
bottomInset: 34
|
||||
},
|
||||
landscape: {
|
||||
topInset: 0,
|
||||
leftInset: 44,
|
||||
rightInset: 44,
|
||||
bottomInset: 21
|
||||
}
|
||||
}
|
||||
};
|
||||
283
native-base-theme/variables/material.js
Normal file
283
native-base-theme/variables/material.js
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
// @flow
|
||||
|
||||
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";
|
||||
const isIphoneX =
|
||||
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
|
||||
|
||||
export default {
|
||||
platformStyle,
|
||||
platform,
|
||||
|
||||
//Accordion
|
||||
headerStyle: "#edebed",
|
||||
iconStyle: "#000",
|
||||
contentStyle: "#f5f4f5",
|
||||
expandedIconStyle: "#000",
|
||||
accordionBorderColor: "#d3d3d3",
|
||||
|
||||
// Android
|
||||
androidRipple: true,
|
||||
androidRippleColor: "rgba(256, 256, 256, 0.3)",
|
||||
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
|
||||
btnUppercaseAndroidText: true,
|
||||
|
||||
// Badge
|
||||
badgeBg: "#ED1727",
|
||||
badgeColor: "#fff",
|
||||
badgePadding: 0,
|
||||
|
||||
// Button
|
||||
btnFontFamily: "Roboto",
|
||||
btnDisabledBg: "#b5b5b5",
|
||||
buttonPadding: 6,
|
||||
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 this.fontSizeBase - 1;
|
||||
},
|
||||
get btnTextSizeLarge() {
|
||||
return this.fontSizeBase * 1.5;
|
||||
},
|
||||
get btnTextSizeSmall() {
|
||||
return this.fontSizeBase * 0.8;
|
||||
},
|
||||
get borderRadiusLarge() {
|
||||
return this.fontSizeBase * 3.8;
|
||||
},
|
||||
get iconSizeLarge() {
|
||||
return this.iconFontSize * 1.5;
|
||||
},
|
||||
get iconSizeSmall() {
|
||||
return this.iconFontSize * 0.6;
|
||||
},
|
||||
|
||||
// Card
|
||||
cardDefaultBg: "#fff",
|
||||
cardBorderColor: "#ccc",
|
||||
cardBorderRadius: 2,
|
||||
cardItemPadding: platform === "ios" ? 10 : 12,
|
||||
|
||||
// CheckBox
|
||||
CheckboxRadius: 0,
|
||||
CheckboxBorderWidth: 2,
|
||||
CheckboxPaddingLeft: 2,
|
||||
CheckboxPaddingBottom: 5,
|
||||
CheckboxIconSize: 16,
|
||||
CheckboxIconMarginTop: 1,
|
||||
CheckboxFontSize: 17,
|
||||
checkboxBgColor: "#039BE5",
|
||||
checkboxSize: 20,
|
||||
checkboxTickColor: "#fff",
|
||||
|
||||
// Color
|
||||
brandPrimary: "#3F51B5",
|
||||
brandInfo: "#62B1F6",
|
||||
brandSuccess: "#5cb85c",
|
||||
brandDanger: "#d9534f",
|
||||
brandWarning: "#f0ad4e",
|
||||
brandDark: "#000",
|
||||
brandLight: "#f4f4f4",
|
||||
|
||||
//Container
|
||||
containerBgColor: "#fff",
|
||||
|
||||
//Date Picker
|
||||
datePickerTextColor: "#000",
|
||||
datePickerBg: "transparent",
|
||||
|
||||
// Font
|
||||
DefaultFontSize: 16,
|
||||
fontFamily: "Roboto",
|
||||
fontSizeBase: 15,
|
||||
get fontSizeH1() {
|
||||
return this.fontSizeBase * 1.8;
|
||||
},
|
||||
get fontSizeH2() {
|
||||
return this.fontSizeBase * 1.6;
|
||||
},
|
||||
get fontSizeH3() {
|
||||
return this.fontSizeBase * 1.4;
|
||||
},
|
||||
|
||||
// Footer
|
||||
footerHeight: 55,
|
||||
footerDefaultBg: "#3F51B5",
|
||||
footerPaddingBottom: 0,
|
||||
|
||||
// FooterTab
|
||||
tabBarTextColor: "#bfc6ea",
|
||||
tabBarTextSize: 11,
|
||||
activeTab: "#fff",
|
||||
sTabBarActiveTextColor: "#007aff",
|
||||
tabBarActiveTextColor: "#fff",
|
||||
tabActiveBgColor: "#3F51B5",
|
||||
|
||||
// Header
|
||||
toolbarBtnColor: "#fff",
|
||||
toolbarDefaultBg: "#3F51B5",
|
||||
toolbarHeight: 56,
|
||||
toolbarSearchIconSize: 23,
|
||||
toolbarInputColor: "#fff",
|
||||
searchBarHeight: platform === "ios" ? 30 : 40,
|
||||
searchBarInputHeight: platform === "ios" ? 40 : 50,
|
||||
toolbarBtnTextColor: "#fff",
|
||||
toolbarDefaultBorder: "#3F51B5",
|
||||
iosStatusbar: "light-content",
|
||||
get statusBarColor() {
|
||||
return color(this.toolbarDefaultBg)
|
||||
.darken(0.2)
|
||||
.hex();
|
||||
},
|
||||
get darkenHeader() {
|
||||
return color(this.tabBgColor)
|
||||
.darken(0.03)
|
||||
.hex();
|
||||
},
|
||||
|
||||
// Icon
|
||||
iconFamily: "Ionicons",
|
||||
iconFontSize: 28,
|
||||
iconHeaderSize: 24,
|
||||
|
||||
// InputGroup
|
||||
inputFontSize: 17,
|
||||
inputBorderColor: "#D9D5DC",
|
||||
inputSuccessBorderColor: "#2b8339",
|
||||
inputErrorBorderColor: "#ed2f2f",
|
||||
inputHeightBase: 50,
|
||||
get inputColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get inputColorPlaceholder() {
|
||||
return "#575757";
|
||||
},
|
||||
|
||||
// Line Height
|
||||
btnLineHeight: 19,
|
||||
lineHeightH1: 32,
|
||||
lineHeightH2: 27,
|
||||
lineHeightH3: 22,
|
||||
lineHeight: 24,
|
||||
|
||||
// List
|
||||
listBg: "transparent",
|
||||
listBorderColor: "#c9c9c9",
|
||||
listDividerBg: "#f4f4f4",
|
||||
listBtnUnderlayColor: "#DDD",
|
||||
listItemPadding: 12,
|
||||
listNoteColor: "#808080",
|
||||
listNoteSize: 13,
|
||||
listItemSelected: "#3F51B5",
|
||||
|
||||
// Progress Bar
|
||||
defaultProgressColor: "#E4202D",
|
||||
inverseProgressColor: "#1A191B",
|
||||
|
||||
// Radio Button
|
||||
radioBtnSize: 23,
|
||||
radioSelectedColorAndroid: "#3F51B5",
|
||||
radioBtnLineHeight: 24,
|
||||
get radioColor() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
|
||||
// Segment
|
||||
segmentBackgroundColor: "#3F51B5",
|
||||
segmentActiveBackgroundColor: "#fff",
|
||||
segmentTextColor: "#fff",
|
||||
segmentActiveTextColor: "#3F51B5",
|
||||
segmentBorderColor: "#fff",
|
||||
segmentBorderColorMain: "#3F51B5",
|
||||
|
||||
// Spinner
|
||||
defaultSpinnerColor: "#45D56E",
|
||||
inverseSpinnerColor: "#1A191B",
|
||||
|
||||
// Tab
|
||||
tabDefaultBg: "#3F51B5",
|
||||
topTabBarTextColor: "#b3c7f9",
|
||||
topTabBarActiveTextColor: "#fff",
|
||||
topTabBarBorderColor: "#fff",
|
||||
topTabBarActiveBorderColor: "#fff",
|
||||
|
||||
// Tabs
|
||||
tabBgColor: "#F8F8F8",
|
||||
tabFontSize: 15,
|
||||
|
||||
// Text
|
||||
textColor: "#000",
|
||||
inverseTextColor: "#fff",
|
||||
noteFontSize: 14,
|
||||
get defaultTextColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
|
||||
// Title
|
||||
titleFontfamily: "Roboto",
|
||||
titleFontSize: 19,
|
||||
subTitleFontSize: 14,
|
||||
subtitleColor: "#FFF",
|
||||
titleFontColor: "#FFF",
|
||||
|
||||
// Other
|
||||
borderRadiusBase: 2,
|
||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
contentPadding: 10,
|
||||
dropdownLinkColor: "#414142",
|
||||
inputLineHeight: 24,
|
||||
deviceWidth,
|
||||
deviceHeight,
|
||||
isIphoneX,
|
||||
inputGroupRoundedBorderRadius: 30,
|
||||
|
||||
//iPhoneX SafeArea
|
||||
Inset: {
|
||||
portrait: {
|
||||
topInset: 24,
|
||||
leftInset: 0,
|
||||
rightInset: 0,
|
||||
bottomInset: 34
|
||||
},
|
||||
landscape: {
|
||||
topInset: 0,
|
||||
leftInset: 44,
|
||||
rightInset: 44,
|
||||
bottomInset: 21
|
||||
}
|
||||
}
|
||||
};
|
||||
283
native-base-theme/variables/platform.js
Normal file
283
native-base-theme/variables/platform.js
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
// @flow
|
||||
|
||||
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;
|
||||
const isIphoneX =
|
||||
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
|
||||
|
||||
export default {
|
||||
platformStyle,
|
||||
platform,
|
||||
|
||||
//Accordion
|
||||
headerStyle: "#edebed",
|
||||
iconStyle: "#000",
|
||||
contentStyle: "#f5f4f5",
|
||||
expandedIconStyle: "#000",
|
||||
accordionBorderColor: "#d3d3d3",
|
||||
|
||||
// Android
|
||||
androidRipple: true,
|
||||
androidRippleColor: "rgba(256, 256, 256, 0.3)",
|
||||
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
|
||||
btnUppercaseAndroidText: true,
|
||||
|
||||
// Badge
|
||||
badgeBg: "#ED1727",
|
||||
badgeColor: "#fff",
|
||||
badgePadding: platform === "ios" ? 3 : 0,
|
||||
|
||||
// Button
|
||||
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
|
||||
btnDisabledBg: "#b5b5b5",
|
||||
buttonPadding: 6,
|
||||
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;
|
||||
},
|
||||
get iconSizeLarge() {
|
||||
return this.iconFontSize * 1.5;
|
||||
},
|
||||
get iconSizeSmall() {
|
||||
return this.iconFontSize * 0.6;
|
||||
},
|
||||
|
||||
// Card
|
||||
cardDefaultBg: "#fff",
|
||||
cardBorderColor: "#ccc",
|
||||
cardBorderRadius: 2,
|
||||
cardItemPadding: platform === "ios" ? 10 : 12,
|
||||
|
||||
// CheckBox
|
||||
CheckboxRadius: platform === "ios" ? 13 : 0,
|
||||
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
|
||||
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
|
||||
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
|
||||
CheckboxIconSize: platform === "ios" ? 21 : 16,
|
||||
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
|
||||
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
|
||||
checkboxBgColor: "#039BE5",
|
||||
checkboxSize: 20,
|
||||
checkboxTickColor: "#fff",
|
||||
|
||||
// Color
|
||||
brandPrimary: platform === "ios" ? "#e42612" : "#e42612",
|
||||
brandInfo: "#62B1F6",
|
||||
brandSuccess: "#5cb85c",
|
||||
brandDanger: "#d9534f",
|
||||
brandWarning: "#f0ad4e",
|
||||
brandDark: "#000",
|
||||
brandLight: "#f4f4f4",
|
||||
|
||||
//Container
|
||||
containerBgColor: "#fff",
|
||||
|
||||
//Date Picker
|
||||
datePickerTextColor: "#000",
|
||||
datePickerBg: "transparent",
|
||||
|
||||
// Font
|
||||
DefaultFontSize: 16,
|
||||
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" : "#3F51B5",
|
||||
footerPaddingBottom: 0,
|
||||
|
||||
// FooterTab
|
||||
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
|
||||
tabBarTextSize: platform === "ios" ? 14 : 11,
|
||||
activeTab: platform === "ios" ? "#007aff" : "#fff",
|
||||
sTabBarActiveTextColor: "#007aff",
|
||||
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
|
||||
|
||||
// Header
|
||||
toolbarBtnColor: platform === "ios" ? "#e42612" : "#fff",
|
||||
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612",
|
||||
toolbarHeight: platform === "ios" ? 64 : 56,
|
||||
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
|
||||
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
|
||||
searchBarHeight: platform === "ios" ? 30 : 40,
|
||||
searchBarInputHeight: platform === "ios" ? 30 : 50,
|
||||
toolbarBtnTextColor: platform === "ios" ? "#e42612" : "#fff",
|
||||
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
|
||||
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
|
||||
get statusBarColor() {
|
||||
return color(this.toolbarDefaultBg)
|
||||
.darken(0.2)
|
||||
.hex();
|
||||
},
|
||||
get darkenHeader() {
|
||||
return color(this.tabBgColor)
|
||||
.darken(0.03)
|
||||
.hex();
|
||||
},
|
||||
|
||||
// Icon
|
||||
iconFamily: "Ionicons",
|
||||
iconFontSize: platform === "ios" ? 30 : 28,
|
||||
iconHeaderSize: platform === "ios" ? 33 : 24,
|
||||
|
||||
// InputGroup
|
||||
inputFontSize: 17,
|
||||
inputBorderColor: "#D9D5DC",
|
||||
inputSuccessBorderColor: "#2b8339",
|
||||
inputErrorBorderColor: "#ed2f2f",
|
||||
inputHeightBase: 50,
|
||||
get inputColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get inputColorPlaceholder() {
|
||||
return "#575757";
|
||||
},
|
||||
|
||||
// Line Height
|
||||
btnLineHeight: 19,
|
||||
lineHeightH1: 32,
|
||||
lineHeightH2: 27,
|
||||
lineHeightH3: 22,
|
||||
lineHeight: platform === "ios" ? 20 : 24,
|
||||
listItemSelected: platform === "ios" ? "#e42612" : "#e42612",
|
||||
|
||||
// List
|
||||
listBg: "transparent",
|
||||
listBorderColor: "#c9c9c9",
|
||||
listDividerBg: "#f4f4f4",
|
||||
listBtnUnderlayColor: "#DDD",
|
||||
listItemPadding: platform === "ios" ? 10 : 12,
|
||||
listNoteColor: "#808080",
|
||||
listNoteSize: 13,
|
||||
|
||||
// Progress Bar
|
||||
defaultProgressColor: "#E4202D",
|
||||
inverseProgressColor: "#1A191B",
|
||||
|
||||
// Radio Button
|
||||
radioBtnSize: platform === "ios" ? 25 : 23,
|
||||
radioSelectedColorAndroid: "#3F51B5",
|
||||
radioBtnLineHeight: platform === "ios" ? 29 : 24,
|
||||
get radioColor() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
|
||||
// Segment
|
||||
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
|
||||
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
|
||||
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
|
||||
|
||||
// Spinner
|
||||
defaultSpinnerColor: "#45D56E",
|
||||
inverseSpinnerColor: "#1A191B",
|
||||
|
||||
// Tab
|
||||
tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612",
|
||||
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
|
||||
topTabBarActiveTextColor: platform === "ios" ? "#e42612" : "#fff",
|
||||
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
|
||||
topTabBarActiveBorderColor: platform === "ios" ? "#e42612" : "#fff",
|
||||
|
||||
// Tabs
|
||||
tabBgColor: "#F8F8F8",
|
||||
tabFontSize: 15,
|
||||
|
||||
// Text
|
||||
textColor: "#000",
|
||||
inverseTextColor: "#fff",
|
||||
noteFontSize: 14,
|
||||
get defaultTextColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
|
||||
// Title
|
||||
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
|
||||
titleFontSize: platform === "ios" ? 17 : 19,
|
||||
subTitleFontSize: platform === "ios" ? 11 : 14,
|
||||
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
|
||||
titleFontColor: platform === "ios" ? "#000" : "#FFF",
|
||||
|
||||
// Other
|
||||
borderRadiusBase: platform === "ios" ? 5 : 2,
|
||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
contentPadding: 10,
|
||||
dropdownLinkColor: "#414142",
|
||||
inputLineHeight: 24,
|
||||
deviceWidth,
|
||||
deviceHeight,
|
||||
isIphoneX,
|
||||
inputGroupRoundedBorderRadius: 30,
|
||||
|
||||
//iPhoneX SafeArea
|
||||
Inset: {
|
||||
portrait: {
|
||||
topInset: 24,
|
||||
leftInset: 0,
|
||||
rightInset: 0,
|
||||
bottomInset: 34
|
||||
},
|
||||
landscape: {
|
||||
topInset: 0,
|
||||
leftInset: 44,
|
||||
rightInset: 44,
|
||||
bottomInset: 21
|
||||
}
|
||||
}
|
||||
};
|
||||
283
native-base-theme/variables/platformDark.js
Normal file
283
native-base-theme/variables/platformDark.js
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
// @flow
|
||||
|
||||
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;
|
||||
const isIphoneX =
|
||||
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
|
||||
|
||||
export default {
|
||||
platformStyle,
|
||||
platform,
|
||||
|
||||
//Accordion
|
||||
headerStyle: "#edebed",
|
||||
iconStyle: "#000",
|
||||
contentStyle: "#f5f4f5",
|
||||
expandedIconStyle: "#000",
|
||||
accordionBorderColor: "#d3d3d3",
|
||||
|
||||
// Android
|
||||
androidRipple: true,
|
||||
androidRippleColor: "rgba(256, 256, 256, 0.3)",
|
||||
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
|
||||
btnUppercaseAndroidText: true,
|
||||
|
||||
// Badge
|
||||
badgeBg: "#ED1727",
|
||||
badgeColor: "#fff",
|
||||
badgePadding: platform === "ios" ? 3 : 0,
|
||||
|
||||
// Button
|
||||
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
|
||||
btnDisabledBg: "#b5b5b5",
|
||||
buttonPadding: 6,
|
||||
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;
|
||||
},
|
||||
get iconSizeLarge() {
|
||||
return this.iconFontSize * 1.5;
|
||||
},
|
||||
get iconSizeSmall() {
|
||||
return this.iconFontSize * 0.6;
|
||||
},
|
||||
|
||||
// Card
|
||||
cardDefaultBg: "#2b2b2b",
|
||||
cardBorderColor: "#ccc",
|
||||
cardBorderRadius: 2,
|
||||
cardItemPadding: platform === "ios" ? 10 : 12,
|
||||
|
||||
// CheckBox
|
||||
CheckboxRadius: platform === "ios" ? 13 : 0,
|
||||
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
|
||||
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
|
||||
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
|
||||
CheckboxIconSize: platform === "ios" ? 21 : 16,
|
||||
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
|
||||
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
|
||||
checkboxBgColor: "#039BE5",
|
||||
checkboxSize: 20,
|
||||
checkboxTickColor: "#fff",
|
||||
|
||||
// Color
|
||||
brandPrimary: platform === "ios" ? "#e42612" : "#e42612",
|
||||
brandInfo: "#62B1F6",
|
||||
brandSuccess: "#5cb85c",
|
||||
brandDanger: "#d9534f",
|
||||
brandWarning: "#f0ad4e",
|
||||
brandDark: "#000",
|
||||
brandLight: "#f4f4f4",
|
||||
|
||||
//Container
|
||||
containerBgColor: "#2b2b2b",
|
||||
|
||||
//Date Picker
|
||||
datePickerTextColor: "#000",
|
||||
datePickerBg: "transparent",
|
||||
|
||||
// Font
|
||||
DefaultFontSize: 16,
|
||||
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" : "#3F51B5",
|
||||
footerPaddingBottom: 0,
|
||||
|
||||
// FooterTab
|
||||
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
|
||||
tabBarTextSize: platform === "ios" ? 14 : 11,
|
||||
activeTab: platform === "ios" ? "#007aff" : "#fff",
|
||||
sTabBarActiveTextColor: "#007aff",
|
||||
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
|
||||
|
||||
// Header
|
||||
toolbarBtnColor: platform === "ios" ? "#e42612" : "#fff",
|
||||
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612",
|
||||
toolbarHeight: platform === "ios" ? 64 : 56,
|
||||
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
|
||||
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
|
||||
searchBarHeight: platform === "ios" ? 30 : 40,
|
||||
searchBarInputHeight: platform === "ios" ? 30 : 50,
|
||||
toolbarBtnTextColor: platform === "ios" ? "#e42612" : "#fff",
|
||||
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
|
||||
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
|
||||
get statusBarColor() {
|
||||
return color(this.toolbarDefaultBg)
|
||||
.darken(0.2)
|
||||
.hex();
|
||||
},
|
||||
get darkenHeader() {
|
||||
return color(this.tabBgColor)
|
||||
.darken(0.03)
|
||||
.hex();
|
||||
},
|
||||
|
||||
// Icon
|
||||
iconFamily: "Ionicons",
|
||||
iconFontSize: platform === "ios" ? 30 : 28,
|
||||
iconHeaderSize: platform === "ios" ? 33 : 24,
|
||||
|
||||
// InputGroup
|
||||
inputFontSize: 17,
|
||||
inputBorderColor: "#D9D5DC",
|
||||
inputSuccessBorderColor: "#2b8339",
|
||||
inputErrorBorderColor: "#ed2f2f",
|
||||
inputHeightBase: 50,
|
||||
get inputColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
get inputColorPlaceholder() {
|
||||
return "#575757";
|
||||
},
|
||||
|
||||
// Line Height
|
||||
btnLineHeight: 19,
|
||||
lineHeightH1: 32,
|
||||
lineHeightH2: 27,
|
||||
lineHeightH3: 22,
|
||||
lineHeight: platform === "ios" ? 20 : 24,
|
||||
listItemSelected: platform === "ios" ? "#e42612" : "#e42612",
|
||||
|
||||
// List
|
||||
listBg: "transparent",
|
||||
listBorderColor: "#c9c9c9",
|
||||
listDividerBg: "#f4f4f4",
|
||||
listBtnUnderlayColor: "#DDD",
|
||||
listItemPadding: platform === "ios" ? 10 : 12,
|
||||
listNoteColor: "#808080",
|
||||
listNoteSize: 13,
|
||||
|
||||
// Progress Bar
|
||||
defaultProgressColor: "#E4202D",
|
||||
inverseProgressColor: "#1A191B",
|
||||
|
||||
// Radio Button
|
||||
radioBtnSize: platform === "ios" ? 25 : 23,
|
||||
radioSelectedColorAndroid: "#3F51B5",
|
||||
radioBtnLineHeight: platform === "ios" ? 29 : 24,
|
||||
get radioColor() {
|
||||
return this.brandPrimary;
|
||||
},
|
||||
|
||||
// Segment
|
||||
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
|
||||
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
|
||||
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
|
||||
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
|
||||
|
||||
// Spinner
|
||||
defaultSpinnerColor: "#45D56E",
|
||||
inverseSpinnerColor: "#1A191B",
|
||||
|
||||
// Tab
|
||||
tabDefaultBg: platform === "ios" ? "#2b2b2b" : "#e42612",
|
||||
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
|
||||
topTabBarActiveTextColor: platform === "ios" ? "#e42612" : "#fff",
|
||||
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
|
||||
topTabBarActiveBorderColor: platform === "ios" ? "#e42612" : "#fff",
|
||||
|
||||
// Tabs
|
||||
tabBgColor: "#2b2b2b",
|
||||
tabFontSize: 15,
|
||||
|
||||
// Text
|
||||
textColor: "#fff",
|
||||
inverseTextColor: "#000",
|
||||
noteFontSize: 14,
|
||||
get defaultTextColor() {
|
||||
return this.textColor;
|
||||
},
|
||||
|
||||
// Title
|
||||
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
|
||||
titleFontSize: platform === "ios" ? 17 : 19,
|
||||
subTitleFontSize: platform === "ios" ? 11 : 14,
|
||||
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
|
||||
titleFontColor: platform === "ios" ? "#000" : "#FFF",
|
||||
|
||||
// Other
|
||||
borderRadiusBase: platform === "ios" ? 5 : 2,
|
||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||
contentPadding: 10,
|
||||
dropdownLinkColor: "#414142",
|
||||
inputLineHeight: 24,
|
||||
deviceWidth,
|
||||
deviceHeight,
|
||||
isIphoneX,
|
||||
inputGroupRoundedBorderRadius: 30,
|
||||
|
||||
//iPhoneX SafeArea
|
||||
Inset: {
|
||||
portrait: {
|
||||
topInset: 24,
|
||||
leftInset: 0,
|
||||
rightInset: 0,
|
||||
bottomInset: 34
|
||||
},
|
||||
landscape: {
|
||||
topInset: 0,
|
||||
leftInset: 44,
|
||||
rightInset: 44,
|
||||
bottomInset: 21
|
||||
}
|
||||
}
|
||||
};
|
||||
9
navigation/AppNavigator.js
Normal file
9
navigation/AppNavigator.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
|
||||
|
||||
import MainDrawerNavigator from './MainDrawerNavigator';
|
||||
|
||||
export default createAppContainer(
|
||||
createSwitchNavigator({
|
||||
Main: MainDrawerNavigator,
|
||||
})
|
||||
);
|
||||
24
navigation/MainDrawerNavigator.js
Normal file
24
navigation/MainDrawerNavigator.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react';
|
||||
import {createDrawerNavigator} from 'react-navigation';
|
||||
|
||||
import HomeScreen from '../screens/HomeScreen';
|
||||
import PlanningScreen from '../screens/PlanningScreen';
|
||||
import ProxiwashScreen from '../screens/ProxiwashScreen';
|
||||
import ProximoScreen from '../screens/ProximoScreen';
|
||||
import SettingsScreen from '../screens/SettingsScreen';
|
||||
import AboutScreen from '../screens/AboutScreen';
|
||||
import SideMenu from "../components/SideMenu";
|
||||
|
||||
|
||||
export default createDrawerNavigator({
|
||||
Home: {screen: HomeScreen},
|
||||
Planning: {screen: PlanningScreen,},
|
||||
Proxiwash: {screen: ProxiwashScreen,},
|
||||
Proximo: {screen: ProximoScreen,},
|
||||
Settings: {screen: SettingsScreen,},
|
||||
About: {screen: AboutScreen,},
|
||||
}, {
|
||||
contentComponent: SideMenu,
|
||||
}
|
||||
);
|
||||
|
||||
58
navigation/MainTabNavigator.js
Normal file
58
navigation/MainTabNavigator.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React from 'react';
|
||||
import {Platform} from 'react-native';
|
||||
import {createStackNavigator} from 'react-navigation';
|
||||
import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs";
|
||||
import TabBarIcon from '../components/TabBarIcon';
|
||||
|
||||
import HomeScreen from '../screens/HomeScreen';
|
||||
import PlanningScreen from '../screens/PlanningScreen';
|
||||
|
||||
const HomeStack = createStackNavigator({
|
||||
Home: HomeScreen,
|
||||
});
|
||||
|
||||
HomeStack.navigationOptions = {
|
||||
tabBarLabel: 'Home',
|
||||
tabBarIcon: ({focused}) => (
|
||||
<TabBarIcon
|
||||
focused={focused}
|
||||
name={
|
||||
Platform.OS === 'ios'
|
||||
? 'ios-home'
|
||||
: 'md-home'
|
||||
}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
const ProfileStack = createStackNavigator({
|
||||
Profile: PlanningScreen,
|
||||
});
|
||||
|
||||
ProfileStack.navigationOptions = {
|
||||
tabBarLabel: 'Profile',
|
||||
tabBarIcon: ({focused}) => (
|
||||
<TabBarIcon
|
||||
focused={focused}
|
||||
name={
|
||||
Platform.OS === 'ios'
|
||||
? 'ios-people'
|
||||
: 'md-people'
|
||||
}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
|
||||
export default createMaterialBottomTabNavigator(
|
||||
{
|
||||
Home: HomeStack,
|
||||
Profile: ProfileStack
|
||||
}, {
|
||||
initialRouteName: 'Home',
|
||||
shifting: true,
|
||||
activeColor: Colors.tabIconSelected,
|
||||
inactiveColor: Colors.tabIconDefault,
|
||||
barStyle: {backgroundColor: Colors.mainColor},
|
||||
}
|
||||
);
|
||||
1362
package-lock.json
generated
1362
package-lock.json
generated
File diff suppressed because it is too large
Load diff
15
package.json
15
package.json
|
|
@ -8,11 +8,24 @@
|
|||
"eject": "expo eject"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "latest",
|
||||
"expo": "^33.0.0",
|
||||
"expo-font": "^5.0.1",
|
||||
"expo-localization": "^5.0.1",
|
||||
"i18n-js": "^3.3.0",
|
||||
"i18next": "latest",
|
||||
"native-base": "latest",
|
||||
"react": "16.8.3",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-i18next": "latest",
|
||||
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
|
||||
"react-native-web": "^0.11.4"
|
||||
"react-native-paper": "latest",
|
||||
"react-native-settings-page": "latest",
|
||||
"react-native-status-bar-height": "latest",
|
||||
"react-native-web": "^0.11.4",
|
||||
"react-native-week-view": "latest",
|
||||
"react-navigation": "latest",
|
||||
"react-navigation-material-bottom-tabs": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-preset-expo": "^5.1.1"
|
||||
|
|
|
|||
226
screens/AboutScreen.js
Normal file
226
screens/AboutScreen.js
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
import React from 'react';
|
||||
import {Platform, StyleSheet, Linking, Alert} from 'react-native';
|
||||
import {Container, Content, Text, Card, CardItem, Body, Icon, Left, Right, Thumbnail, H1} from 'native-base';
|
||||
import CustomHeader from "../components/CustomHeader";
|
||||
import i18n from "i18n-js";
|
||||
|
||||
const version = 'a0.0.1';
|
||||
const links = {
|
||||
appstore: 'https://qwant.com',
|
||||
playstore: 'https://qwant.com',
|
||||
gitlab: 'https://qwant.com',
|
||||
bugs: 'https://qwant.com',
|
||||
changelog: 'https://qwant.com',
|
||||
license: 'https://qwant.com',
|
||||
mail: "mailto:arnaud.vergnet@netc.fr?subject=Application Amicale INSA Toulouse&body=",
|
||||
linkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
|
||||
facebook: 'https://www.facebook.com/arnaud.vergnet',
|
||||
react: 'https://facebook.github.io/react-native/',
|
||||
};
|
||||
|
||||
|
||||
export default class AboutScreen extends React.Component {
|
||||
|
||||
openWebLink(link) {
|
||||
Linking.openURL(link).catch((err) => console.error('Error opening link', err));
|
||||
}
|
||||
|
||||
render() {
|
||||
const nav = this.props.navigation;
|
||||
return (
|
||||
<Container>
|
||||
<CustomHeader navigation={nav} title={i18n.t('screens.about')}/>
|
||||
<Content>
|
||||
<Card>
|
||||
<CardItem>
|
||||
<Left>
|
||||
<Thumbnail square source={require('../assets/amicale.png')}/>
|
||||
<Body>
|
||||
<H1>Amicale INSA Toulouse</H1>
|
||||
<Text note>
|
||||
v.{version}
|
||||
</Text>
|
||||
</Body>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem button
|
||||
onPress={() => this.openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore)}>
|
||||
<Left>
|
||||
<Icon active name={Platform.OS === "ios" ? 'apple' : 'google-play'}
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>{Platform.OS === "ios" ? i18n.t('aboutScreen.appstore') : i18n.t('aboutScreen.playstore')}</Text>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="arrow-forward"/>
|
||||
</Right>
|
||||
</CardItem>
|
||||
<CardItem button
|
||||
onPress={() => this.openWebLink(links.gitlab)}>
|
||||
<Left>
|
||||
<Icon active name="git"
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>Gitlab</Text>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="arrow-forward"/>
|
||||
</Right>
|
||||
</CardItem>
|
||||
<CardItem button
|
||||
onPress={() => this.openWebLink(links.bugs)}>
|
||||
<Left>
|
||||
<Icon active name="bug"
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>{i18n.t('aboutScreen.bugs')}</Text>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="arrow-forward"/>
|
||||
</Right>
|
||||
</CardItem>
|
||||
<CardItem button
|
||||
onPress={() => this.openWebLink(links.changelog)}>
|
||||
<Left>
|
||||
<Icon active name="refresh"
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>
|
||||
{i18n.t('aboutScreen.changelog')}
|
||||
</Text>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="arrow-forward"/>
|
||||
</Right>
|
||||
</CardItem>
|
||||
<CardItem button
|
||||
onPress={() => this.openWebLink(links.license)}>
|
||||
<Left>
|
||||
<Icon active name="file-document"
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>
|
||||
{i18n.t('aboutScreen.license')}
|
||||
</Text>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="arrow-forward"/>
|
||||
</Right>
|
||||
</CardItem>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardItem header>
|
||||
<Text>{i18n.t('aboutScreen.author')}</Text>
|
||||
</CardItem>
|
||||
<CardItem button
|
||||
onPress={() => Alert.alert('Coucou', 'Whaou')}>
|
||||
<Left>
|
||||
<Icon active name="account-circle"
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>Arnaud VERGNET</Text>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem button
|
||||
onPress={() => this.openWebLink(links.mail)}>
|
||||
<Left>
|
||||
<Icon active name="email"
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>
|
||||
{i18n.t('aboutScreen.mail')}
|
||||
</Text>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="arrow-forward"/>
|
||||
</Right>
|
||||
</CardItem>
|
||||
<CardItem button
|
||||
onPress={() => this.openWebLink(links.linkedin)}>
|
||||
<Left>
|
||||
<Icon active name="linkedin"
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>
|
||||
Linkedin
|
||||
</Text>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="arrow-forward"/>
|
||||
</Right>
|
||||
</CardItem>
|
||||
<CardItem button
|
||||
onPress={() => this.openWebLink(links.facebook)}>
|
||||
<Left>
|
||||
<Icon active name="facebook"
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>
|
||||
Facebook
|
||||
</Text>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="arrow-forward"/>
|
||||
</Right>
|
||||
</CardItem>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardItem header>
|
||||
<Text>{i18n.t('aboutScreen.technologies')}</Text>
|
||||
</CardItem>
|
||||
<CardItem button
|
||||
onPress={() => this.openWebLink(links.react)}>
|
||||
<Left>
|
||||
<Icon active name="react"
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>
|
||||
{i18n.t('aboutScreen.reactNative')}
|
||||
</Text>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="arrow-forward"/>
|
||||
</Right>
|
||||
</CardItem>
|
||||
<CardItem button
|
||||
onPress={() => console.log('libs')}>
|
||||
<Left>
|
||||
<Icon active name="developer-board"
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>
|
||||
{i18n.t('aboutScreen.libs')}
|
||||
</Text>
|
||||
</Left>
|
||||
<Right>
|
||||
<Icon name="arrow-forward"/>
|
||||
</Right>
|
||||
</CardItem>
|
||||
</Card>
|
||||
</Content>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
28
screens/HomeScreen.js
Normal file
28
screens/HomeScreen.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import React from 'react';
|
||||
import {Container, Content, Text, Button, Icon} from 'native-base';
|
||||
import CustomHeader from '../components/CustomHeader';
|
||||
import i18n from "i18n-js";
|
||||
|
||||
import { Notifications } from 'expo';
|
||||
|
||||
|
||||
export default class HomeScreen extends React.Component {
|
||||
render() {
|
||||
const nav = this.props.navigation;
|
||||
return (
|
||||
<Container>
|
||||
<CustomHeader navigation={nav} title={i18n.t('screens.home')}/>
|
||||
<Content>
|
||||
<Button>
|
||||
<Icon
|
||||
active
|
||||
name={'bell-ring'}
|
||||
type={'MaterialCommunityIcons'}
|
||||
/>
|
||||
<Text>Notif</Text>
|
||||
</Button>
|
||||
</Content>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
24
screens/PlanningScreen.js
Normal file
24
screens/PlanningScreen.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import {Container, Text} from 'native-base';
|
||||
import CustomHeader from "../components/CustomHeader";
|
||||
import i18n from "i18n-js";
|
||||
|
||||
export default class PlanningScreen extends React.Component {
|
||||
render() {
|
||||
const nav = this.props.navigation;
|
||||
return (
|
||||
<Container>
|
||||
<CustomHeader navigation={nav} title={i18n.t('screens.planning')}/>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
113
screens/ProximoScreen.js
Normal file
113
screens/ProximoScreen.js
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import React from 'react';
|
||||
import {StyleSheet, View, Alert, ScrollView, RefreshControl, FlatList} from 'react-native';
|
||||
import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Badge} from 'native-base';
|
||||
import CustomHeader from "../components/CustomHeader";
|
||||
|
||||
const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/data.txt";
|
||||
const IMG_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/img/";
|
||||
|
||||
const defaultImage = require('../assets/image-missing.png');
|
||||
|
||||
export default class ProximoScreen extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
refreshing: false,
|
||||
data: undefined
|
||||
};
|
||||
}
|
||||
|
||||
async readData() {
|
||||
try {
|
||||
let response = await fetch(
|
||||
'https://etud.insa-toulouse.fr/~vergnet/appli-amicale/data.txt',
|
||||
);
|
||||
let responseText = await response.text();
|
||||
let responseArray = responseText.split('\n');
|
||||
let responseFinal = [];
|
||||
for (let i = 0; i < responseArray.length; i++) {
|
||||
if (responseArray[i] !== "") {
|
||||
let itemArray = responseArray[i]
|
||||
.replace('[', '')
|
||||
.replace(']', '')
|
||||
.split(',')[1]
|
||||
.split(';');
|
||||
let object = {
|
||||
name: itemArray[0],
|
||||
price: itemArray[1],
|
||||
image: defaultImage
|
||||
};
|
||||
responseFinal.push(object);
|
||||
}
|
||||
}
|
||||
this.setState({data: responseFinal});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._onRefresh();
|
||||
}
|
||||
|
||||
_onRefresh = () => {
|
||||
this.setState({refreshing: true});
|
||||
this.readData().then(() => {
|
||||
this.setState({refreshing: false});
|
||||
// console.log(this.state.data);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
const nav = this.props.navigation;
|
||||
return (
|
||||
<Container>
|
||||
<CustomHeader navigation={nav} title={'Proximo'}/>
|
||||
<Content>
|
||||
<FlatList
|
||||
data={this.state.data}
|
||||
extraData={this.state}
|
||||
keyExtractor={(item, index) => item.name}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={this.state.refreshing}
|
||||
onRefresh={this._onRefresh}
|
||||
/>
|
||||
}
|
||||
style={{minHeight: 300, width: '100%'}}
|
||||
renderItem={({item}) =>
|
||||
<ListItem
|
||||
onPress={() => {
|
||||
console.log(IMG_URL + item.name + '.jpg')
|
||||
}}
|
||||
>
|
||||
<Left>
|
||||
<Thumbnail square source={{ uri: IMG_URL + item.name + '.jpg' }} />
|
||||
<Text style={{marginLeft: 20}}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</Left>
|
||||
<Right style={{ flex: 1 }}>
|
||||
<Text>
|
||||
{item.price}€
|
||||
</Text>
|
||||
</Right>
|
||||
</ListItem>}
|
||||
/>
|
||||
</Content>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
24
screens/ProxiwashScreen.js
Normal file
24
screens/ProxiwashScreen.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react';
|
||||
import {StyleSheet, View} from 'react-native';
|
||||
import {Container, Text} from 'native-base';
|
||||
import CustomHeader from "../components/CustomHeader";
|
||||
|
||||
export default class ProxiwashScreen extends React.Component {
|
||||
render() {
|
||||
const nav = this.props.navigation;
|
||||
return (
|
||||
<Container>
|
||||
<CustomHeader navigation={nav} title={'Proxiwash'}/>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
56
screens/SettingsScreen.js
Normal file
56
screens/SettingsScreen.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import React from 'react';
|
||||
import {Alert} from 'react-native'
|
||||
import {Badge, Container, Content, Icon, Left, ListItem, Right, Text, List, CheckBox} from "native-base";
|
||||
import CustomHeader from "../components/CustomHeader";
|
||||
import ThemeManager from '../utils/ThemeManager';
|
||||
import i18n from "i18n-js";
|
||||
|
||||
|
||||
const nightModeKey = 'nightMode';
|
||||
|
||||
export default class SettingsScreen extends React.Component {
|
||||
state = {
|
||||
nightMode: ThemeManager.getInstance().getNightMode(),
|
||||
};
|
||||
|
||||
toggleNightMode() {
|
||||
this.setState({nightMode: !this.state.nightMode});
|
||||
ThemeManager.getInstance().setNightmode(!this.state.nightMode);
|
||||
Alert.alert(i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.restart'));
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const nav = this.props.navigation;
|
||||
return (
|
||||
<Container>
|
||||
<CustomHeader navigation={nav} title={i18n.t('screens.settings')}/>
|
||||
<Content>
|
||||
<List>
|
||||
<ListItem
|
||||
button
|
||||
onPress={() => this.toggleNightMode()}
|
||||
>
|
||||
<Left>
|
||||
<Icon
|
||||
active
|
||||
name={'theme-light-dark'}
|
||||
type={'MaterialCommunityIcons'}
|
||||
style={{color: "#777", fontSize: 26, width: 30}}
|
||||
/>
|
||||
<Text>
|
||||
{i18n.t('settingsScreen.nightMode')}
|
||||
</Text>
|
||||
</Left>
|
||||
<Right style={{flex: 1}}>
|
||||
<CheckBox checked={this.state.nightMode}
|
||||
onPress={() => this.toggleNightMode()}/>
|
||||
</Right>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Content>
|
||||
</Container>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
24
translations/en.json
Normal file
24
translations/en.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"screens": {
|
||||
"home": "Home",
|
||||
"planning": "Planning",
|
||||
"settings": "Settings",
|
||||
"about": "About"
|
||||
},
|
||||
"settingsScreen": {
|
||||
"nightMode": "Night Mode",
|
||||
"restart": "Restart the app to apply changes"
|
||||
},
|
||||
"aboutScreen": {
|
||||
"appstore": "See on the Appstore",
|
||||
"playstore": "See on the Playstore",
|
||||
"bugs": "Report Bugs",
|
||||
"changelog": "Changelog",
|
||||
"license": "License",
|
||||
"author": "Author",
|
||||
"mail": "Send an email",
|
||||
"technologies": "Technologies",
|
||||
"reactNative": "Made with React Native",
|
||||
"libs": "Libraries used"
|
||||
},
|
||||
}
|
||||
24
translations/fr.json
Normal file
24
translations/fr.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"screens": {
|
||||
"home": "Accueil",
|
||||
"planning": "Planning",
|
||||
"settings": "Paramètres",
|
||||
"about": "À Propos"
|
||||
},
|
||||
"settingsScreen": {
|
||||
"nightMode": "Mode Nuit",
|
||||
"restart": "Redémarrez l'application pour appliquer les changements"
|
||||
},
|
||||
"aboutScreen": {
|
||||
"appstore": "Voir sur l'Appstore",
|
||||
"playstore": "Voir sur le Playstore",
|
||||
"bugs": "Rapporter des Bugs",
|
||||
"changelog": "Historique des modifications",
|
||||
"license": "Licence",
|
||||
"author": "Auteur",
|
||||
"mail": "Envoyer un mail",
|
||||
"technologies": "Technologies",
|
||||
"reactNative": "Créé avec React Native",
|
||||
"libs": "Librairies utilisées"
|
||||
}
|
||||
}
|
||||
23
utils/LocaleManager.js
Normal file
23
utils/LocaleManager.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import i18n from 'i18n-js';
|
||||
import * as Localization from 'expo-localization';
|
||||
|
||||
import en from '../translations/en';
|
||||
import fr from '../translations/fr';
|
||||
|
||||
export default class LocaleManager {
|
||||
|
||||
static instance = null;
|
||||
|
||||
static getInstance() {
|
||||
if (LocaleManager.instance == null) {
|
||||
LocaleManager.instance = new LocaleManager();
|
||||
}
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
initTranslations() {
|
||||
i18n.fallbacks = true;
|
||||
i18n.translations = {fr, en};
|
||||
i18n.locale = Localization.locale;
|
||||
}
|
||||
}
|
||||
57
utils/ThemeManager.js
Normal file
57
utils/ThemeManager.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import {DefaultTheme} from 'react-native-paper';
|
||||
import {AsyncStorage} from 'react-native'
|
||||
import platform from '../native-base-theme/variables/platform';
|
||||
import platformDark from '../native-base-theme/variables/platformDark';
|
||||
import getTheme from '../native-base-theme/components';
|
||||
|
||||
const nightModeKey = 'nightMode';
|
||||
|
||||
export default class ThemeManager {
|
||||
|
||||
static instance = null;
|
||||
|
||||
constructor() {
|
||||
this.nightMode = false;
|
||||
this.updateThemeCallback = undefined;
|
||||
}
|
||||
|
||||
static getInstance() {
|
||||
if (ThemeManager.instance == null) {
|
||||
ThemeManager.instance = new ThemeManager();
|
||||
}
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
setUpdateThemeCallback(callback) {
|
||||
this.updateThemeCallback = callback;
|
||||
console.log(this.updateThemeCallback);
|
||||
|
||||
}
|
||||
|
||||
async getDataFromPreferences() {
|
||||
let result = await AsyncStorage.getItem(nightModeKey);
|
||||
|
||||
if (result === '1')
|
||||
this.nightMode = true;
|
||||
console.log('nightmode: ' + this.nightMode);
|
||||
}
|
||||
|
||||
setNightmode(isNightMode) {
|
||||
this.nightMode = isNightMode;
|
||||
AsyncStorage.setItem(nightModeKey, isNightMode ? '1' : '0');
|
||||
if (this.updateThemeCallback !== undefined)
|
||||
this.updateThemeCallback();
|
||||
}
|
||||
|
||||
getNightMode() {
|
||||
return this.nightMode;
|
||||
}
|
||||
|
||||
getCurrentTheme() {
|
||||
if (this.nightMode)
|
||||
return getTheme(platformDark);
|
||||
else
|
||||
return getTheme(platform);
|
||||
}
|
||||
|
||||
};
|
||||
Loading…
Reference in a new issue