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

Merge branch 'dev'

Browse source
This commit is contained in:
keplyx 2020-01-30 15:33:31 +01:00
commit ff0f8737a4
70 changed files with 2719 additions and 2252 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
App.js
View file

@ -1,15 +1,12 @@
// @flow
import * as React from 'react';
import {StatusBar, Platform } from 'react-native';
import {StatusBar, Platform} from 'react-native';
import {Root, StyleProvider} from 'native-base';
import {createAppContainerWithInitialRoute} from './navigation/AppNavigator';
import ThemeManager from './utils/ThemeManager';
import LocaleManager from './utils/LocaleManager';
import * as Font from 'expo-font';
// edited native-base-shoutem-theme according to
// https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422
// to allow for dynamic theme switching
import {clearThemeCache} from 'native-base-shoutem-theme';
import AsyncStorageManager from "./utils/AsyncStorageManager";
import CustomIntroSlider from "./components/CustomIntroSlider";
@ -81,6 +78,7 @@ export default class App extends React.Component<Props, State> {
await Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
'material-community': require('native-base/Fonts/MaterialCommunityIcons.ttf'),
});
await AsyncStorageManager.getInstance().loadPreferences();
ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
@ -118,7 +116,8 @@ export default class App extends React.Component<Props, State> {
);
}
if (this.state.showIntro || this.state.showUpdate) {
return <CustomIntroSlider onDone={() => this.onIntroDone()} isUpdate={this.state.showUpdate && !this.state.showIntro}/>;
return <CustomIntroSlider onDone={() => this.onIntroDone()}
isUpdate={this.state.showUpdate && !this.state.showIntro}/>;
} else {
const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current);
return (

4
app.json
View file

@ -4,13 +4,13 @@
"description": "Application mobile compatible Android et iOS pour l'Amicale INSA Toulouse. Grâce à cette application, vous avez facilement accès aux news du campus, aux emplois du temps, à l'état de la laverie, et bien d'autres services ! Ceci est une version Beta, Toutes les fonctionnalités ne sont pas encore implémentées, et il est possible de rencontrer quelques bugs.",
"slug": "application-amicale",
"privacy": "public",
"sdkVersion": "33.0.0",
"sdkVersion": "36.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.3.1",
"version": "1.3.3",
"orientation": "portrait",
"primaryColor": "#be1522",
"icon": "./assets/android.icon.png",

1
clear-node-cache.sh Executable file
View file

@ -0,0 +1 @@
rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c

112
components/BaseContainer.js
View file

@ -1,13 +1,15 @@
// @flow
import * as React from 'react';
import {Container, Right} from "native-base";
import {Container} from "native-base";
import CustomHeader from "./CustomHeader";
import CustomSideMenu from "./CustomSideMenu";
import CustomMaterialIcon from "./CustomMaterialIcon";
import {Platform, View} from "react-native";
import ThemeManager from "../utils/ThemeManager";
import Touchable from "react-native-platform-touchable";
import {ScreenOrientation} from "expo";
import {NavigationActions} from "react-navigation";
type Props = {
@ -18,29 +20,34 @@ type Props = {
hasTabs: boolean,
hasBackButton: boolean,
hasSideMenu: boolean,
isHeaderVisible: boolean
enableRotation: boolean,
hideHeaderOnLandscape: boolean,
}
type State = {
isOpen: boolean
isOpen: boolean,
isHeaderVisible: boolean
}
export default class BaseContainer extends React.Component<Props, State> {
willBlurSubscription: function;
willFocusSubscription: function;
static defaultProps = {
headerRightButton: <View/>,
hasTabs: false,
hasBackButton: false,
hasSideMenu: true,
isHeaderVisible: true,
enableRotation: false,
hideHeaderOnLandscape: false,
};
state = {
isOpen: false,
isHeaderVisible: true,
};
toggle() {
@ -57,9 +64,31 @@ export default class BaseContainer extends React.Component<Props, State> {
* Register for blur event to close side menu on screen change
*/
componentDidMount() {
this.willFocusSubscription = this.props.navigation.addListener(
'willFocus',
payload => {
if (this.props.enableRotation) {
ScreenOrientation.unlockAsync();
ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
if (this.props.hideHeaderOnLandscape) {
let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
this.setState({isHeaderVisible: !isLandscape});
const setParamsAction = NavigationActions.setParams({
params: {showTabBar: !isLandscape},
key: this.props.navigation.state.key,
});
this.props.navigation.dispatch(setParamsAction);
}
});
}
});
this.willBlurSubscription = this.props.navigation.addListener(
'willBlur',
payload => {
if (this.props.enableRotation)
ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
this.setState({isOpen: false});
}
);
@ -71,25 +100,29 @@ export default class BaseContainer extends React.Component<Props, State> {
componentWillUnmount() {
if (this.willBlurSubscription !== undefined)
this.willBlurSubscription.remove();
if (this.willFocusSubscription !== undefined)
this.willFocusSubscription.remove();
}
getMainContainer() {
return (
<Container>
<CustomHeader
navigation={this.props.navigation} title={this.props.headerTitle}
leftButton={
<Touchable
style={{padding: 6}}
onPress={() => this.toggle()}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="menu"/>
</Touchable>
}
rightButton={this.props.headerRightButton}
hasTabs={this.props.hasTabs}
hasBackButton={this.props.hasBackButton}/>
{this.state.isHeaderVisible ?
<CustomHeader
navigation={this.props.navigation} title={this.props.headerTitle}
leftButton={
<Touchable
style={{padding: 6}}
onPress={() => this.toggle()}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="menu"/>
</Touchable>
}
rightButton={this.props.headerRightButton}
hasTabs={this.props.hasTabs}
hasBackButton={this.props.hasBackButton}/>
: <View style={{paddingTop: 20}}/>}
{this.props.children}
</Container>
);
@ -97,33 +130,20 @@ export default class BaseContainer extends React.Component<Props, State> {
render() {
if (this.props.isHeaderVisible) {
return (
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
width: '100%',
height: '100%'
}}>
{this.props.hasSideMenu ?
<CustomSideMenu
navigation={this.props.navigation} isOpen={this.state.isOpen}
onChange={(isOpen) => this.updateMenuState(isOpen)}>
{this.getMainContainer()}
</CustomSideMenu> :
this.getMainContainer()}
</View>
);
} else {
return (
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
width: '100%',
height: '100%'
}}>
{this.props.children}
</View>
);
}
return (
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
width: '100%',
height: '100%'
}}>
{this.props.hasSideMenu ?
<CustomSideMenu
navigation={this.props.navigation} isOpen={this.state.isOpen}
onChange={(isOpen) => this.updateMenuState(isOpen)}>
{this.getMainContainer()}
</CustomSideMenu> :
this.getMainContainer()}
</View>
);
}
}

46
components/CustomHeader.js
View file

@ -1,15 +1,19 @@
// @flow
import * as React from "react";
import {Body, Header, Left, Right, Title} from "native-base";
import {Body, Header, Input, Item, Left, Right, Title, Form} from "native-base";
import {Platform, StyleSheet, View} from "react-native";
import {getStatusBarHeight} from "react-native-status-bar-height";
import Touchable from 'react-native-platform-touchable';
import ThemeManager from "../utils/ThemeManager";
import CustomMaterialIcon from "./CustomMaterialIcon";
import i18n from "i18n-js";
type Props = {
hasBackButton: boolean,
hasSearchField: boolean,
searchCallback: Function,
shouldFocusSearchBar: boolean,
leftButton: React.Node,
rightButton: React.Node,
title: string,
@ -29,11 +33,41 @@ export default class CustomHeader extends React.Component<Props> {
static defaultProps = {
hasBackButton: false,
hasSearchField: false,
searchCallback: () => null,
shouldFocusSearchBar: false,
title: '',
leftButton: <View/>,
rightButton: <View/>,
hasTabs: false,
};
componentDidMount() {
if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
// does not work if called to early for some reason...
setTimeout(() => this.refs.searchInput._root.focus(), 500);
}
}
getSearchBar() {
return (
<Item
style={{
width: '100%',
marginBottom: 7
}}>
<CustomMaterialIcon
icon={'magnify'}
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
<Input
ref="searchInput"
placeholder={i18n.t('proximoScreen.search')}
placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
onChangeText={(text) => this.props.searchCallback(text)}/>
</Item>
);
}
render() {
let button;
// Does the app have a back button or a burger menu ?
@ -52,13 +86,17 @@ export default class CustomHeader extends React.Component<Props> {
return (
<Header style={styles.header}
hasTabs={this.props.hasTabs}>
<Left>
<Left style={{flex: 0}}>
{button}
</Left>
<Body>
<Title>{this.props.title}</Title>
{this.props.hasSearchField ?
this.getSearchBar() :
<Title style={{
paddingLeft: 10
}}>{this.props.title}</Title>}
</Body>
<Right>
<Right style={{flex: this.props.hasSearchField ? 0 : 1}}>
{this.props.rightButton}
{this.props.hasBackButton ? <View/> :
<Touchable

2
components/DashboardItem.js
View file

@ -101,7 +101,7 @@ export default class DashboardItem extends React.Component<Props> {
div: {color: ThemeManager.getCurrentThemeVariables().textColor},
}}/>
<LinearGradient
colors={['transparent', ThemeManager.getCurrentThemeVariables().cardDefaultBg]}
colors={['rgba(255,255,255,0)', ThemeManager.getCurrentThemeVariables().cardDefaultBg]}
start={{x: 0, y: 0}}
end={{x: 0, y: 0.6}}
// end={[0, 0.6]}

105
components/Sidebar.js
View file

@ -8,6 +8,7 @@ import CustomMaterialIcon from '../components/CustomMaterialIcon';
import ThemeManager from "../utils/ThemeManager";
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const drawerCover = require("../assets/drawer-cover.png");
@ -45,6 +46,11 @@ export default class SideBar extends React.Component<Props, State> {
route: "AmicaleScreen",
icon: "web",
},
{
name: "Élus Étudiants",
route: "ElusEtudScreen",
icon: "alpha-e-box",
},
{
name: "Wiketud",
route: "WiketudScreen",
@ -78,55 +84,52 @@ export default class SideBar extends React.Component<Props, State> {
render() {
return (
<Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
<Content
bounces={false}
style={{flex: 1, top: -1}}
>
<Image source={drawerCover} style={styles.drawerCover}/>
<FlatList
data={this.dataSet}
extraData={this.state}
keyExtractor={(item) => item.route}
renderItem={({item}) =>
<ListItem
button
noBorder
selected={this.state.active === item.route}
onPress={() => {
if (item.link !== undefined)
Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
else
this.navigateToScreen(item.route);
}}
>
<Left>
<CustomMaterialIcon
icon={item.icon}
active={this.state.active === item.route}
/>
<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 style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
}}>
<Image source={drawerCover} style={styles.drawerCover}/>
<FlatList
data={this.dataSet}
extraData={this.state}
keyExtractor={(item) => item.route}
renderItem={({item}) =>
<ListItem
button
noBorder
selected={this.state.active === item.route}
onPress={() => {
if (item.link !== undefined)
Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
else
this.navigateToScreen(item.route);
}}
>
<Left>
<CustomMaterialIcon
icon={item.icon}
active={this.state.active === item.route}
/>
<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>}
/>
</Container>
);
}
@ -134,8 +137,8 @@ export default class SideBar extends React.Component<Props, State> {
const styles = StyleSheet.create({
drawerCover: {
height: deviceHeight / 5,
width: null,
height: deviceWidth / 3,
width: 2 * deviceWidth / 3,
position: "relative",
marginBottom: 10,
marginTop: 20

57
components/WebViewScreen.js
View file

@ -8,7 +8,6 @@ import Touchable from "react-native-platform-touchable";
import CustomMaterialIcon from "../components/CustomMaterialIcon";
import ThemeManager from "../utils/ThemeManager";
import BaseContainer from "../components/BaseContainer";
import {ScreenOrientation} from 'expo';
import {NavigationActions} from 'react-navigation';
type Props = {
@ -25,67 +24,17 @@ type Props = {
hasFooter: boolean,
}
type State = {
isLandscape: boolean,
}
/**
* Class defining a webview screen.
*/
export default class WebViewScreen extends React.Component<Props, State> {
export default class WebViewScreen extends React.Component<Props> {
static defaultProps = {
hasBackButton: false,
hasSideMenu: true,
hasFooter: true,
};
state = {
isLandscape: false,
};
webviewArray: Array<WebView> = [];
willFocusSubscription: function;
willBlurSubscription: function;
/**
* Register for blur event to close side menu on screen change
*/
componentDidMount() {
this.willFocusSubscription = this.props.navigation.addListener(
'willFocus',
payload => {
ScreenOrientation.unlockAsync();
ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
this.setState({isLandscape: isLandscape});
const setParamsAction = NavigationActions.setParams({
params: {showTabBar: !isLandscape},
key: this.props.navigation.state.key,
});
this.props.navigation.dispatch(setParamsAction);
});
}
);
this.willBlurSubscription = this.props.navigation.addListener(
'willBlur',
payload => {
ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
}
);
}
/**
* Unregister from event when un-mounting components
*/
componentWillUnmount() {
if (this.willBlurSubscription !== undefined)
this.willBlurSubscription.remove();
if (this.willFocusSubscription !== undefined)
this.willFocusSubscription.remove();
}
openWebLink(url: string) {
Linking.openURL(url).catch((err) => console.error('Error opening link', err));
@ -190,7 +139,8 @@ export default class WebViewScreen extends React.Component<Props, State> {
headerRightButton={this.getRefreshButton()}
hasBackButton={this.props.hasHeaderBackButton}
hasSideMenu={this.props.hasSideMenu}
isHeaderVisible={!this.state.isLandscape}>
enableRotation={true}
hideHeaderOnLandscape={true}>
{this.props.data.length === 1 ?
this.getWebview(this.props.data[0]) :
<Tabs
@ -199,7 +149,6 @@ export default class WebViewScreen extends React.Component<Props, State> {
}}
locked={true}
style = {{
paddingTop: this.state.isLandscape ? 20 : 0,
backgroundColor: Platform.OS === 'ios' ?
ThemeManager.getCurrentThemeVariables().tabDefaultBg :
ThemeManager.getCurrentThemeVariables().brandPrimary

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,24 +1,24 @@
// @flow
import variable from "./../variables/platform";
import { Platform } from "react-native";
import { Platform } from 'react-native';
export default (variables /*: * */ = variable) => {
import variable from './../variables/platform';
import { PLATFORM } from './../variables/commonColor';
export default (variables /* : * */ = variable) => {
const platformStyle = variables.platformStyle;
const platform = variables.platform;
const tabContainerTheme = {
elevation: 3,
height: 50,
flexDirection: "row",
shadowColor: platformStyle === "material" ? "#000" : undefined,
shadowOffset: platformStyle === "material"
? { width: 0, height: 2 }
: undefined,
shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
shadowRadius: platformStyle === "material" ? 1.2 : undefined,
justifyContent: "space-around",
borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0,
flexDirection: 'row',
shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
shadowOffset:
platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
justifyContent: 'space-around',
borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0,
borderColor: variables.topTabBarBorderColor
};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,310 +1,361 @@
// @flow
import color from "color";
import color from 'color';
import { Platform, Dimensions, PixelRatio } from 'react-native';
import {Dimensions, PixelRatio, Platform} from "react-native";
import { PLATFORM } from './commonColor';
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS;
const platformStyle = undefined;
const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
platform === PLATFORM.IOS &&
(deviceHeight === 812 ||
deviceWidth === 812 ||
deviceHeight === 896 ||
deviceWidth === 896);
export default {
platformStyle,
platform,
platformStyle,
platform,
//Accordion
headerStyle: "#edebed",
iconStyle: "#000",
contentStyle: "#f5f4f5",
expandedIconStyle: "#000",
accordionBorderColor: "#d3d3d3",
// Accordion
accordionBorderColor: '#d3d3d3',
accordionContentPadding: 10,
accordionIconFontSize: 18,
contentStyle: '#f5f4f5',
expandedIconStyle: '#000',
headerStyle: '#edebed',
iconStyle: '#000',
// Android
androidRipple: true,
androidRippleColor: "rgba(256, 256, 256, 0.3)",
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
btnUppercaseAndroidText: true,
// ActionSheet
elevation: 4,
containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
innerTouchableBackgroundColor: '#fff',
listItemHeight: 50,
listItemBorderColor: 'transparent',
marginHorizontal: -15,
marginLeft: 14,
marginTop: 15,
minHeight: 56,
padding: 15,
touchableTextColor: '#757575',
// Badge
badgeBg: "#ED1727",
badgeColor: "#fff",
badgePadding: platform === "ios" ? 3 : 0,
// Android
androidRipple: true,
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
buttonUppercaseAndroidText: true,
// Button
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
btnTextColor: '#fff',
btnDisabledBg: "#b5b5b5",
buttonPadding: 6,
get btnPrimaryBg() {
return this.brandPrimary;
// Badge
badgeBg: '#ED1727',
badgeColor: '#fff',
badgePadding: platform === PLATFORM.IOS ? 3 : 0,
// Button
buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
buttonTextColor: '#fff',
buttonDisabledBg: '#b5b5b5',
buttonPadding: 6,
buttonDefaultActiveOpacity: 0.5,
buttonDefaultFlex: 1,
buttonDefaultBorderRadius: 2,
buttonDefaultBorderWidth: 1,
get buttonPrimaryBg() {
return this.brandPrimary;
},
get buttonPrimaryColor() {
return this.inverseTextColor;
},
get buttonInfoBg() {
return this.brandInfo;
},
get buttonInfoColor() {
return this.inverseTextColor;
},
get buttonSuccessBg() {
return this.brandSuccess;
},
get buttonSuccessColor() {
return this.inverseTextColor;
},
get buttonDangerBg() {
return this.brandDanger;
},
get buttonDangerColor() {
return this.inverseTextColor;
},
get buttonWarningBg() {
return this.brandWarning;
},
get buttonWarningColor() {
return this.inverseTextColor;
},
get buttonTextSize() {
return platform === PLATFORM.IOS
? this.fontSizeBase * 1.1
: this.fontSizeBase - 1;
},
get buttonTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get buttonTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
return this.fontSizeBase * 3.8;
},
get iconSizeLarge() {
return this.iconFontSize * 1.5;
},
get iconSizeSmall() {
return this.iconFontSize * 0.6;
},
// Card
cardDefaultBg: '#fff',
cardBorderColor: '#ccc',
cardBorderRadius: 2,
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
// CheckBox
CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
checkboxBgColor: '#be1522',
checkboxSize: 20,
checkboxTickColor: '#fff',
checkboxDefaultColor: 'transparent',
checkboxTextShadowRadius: 0,
// Color
brandPrimary: '#be1522',
brandInfo: '#62B1F6',
brandSuccess: '#5cb85c',
brandDanger: '#d9534f',
brandWarning: '#f0ad4e',
brandDark: '#000',
brandLight: '#f4f4f4',
// Container
containerBgColor: '#fff',
sideMenuBgColor: "#f2f2f2",
// Date Picker
datePickerFlex: 1,
datePickerPadding: 10,
datePickerTextColor: '#000',
datePickerBg: 'transparent',
// FAB
fabBackgroundColor: 'blue',
fabBorderRadius: 28,
fabBottom: 0,
fabButtonBorderRadius: 20,
fabButtonHeight: 40,
fabButtonLeft: 7,
fabButtonMarginBottom: 10,
fabContainerBottom: 20,
fabDefaultPosition: 20,
fabElevation: 4,
fabIconColor: '#fff',
fabIconSize: 24,
fabShadowColor: '#000',
fabShadowOffsetHeight: 2,
fabShadowOffsetWidth: 0,
fabShadowOpacity: 0.4,
fabShadowRadius: 2,
fabWidth: 56,
// Font
DefaultFontSize: 16,
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
},
get fontSizeH2() {
return this.fontSizeBase * 1.6;
},
get fontSizeH3() {
return this.fontSizeBase * 1.4;
},
// Footer
footerHeight: 55,
footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
sTabBarActiveTextColor: '#007aff',
tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
// Header
toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#be1522',
iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
get statusBarColor() {
return color(this.toolbarDefaultBg)
.darken(0.2)
.hex();
},
get darkenHeader() {
return color(this.tabBgColor)
.darken(0.03)
.hex();
},
// Icon
iconFamily: 'Ionicons',
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: '#D9D5DC',
inputSuccessBorderColor: '#2b8339',
inputErrorBorderColor: '#ed2f2f',
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return '#575757';
},
// Line Height
buttonLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
listItemSelected: '#be1522',
// List
listBg: 'transparent',
listBorderColor: '#c9c9c9',
listDividerBg: '#f4f4f4',
listBtnUnderlayColor: '#DDD',
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
listNoteColor: '#808080',
listNoteSize: 13,
// Progress Bar
defaultProgressColor: '#E4202D',
inverseProgressColor: '#1A191B',
// Radio Button
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
radioSelectedColorAndroid: '#be1522',
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
get radioColor() {
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
// Spinner
defaultSpinnerColor: '#be1522',
inverseSpinnerColor: '#1A191B',
// Tab
tabBarDisabledTextColor: '#BDBDBD',
tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
// Tabs
tabBgColor: '#F8F8F8',
tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
tabFontSize: 15,
// Text
textColor: '#000',
textDisabledColor: "#c1c1c1",
inverseTextColor: '#fff',
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
// CUSTOM
customMaterialIconColor: "#5d5d5d",
fetchedDataSectionListErrorText: "#898989",
// Calendar/Agenda
agendaBackgroundColor: '#f3f3f4',
agendaEmptyLine: '#dbdbdc',
// PROXIWASH
proxiwashFinishedColor: "rgba(54,165,22,0.31)",
proxiwashReadyColor: "transparent",
proxiwashRunningColor: "rgba(94,104,241,0.3)",
proxiwashBrokenColor: "rgba(162,162,162,0.31)",
proxiwashErrorColor: "rgba(204,7,0,0.31)",
// Screens
planningColor: '#d9b10a',
proximoColor: '#ec5904',
proxiwashColor: '#1fa5ee',
menuColor: '#e91314',
tutorinsaColor: '#f93943',
// Other
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: '#414142',
inputLineHeight: 24,
deviceWidth,
deviceHeight,
isIphoneX,
inputGroupRoundedBorderRadius: 30,
// iPhoneX SafeArea
Inset: {
portrait: {
topInset: 24,
leftInset: 0,
rightInset: 0,
bottomInset: 34
},
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: "#be1522",
checkboxSize: 20,
checkboxTickColor: "#fff",
// Color
brandPrimary: "#be1522",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
brandWarning: "#f0ad4e",
brandDark: "#000",
brandLight: "#f4f4f4",
//Container
containerBgColor: "#fff",
sideMenuBgColor: "#f2f2f2",
//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" : "#be1522",
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
tabBarTextSize: platform === "ios" ? 14 : 11,
activeTab: platform === "ios" ? "#007aff" : "#fff",
sTabBarActiveTextColor: "#007aff",
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
// Header
toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff",
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
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" ? "#be1522" : "#be1522",
// 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: "#E4202D",
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: "#be1522",
inverseSpinnerColor: "#1A191B",
// Tab
tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
// Tabs
tabBgColor: "#F8F8F8",
tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
tabFontSize: 15,
// Text
textColor: "#000",
textDisabledColor: "#c1c1c1",
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",
// CUSTOM
customMaterialIconColor: "#5d5d5d",
fetchedDataSectionListErrorText: "#898989",
// Calendar/Agenda
agendaBackgroundColor: '#f3f3f4',
agendaEmptyLine: '#dbdbdc',
// PROXIWASH
proxiwashFinishedColor: "rgba(54,165,22,0.31)",
proxiwashReadyColor: "transparent",
proxiwashRunningColor: "rgba(94,104,241,0.3)",
proxiwashBrokenColor: "rgba(162,162,162,0.31)",
proxiwashErrorColor: "rgba(204,7,0,0.31)",
// Screens
planningColor: '#d9b10a',
proximoColor: '#ec5904',
proxiwashColor: '#1fa5ee',
menuColor: '#e91314',
tutorinsaColor: '#f93943',
// 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
}
landscape: {
topInset: 0,
leftInset: 44,
rightInset: 44,
bottomInset: 21
}
}
};

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

@ -1,310 +1,361 @@
// @flow
import color from "color";
import color from 'color';
import { Platform, Dimensions, PixelRatio } from 'react-native';
import {Dimensions, PixelRatio, Platform} from "react-native";
import { PLATFORM } from './commonColor';
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS;
const platformStyle = undefined;
const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
platform === PLATFORM.IOS &&
(deviceHeight === 812 ||
deviceWidth === 812 ||
deviceHeight === 896 ||
deviceWidth === 896);
export default {
platformStyle,
platform,
platformStyle,
platform,
//Accordion
headerStyle: "#edebed",
iconStyle: "#000",
contentStyle: "#f5f4f5",
expandedIconStyle: "#000",
accordionBorderColor: "#d3d3d3",
// Accordion
accordionBorderColor: '#d3d3d3',
accordionContentPadding: 10,
accordionIconFontSize: 18,
contentStyle: '#f5f4f5',
expandedIconStyle: '#000',
headerStyle: '#edebed',
iconStyle: '#000',
// Android
androidRipple: true,
androidRippleColor: "rgba(256, 256, 256, 0.3)",
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
btnUppercaseAndroidText: true,
// ActionSheet
elevation: 4,
containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)',
innerTouchableBackgroundColor: '#fff',
listItemHeight: 50,
listItemBorderColor: 'transparent',
marginHorizontal: -15,
marginLeft: 14,
marginTop: 15,
minHeight: 56,
padding: 15,
touchableTextColor: '#757575',
// Badge
badgeBg: "#ED1727",
badgeColor: "#fff",
badgePadding: platform === "ios" ? 3 : 0,
// Android
androidRipple: true,
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
buttonUppercaseAndroidText: true,
// Button
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
btnTextColor: '#fff',
btnDisabledBg: "#b5b5b5",
buttonPadding: 6,
get btnPrimaryBg() {
return this.brandPrimary;
// Badge
badgeBg: '#ED1727',
badgeColor: '#fff',
badgePadding: platform === PLATFORM.IOS ? 3 : 0,
// Button
buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
buttonTextColor: '#fff',
buttonDisabledBg: '#b5b5b5',
buttonPadding: 6,
buttonDefaultActiveOpacity: 0.5,
buttonDefaultFlex: 1,
buttonDefaultBorderRadius: 2,
buttonDefaultBorderWidth: 1,
get buttonPrimaryBg() {
return this.brandPrimary;
},
get buttonPrimaryColor() {
return this.textColor;
},
get buttonInfoBg() {
return this.brandInfo;
},
get buttonInfoColor() {
return this.textColor;
},
get buttonSuccessBg() {
return this.brandSuccess;
},
get buttonSuccessColor() {
return this.textColor;
},
get buttonDangerBg() {
return this.brandDanger;
},
get buttonDangerColor() {
return this.textColor;
},
get buttonWarningBg() {
return this.brandWarning;
},
get buttonWarningColor() {
return this.textColor;
},
get buttonTextSize() {
return platform === PLATFORM.IOS
? this.fontSizeBase * 1.1
: this.fontSizeBase - 1;
},
get buttonTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get buttonTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
return this.fontSizeBase * 3.8;
},
get iconSizeLarge() {
return this.iconFontSize * 1.5;
},
get iconSizeSmall() {
return this.iconFontSize * 0.6;
},
// Card
cardDefaultBg: '#2A2A2A',
cardBorderColor: '#1a1a1a',
cardBorderRadius: 2,
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
// CheckBox
CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
checkboxBgColor: '#be1522',
checkboxSize: 20,
checkboxTickColor: '#fff',
checkboxDefaultColor: 'transparent',
checkboxTextShadowRadius: 0,
// Color
brandPrimary: '#be1522',
brandInfo: '#62B1F6',
brandSuccess: '#5cb85c',
brandDanger: '#d9534f',
brandWarning: '#f0ad4e',
brandDark: '#000',
brandLight: '#f4f4f4',
// Container
containerBgColor: '#222222',
sideMenuBgColor: "#1c1c1c",
// Date Picker
datePickerFlex: 1,
datePickerPadding: 10,
datePickerTextColor: '#fff',
datePickerBg: 'transparent',
// FAB
fabBackgroundColor: 'blue',
fabBorderRadius: 28,
fabBottom: 0,
fabButtonBorderRadius: 20,
fabButtonHeight: 40,
fabButtonLeft: 7,
fabButtonMarginBottom: 10,
fabContainerBottom: 20,
fabDefaultPosition: 20,
fabElevation: 4,
fabIconColor: '#fff',
fabIconSize: 24,
fabShadowColor: '#000',
fabShadowOffsetHeight: 2,
fabShadowOffsetWidth: 0,
fabShadowOpacity: 0.4,
fabShadowRadius: 2,
fabWidth: 56,
// Font
DefaultFontSize: 16,
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
},
get fontSizeH2() {
return this.fontSizeBase * 1.6;
},
get fontSizeH3() {
return this.fontSizeBase * 1.4;
},
// Footer
footerHeight: 55,
footerDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
sTabBarActiveTextColor: '#007aff',
tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
// Header
toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
toolbarDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#3f3f3f' : '#be1522',
iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
get statusBarColor() {
return color(this.toolbarDefaultBg)
.darken(0.2)
.hex();
},
get darkenHeader() {
return color(this.tabBgColor)
.darken(0.03)
.hex();
},
// Icon
iconFamily: 'Ionicons',
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: '#D9D5DC',
inputSuccessBorderColor: '#2b8339',
inputErrorBorderColor: '#ed2f2f',
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return '#575757';
},
// Line Height
buttonLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
listItemSelected: '#be1522',
// List
listBg: 'transparent',
listBorderColor: '#3e3e3e',
listDividerBg: '#f4f4f4',
listBtnUnderlayColor: '#3a3a3a',
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
listNoteColor: '#acacac',
listNoteSize: 13,
// Progress Bar
defaultProgressColor: '#E4202D',
inverseProgressColor: '#1A191B',
// Radio Button
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
radioSelectedColorAndroid: '#be1522',
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
get radioColor() {
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
// Spinner
defaultSpinnerColor: '#be1522',
inverseSpinnerColor: '#1A191B',
// Tab
tabBarDisabledTextColor: '#BDBDBD',
tabDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
topTabBarBorderColor: platform === PLATFORM.IOS ? '#3f3f3f' : '#fff',
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
// Tabs
tabBgColor: '#2b2b2b',
tabIconColor: "#fff",
tabFontSize: 15,
// Text
textColor: '#ebebeb',
textDisabledColor: "#5b5b5b",
inverseTextColor: '#000',
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
// CUSTOM
customMaterialIconColor: "#b3b3b3",
fetchedDataSectionListErrorText: "#acacac",
// Calendar/Agenda
agendaBackgroundColor: '#373737',
agendaEmptyLine: '#464646',
// PROXIWASH
proxiwashFinishedColor: "rgba(17,149,32,0.53)",
proxiwashReadyColor: "transparent",
proxiwashRunningColor: "rgba(29,59,175,0.65)",
proxiwashBrokenColor: "#000000",
proxiwashErrorColor: "rgba(213,8,0,0.57)",
// Screens
planningColor: '#d99e09',
proximoColor: '#ec5904',
proxiwashColor: '#1fa5ee',
menuColor: '#b81213',
tutorinsaColor: '#f93943',
// Other
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: '#414142',
inputLineHeight: 24,
deviceWidth,
deviceHeight,
isIphoneX,
inputGroupRoundedBorderRadius: 30,
// iPhoneX SafeArea
Inset: {
portrait: {
topInset: 24,
leftInset: 0,
rightInset: 0,
bottomInset: 34
},
get btnPrimaryColor() {
return this.textColor;
},
get btnInfoBg() {
return this.brandInfo;
},
get btnInfoColor() {
return this.textColor;
},
get btnSuccessBg() {
return this.brandSuccess;
},
get btnSuccessColor() {
return this.textColor;
},
get btnDangerBg() {
return this.brandDanger;
},
get btnDangerColor() {
return this.textColor;
},
get btnWarningBg() {
return this.brandWarning;
},
get btnWarningColor() {
return this.textColor;
},
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: "#2A2A2A",
cardBorderColor: "#1a1a1a",
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: "#E4202D",
checkboxSize: 20,
checkboxTickColor: "#fff",
// Color
brandPrimary: "#be1522",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
brandWarning: "#f0ad4e",
brandDark: "#000",
brandLight: "#f4f4f4",
//Container
containerBgColor: "#222222",
sideMenuBgColor: "#1c1c1c",
//Date Picker
datePickerTextColor: "#fff",
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" ? "#333333" : "#be1522",
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
tabBarTextSize: platform === "ios" ? 14 : 11,
activeTab: platform === "ios" ? "#007aff" : "#fff",
sTabBarActiveTextColor: "#007aff",
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
// Header
toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff",
toolbarDefaultBg: platform === "ios" ? "#333333" : "#be1522",
toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
toolbarDefaultBorder: platform === "ios" ? "#3f3f3f" : "#ba1f0f",
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
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: "#be1522",
// List
listBg: "transparent",
listBorderColor: "#3e3e3e",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#3a3a3a",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#acacac",
listNoteSize: 13,
// Progress Bar
defaultProgressColor: "#E4202D",
inverseProgressColor: "#1A191B",
// Radio Button
radioBtnSize: platform === "ios" ? 25 : 23,
radioSelectedColorAndroid: "#E4202D",
radioBtnLineHeight: platform === "ios" ? 29 : 24,
get radioColor() {
return "#be1522";
},
// 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: "#be1522",
inverseSpinnerColor: "#1A191B",
// Tab
tabDefaultBg: platform === "ios" ? "#333333" : "#be1522",
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
topTabBarBorderColor: platform === "ios" ? "#3f3f3f" : "#fff",
topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
// Tabs
tabBgColor: "#2b2b2b",
tabIconColor: "#fff",
tabFontSize: 15,
// Text
textColor: "#ebebeb",
textDisabledColor: "#5b5b5b",
inverseTextColor: "#000",
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
titleFontSize: platform === "ios" ? 17 : 19,
subTitleFontSize: platform === "ios" ? 11 : 14,
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
titleFontColor: platform === "ios" ? "#FFF" : "#FFF",
// CUSTOM
customMaterialIconColor: "#b3b3b3",
fetchedDataSectionListErrorText: "#acacac",
// Calendar/Agenda
agendaBackgroundColor: '#373737',
agendaEmptyLine: '#464646',
// PROXIWASH
proxiwashFinishedColor: "rgba(17,149,32,0.53)",
proxiwashReadyColor: "transparent",
proxiwashRunningColor: "rgba(29,59,175,0.65)",
proxiwashBrokenColor: "#000000",
proxiwashErrorColor: "rgba(213,8,0,0.57)",
// Screens
planningColor: '#d99e09',
proximoColor: '#ec5904',
proxiwashColor: '#1fa5ee',
menuColor: '#b81213',
tutorinsaColor: '#f93943',
// 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
}
landscape: {
topInset: 0,
leftInset: 44,
rightInset: 44,
bottomInset: 21
}
}
};

2
navigation/AppNavigator.js
View file

@ -12,6 +12,7 @@ import SelfMenuScreen from '../screens/SelfMenuScreen';
import TutorInsaScreen from "../screens/TutorInsaScreen";
import AmicaleScreen from "../screens/AmicaleScreen";
import WiketudScreen from "../screens/WiketudScreen";
import ElusEtudScreen from "../screens/ElusEtudScreen";
import AvailableRoomScreen from "../screens/AvailableRoomScreen";
import DebugScreen from '../screens/DebugScreen';
import {fromRight} from "react-navigation-transitions";
@ -33,6 +34,7 @@ function createAppContainerWithInitialRoute(initialRoute: string) {
TutorInsaScreen: {screen: TutorInsaScreen},
AmicaleScreen: {screen: AmicaleScreen},
WiketudScreen: {screen: WiketudScreen},
ElusEtudScreen: {screen: ElusEtudScreen},
AvailableRoomScreen: {screen: AvailableRoomScreen},
ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
ProximoAboutScreen: {screen: ProximoAboutScreen},

12
navigation/MainTabNavigator.js
View file

@ -26,18 +26,20 @@ function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string)
Proximo: {screen: ProximoMainScreen,},
Planex: {
screen: PlanexScreen,
navigationOptions: ({ navigation }) => {
navigationOptions: ({navigation}) => {
const showTabBar = navigation.state && navigation.state.params ? navigation.state.params.showTabBar : true;
return {
tabBarVisible: showTabBar,
};
},},
},
},
}, {
defaultNavigationOptions: ({navigation}) => ({
tabBarIcon: ({focused, horizontal, tintColor}) => {
tabBarIcon: ({focused, tintColor}) => {
let icon = TAB_ICONS[navigation.state.routeName];
return <CustomMaterialIcon icon={icon} color={tintColor}/>;
// tintColor is ignoring activeColor et inactiveColor for some reason
let color = focused ? "#f0edf6" : "#4e1108";
return <CustomMaterialIcon icon={icon} color={color}/>;
},
tabBarVisible: true,
}),

36
package.json
View file

@ -8,38 +8,36 @@
"eject": "expo eject"
},
"dependencies": {
"@expo/vector-icons": "^10.0.2",
"@expo/vector-icons": "^10.0.0",
"@react-native-community/status-bar": "^1.0.3",
"@shoutem/theme": "^0.11.3",
"expo": "^33.0.7",
"expo-font": "^5.0.1",
"expo-linear-gradient": "^5.0.1",
"expo-localization": "^5.0.1",
"expo-permissions": "^5.0.1",
"expo": "^36.0.0",
"expo-font": "~8.0.0",
"expo-linear-gradient": "~8.0.0",
"expo-localization": "~8.0.0",
"expo-permissions": "~8.0.0",
"i18n-js": "^3.3.0",
"native-base": "^2.12.1",
"native-base-shoutem-theme": "^0.2.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-native": "^0.59.9",
"native-base-shoutem-theme": "^0.3.1",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
"react-native-app-intro-slider": "^3.0.0",
"react-native-autolink": "^1.8.1",
"react-native-calendars": "^1.212.0",
"react-native-modal": "^11.3.1",
"react-native-modalize": "^1.2.1",
"react-native-paper": "^2.16.0",
"react-native-gesture-handler": "~1.5.0",
"react-native-material-menu": "^0.6.7",
"react-native-modalize": "^1.3.6",
"react-native-platform-touchable": "^1.1.1",
"react-native-render-html": "^4.1.2",
"react-native-side-menu": "^1.1.3",
"react-native-status-bar-height": "^2.3.1",
"react-native-webview": "^5.8.1",
"react-navigation": "^3.11.0",
"react-navigation-material-bottom-tabs": "^1.0.0",
"react-native-webview": "7.4.3",
"react-navigation": "^3.13.0",
"react-navigation-material-bottom-tabs": "^1.1.1",
"react-navigation-transitions": "^1.0.12"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"react-native-material-menu": "^0.6.3"
"babel-preset-expo": "^8.0.0"
},
"private": true
}

66
screens/About/AboutScreen.js
View file

@ -9,7 +9,7 @@ import appJson from '../../app';
import packageJson from '../../package';
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import AsyncStorageManager from "../../utils/AsyncStorageManager";
import Modalize from "react-native-modalize";
import {Modalize} from "react-native-modalize";
import ThemeManager from "../../utils/ThemeManager";
const links = {
@ -28,13 +28,18 @@ const links = {
bugsGit: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/issues',
changelog: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
license: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
mail: "mailto:vergnet@etud.insa-toulouse.fr?" +
authorMail: "mailto:vergnet@etud.insa-toulouse.fr?" +
"subject=" +
"Application Amicale INSA Toulouse" +
"&body=" +
"Coucou !\n\n",
linkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
facebook: 'https://www.facebook.com/arnaud.vergnet',
authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
yohanMail: "mailto:ysimard@etud.insa-toulouse.fr?" +
"subject=" +
"Application Amicale INSA Toulouse" +
"&body=" +
"Coucou !\n\n",
yohanLinkedin: 'https://www.linkedin.com/in/yohan-simard', // TODO set real link
react: 'https://facebook.github.io/react-native/',
};
@ -125,21 +130,39 @@ export default class AboutScreen extends React.Component<Props, State> {
showChevron: false
},
{
onPressCallback: () => openWebLink(links.mail),
onPressCallback: () => openWebLink(links.authorMail),
icon: 'email',
text: i18n.t('aboutScreen.mail'),
text: i18n.t('aboutScreen.authorMail'),
showChevron: true
},
{
onPressCallback: () => openWebLink(links.linkedin),
onPressCallback: () => openWebLink(links.authorLinkedin),
icon: 'linkedin',
text: 'Linkedin',
showChevron: true
},
];
/**
* Data to be displayed in the additional developer card
*/
additionalDevData: Array<Object> = [
{
onPressCallback: () => openWebLink(links.facebook),
icon: 'facebook',
text: 'Facebook',
onPressCallback: () => console.log('Meme this'),
icon: 'account',
text: 'Yohan SIMARD',
showChevron: false
},
{
onPressCallback: () => openWebLink(links.yohanMail),
icon: 'email',
text: i18n.t('aboutScreen.authorMail'),
showChevron: true
},
{
onPressCallback: () => openWebLink(links.yohanLinkedin),
icon: 'linkedin',
text: 'Linkedin',
showChevron: true
},
];
@ -291,6 +314,18 @@ export default class AboutScreen extends React.Component<Props, State> {
</Card>
<Card>
<CardItem>
<Left>
<CustomMaterialIcon
icon={'account-multiple'}
fontSize={40}
width={40}
color={ThemeManager.getCurrentThemeVariables().brandPrimary}/>
<Body>
<H1>{i18n.t('aboutScreen.team')}</H1>
</Body>
</Left>
</CardItem>
<CardItem header>
<Text>{i18n.t('aboutScreen.author')}</Text>
</CardItem>
@ -302,6 +337,17 @@ export default class AboutScreen extends React.Component<Props, State> {
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
<CardItem header>
<Text>{i18n.t('aboutScreen.additionalDev')}</Text>
</CardItem>
<FlatList
data={this.additionalDevData}
extraData={this.state}
keyExtractor={(item) => item.icon}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
</Card>
<Card>

2
screens/DebugScreen.js
View file

@ -28,7 +28,7 @@ import Touchable from "react-native-platform-touchable";
import {Alert, View, Clipboard, Image} from "react-native";
import AsyncStorageManager from "../utils/AsyncStorageManager";
import NotificationsManager from "../utils/NotificationsManager";
import Modalize from "react-native-modalize";
import {Modalize} from "react-native-modalize";
type Props = {
navigation: Object,

39
screens/ElusEtudScreen.js Normal file
View file

@ -0,0 +1,39 @@
// @flow
import * as React from 'react';
import ThemeManager from "../utils/ThemeManager";
import WebViewScreen from "../components/WebViewScreen";
type Props = {
navigation: Object,
}
const URL = 'https://srv-falcon.etud.insa-toulouse.fr/~eeinsat/';
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
*/
export default class ElusEtudScreen extends React.Component<Props> {
render() {
const nav = this.props.navigation;
return (
<WebViewScreen
navigation={nav}
data={[
{
url: URL,
icon: '',
name: '',
customJS: ''
},
]}
headerTitle={'Élus Étudiants'}
hasHeaderBackButton={true}
hasSideMenu={false}/>
);
}
}

65
screens/PlanexScreen.js
View file

@ -15,6 +15,51 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile2.css';
const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark2.css';
// // JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing
// // Remove alpha from given Jquery node
// function removeAlpha(node) {
// console.log(node);
// let bg = node.css("background-color");
// if (bg.match("^rgba")) {
// let a = bg.slice(5).split(',');
// let newBg ='rgb(' + a[0] + ',' + parseInt(a[1]) + ',' + parseInt(a[2]) + ')';
// node.css("background-color", newBg);
// }
// }
// // Observe for planning DOM changes
// let observer = new MutationObserver(function(mutations) {
// for (let i = 0; i < mutations.length; i++) {
// if (mutations[i]['addedNodes'].length > 0 && $(mutations[i]['addedNodes'][0]).hasClass("fc-event"))
// removeAlpha($(mutations[i]['addedNodes'][0]))
// }
// });
// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});
// // Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded.
// $(".fc-event-container .fc-event").each(function(index) {
// removeAlpha($(this));
// });
// Watch for changes in the calendar and call the remove alpha function
const OBSERVE_MUTATIONS_INJECTED =
'function removeAlpha(node) {\n' +
' console.log(node);\n' +
' let bg = node.css("background-color");\n' +
' if (bg.match("^rgba")) {\n' +
' let a = bg.slice(5).split(\',\');\n' +
' let newBg =\'rgb(\' + a[0] + \',\' + parseInt(a[1]) + \',\' + parseInt(a[2]) + \')\';\n' +
' node.css("background-color", newBg);\n' +
' }\n' +
'}' +
'let observer = new MutationObserver(function(mutations) {\n' +
' for (let i = 0; i < mutations.length; i++) {\n' +
' if (mutations[i][\'addedNodes\'].length > 0 && $(mutations[i][\'addedNodes\'][0]).hasClass("fc-event"))\n' +
' removeAlpha($(mutations[i][\'addedNodes\'][0]))\n' +
' }\n' +
'});\n' +
'observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
'$(".fc-event-container .fc-event").each(function(index) {\n' +
' removeAlpha($(this));\n' +
'});';
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
@ -26,12 +71,22 @@ export default class PlanexScreen extends React.Component<Props> {
constructor() {
super();
this.customInjectedJS =
'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\';' +
'$(".fc-toolbar .fc-center").append(\'<p id="rotateToLandscape">' + i18n.t("planexScreen.rotateToLandscape") + '</p>\');' +
'$(".fc-toolbar .fc-center").append(\'<p id="rotateToPortrait">' + i18n.t("planexScreen.rotateToPortrait") + '</p>\');true;';
'$(document).ready(function() {' +
OBSERVE_MUTATIONS_INJECTED +
'$("head").append(\'<meta name="viewport" content="width=device-width, initial-scale=1.0">\');' +
'$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\');';
if (ThemeManager.getNightMode())
this.customInjectedJS += 'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\';';
this.customInjectedJS += '$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\');';
this.customInjectedJS +=
'$(".fc-toolbar .fc-center").append(\'<p id="rotateToLandscape" style="color: ' + ThemeManager.getCurrentThemeVariables().brandPrimary + '">' +
i18n.t("planexScreen.rotateToLandscape") + '</p>\');' +
'$(".fc-toolbar .fc-center").append(\'<p id="rotateToPortrait" style="color: ' + ThemeManager.getCurrentThemeVariables().brandPrimary + '">' +
i18n.t("planexScreen.rotateToPortrait") + '</p>\');' +
'removeAlpha();' +
'});true;'; // Prevent crash on ios
}
render() {

70
screens/PlanningScreen.js
View file

@ -1,19 +1,28 @@
// @flow
import * as React from 'react';
import {Content, H1, H2, H3, Text, Button} from 'native-base';
import {BackHandler} from 'react-native';
import {Content, H1, H3, Text, Button} from 'native-base';
import i18n from "i18n-js";
import {View, Image} from "react-native";
import ThemeManager from "../utils/ThemeManager";
import {Linking} from "expo";
import BaseContainer from "../components/BaseContainer";
import {Agenda} from 'react-native-calendars';
import {Agenda, LocaleConfig} from 'react-native-calendars';
import HTML from 'react-native-render-html';
import Touchable from 'react-native-platform-touchable';
import Modalize from 'react-native-modalize';
import {Modalize} from 'react-native-modalize';
import WebDataManager from "../utils/WebDataManager";
import CustomMaterialIcon from "../components/CustomMaterialIcon";
LocaleConfig.locales['fr'] = {
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
today: 'Aujourd\'hui'
};
type Props = {
navigation: Object,
@ -23,6 +32,7 @@ type State = {
modalCurrentDisplayItem: Object,
refreshing: boolean,
agendaItems: Object,
calendarShowing: boolean,
};
const FETCH_URL = "https://amicale-insat.fr/event/json/list";
@ -42,26 +52,64 @@ function openWebLink(link) {
*/
export default class PlanningScreen extends React.Component<Props, State> {
modalRef: { current: null | Modalize };
modalRef: Modalize;
agendaRef: Agenda;
webDataManager: WebDataManager;
lastRefresh: Date;
minTimeBetweenRefresh = 60;
didFocusSubscription: Function;
willBlurSubscription: Function;
constructor(props: any) {
super(props);
this.modalRef = React.createRef();
this.webDataManager = new WebDataManager(FETCH_URL);
this.didFocusSubscription = props.navigation.addListener(
'didFocus',
payload =>
BackHandler.addEventListener(
'hardwareBackPress',
this.onBackButtonPressAndroid
)
);
if (i18n.currentLocale().startsWith("fr")) {
LocaleConfig.defaultLocale = 'fr';
}
}
componentDidMount() {
this._onRefresh();
this.willBlurSubscription = this.props.navigation.addListener(
'willBlur',
payload =>
BackHandler.removeEventListener(
'hardwareBackPress',
this.onBackButtonPressAndroid
)
);
}
onBackButtonPressAndroid = () => {
if (this.state.calendarShowing) {
this.agendaRef.chooseDay(this.agendaRef.state.selectedDay);
return true;
} else {
return false;
}
};
componentWillUnmount() {
this.didFocusSubscription && this.didFocusSubscription.remove();
this.willBlurSubscription && this.willBlurSubscription.remove();
}
state = {
modalCurrentDisplayItem: {},
refreshing: false,
agendaItems: {},
calendarShowing: false,
};
getCurrentDate() {
@ -165,7 +213,9 @@ export default class PlanningScreen extends React.Component<Props, State> {
flex: 1,
flexDirection: 'row'
}}>
<View style={{width: '70%'}}>
<View style={{
width: item.logo !== null ? '70%' : '100%',
}}>
<Text style={{
color: ThemeManager.getCurrentThemeVariables().listNoteColor,
marginTop: 5,
@ -176,7 +226,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
<H3 style={{marginBottom: 10}}>{item.title}</H3>
</View>
<View style={{
width: '30%',
width: item.logo !== null ? '30%' : 0,
height: 80
}}>
{item.logo !== null ?
@ -345,11 +395,19 @@ export default class PlanningScreen extends React.Component<Props, State> {
futureScrollRange={AGENDA_MONTH_SPAN}
// If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
onRefresh={() => this._onRefresh()}
// callback that fires when the calendar is opened or closed
onCalendarToggled={(calendarOpened) => {
this.setState({calendarShowing: calendarOpened})
}}
// Set this true while waiting for new data from a refresh
refreshing={this.state.refreshing}
renderItem={(item) => this.getRenderItem(item)}
renderEmptyDate={() => this.getRenderEmptyDate()}
rowHasChanged={() => this.rowHasChanged()}
// If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
firstDay={1}
// ref to this agenda in order to handle back button event
ref={(ref) => this.agendaRef = ref}
// agenda theme
theme={{
backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,

179
screens/Proximo/ProximoListScreen.js
View file

@ -9,7 +9,7 @@ import Menu, {MenuItem} from 'react-native-material-menu';
import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import ThemeManager from "../../utils/ThemeManager";
import Modalize from 'react-native-modalize';
import {Modalize} from 'react-native-modalize';
const sortMode = {
price: "0",
@ -45,12 +45,12 @@ type Props = {
}
type State = {
navData: Array<Object>,
currentSortMode: string,
isSortReversed: boolean,
sortPriceIcon: React.Node,
sortNameIcon: React.Node,
modalCurrentDisplayItem: Object,
currentlyDisplayedData: Array<Object>,
};
/**
@ -58,20 +58,24 @@ type State = {
*/
export default class ProximoListScreen extends React.Component<Props, State> {
modalRef: { current: null | Modalize };
modalRef: { current: null | Modalize };
originalData: Array<Object>;
navData = this.props.navigation.getParam('data', []);
shouldFocusSearchBar = this.props.navigation.getParam('shouldFocusSearchBar', false);
constructor(props: any) {
super(props);
this.modalRef = React.createRef();
this.originalData = this.navData['data'];
}
state = {
navData: this.props.navigation.getParam('data', []).sort(sortPrice),
currentlyDisplayedData: this.navData['data'].sort(sortPrice),
currentSortMode: sortMode.price,
isSortReversed: false,
sortPriceIcon: '',
sortNameIcon: '',
modalCurrentDisplayItem: {}
modalCurrentDisplayItem: {},
};
_menu: Menu;
@ -111,7 +115,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
currentSortMode: mode,
isSortReversed: isReverse
});
let data = this.state.navData;
let data = this.state.currentlyDisplayedData;
switch (mode) {
case sortMode.price:
if (isReverse) {
@ -192,6 +196,35 @@ export default class ProximoListScreen extends React.Component<Props, State> {
}
}
sanitizeString(str: string) {
return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}
/**
* Returns only the articles whose name contains str. Case and accents insensitive.
* @param str
* @returns {[]}
*/
filterData(str: string) {
let filteredData = [];
const testStr = this.sanitizeString(str);
const articles = this.originalData;
for (const article of articles) {
const name = this.sanitizeString(article.name);
if (name.includes(testStr)) {
filteredData.push(article)
}
}
return filteredData;
}
search(str: string) {
this.setState({
currentlyDisplayedData: this.filterData(str)
})
}
getModalContent() {
return (
<View style={{
@ -232,10 +265,39 @@ export default class ProximoListScreen extends React.Component<Props, State> {
}
}
getSortMenu() {
return (
<Menu
ref={this.setMenuRef}
button={
<Touchable
style={{padding: 6}}
onPress={() =>
this._menu.show()
}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={'sort'}/>
</Touchable>
}
>
<MenuItem
onPress={() => this.sortModeSelected(sortMode.name)}>
{this.state.sortNameIcon}
{i18n.t('proximoScreen.sortName')}
</MenuItem>
<MenuItem
onPress={() => this.sortModeSelected(sortMode.price)}>
{this.state.sortPriceIcon}
{i18n.t('proximoScreen.sortPrice')}
</MenuItem>
</Menu>
);
}
render() {
const nav = this.props.navigation;
const navType = nav.getParam('type', '{name: "Error"}');
return (
<Container>
<Modalize ref={this.modalRef}
@ -243,69 +305,48 @@ export default class ProximoListScreen extends React.Component<Props, State> {
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
{this.getModalContent()}
</Modalize>
<CustomHeader hasBackButton={true} navigation={nav} title={navType.name} rightButton={
<Menu
ref={this.setMenuRef}
button={
<Touchable
style={{padding: 6}}
onPress={() =>
this._menu.show()
}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={'sort'}/>
</Touchable>
}
>
<MenuItem
onPress={() => this.sortModeSelected(sortMode.name)}>
{this.state.sortNameIcon}
{i18n.t('proximoScreen.sortName')}
</MenuItem>
<MenuItem
onPress={() => this.sortModeSelected(sortMode.price)}>
{this.state.sortPriceIcon}
{i18n.t('proximoScreen.sortPrice')}
</MenuItem>
</Menu>
}/>
<CustomHeader
hasBackButton={true}
navigation={nav}
hasSearchField={true}
searchCallback={(text) => this.search(text)}
shouldFocusSearchBar={this.shouldFocusSearchBar}
rightButton={this.getSortMenu()}
/>
<Content>
<FlatList
data={this.state.navData}
extraData={this.state.navData}
keyExtractor={(item) => item.name + item.code}
style={{minHeight: 300, width: '100%'}}
renderItem={({item}) =>
<ListItem
thumbnail
onPress={() => {
this.showItemDetails(item);
}}
>
<Left>
<Thumbnail square source={{uri: item.image}}/>
</Left>
<Body>
<Text style={{marginLeft: 20}}>
{item.name}
</Text>
<Text note style={{
marginLeft: 20,
color: this.getStockColor(parseInt(item.quantity))
}}>
{item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
</Text>
</Body>
<Right>
<Text style={{fontWeight: "bold"}}>
{item.price}€
</Text>
</Right>
</ListItem>}
/>
</Content>
<FlatList
data={this.state.currentlyDisplayedData}
extraData={this.state.currentlyDisplayedData}
keyExtractor={(item) => item.name + item.code}
style={{minHeight: 300, width: '100%'}}
renderItem={({item}) =>
<ListItem
thumbnail
onPress={() => {
this.showItemDetails(item);
}}
>
<Left>
<Thumbnail square source={{uri: item.image}}/>
</Left>
<Body>
<Text style={{marginLeft: 20}}>
{item.name}
</Text>
<Text note style={{
marginLeft: 20,
color: this.getStockColor(parseInt(item.quantity))
}}>
{item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
</Text>
</Body>
<Right>
<Text style={{fontWeight: "bold"}}>
{item.price}€
</Text>
</Right>
</ListItem>}
/>
</Container>
);
}

92
screens/Proximo/ProximoMainScreen.js
View file

@ -2,7 +2,7 @@
import * as React from 'react';
import {Platform, View} from 'react-native'
import {Badge, Body, H2, Left, ListItem, Right, Text} from 'native-base';
import {Badge, Body, Left, ListItem, Right, Text} from 'native-base';
import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import FetchedDataSectionList from "../../components/FetchedDataSectionList";
@ -38,7 +38,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
return [
{
title: '',
data: ProximoMainScreen.generateData(fetchedData),
data: this.generateData(fetchedData),
extraData: super.state,
keyExtractor: this.getKeyExtractor
}
@ -52,66 +52,120 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
* @param fetchedData The array of articles represented by objects
* @returns {Array} The formatted dataset
*/
static generateData(fetchedData: Object) {
generateData(fetchedData: Object) {
let finalData = [];
if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
let types = fetchedData.types;
let articles = fetchedData.articles;
finalData.push({
type: {
id: "0",
name: i18n.t('proximoScreen.all'),
icon: 'star'
},
data: this.getAvailableArticles(articles, undefined)
});
for (let i = 0; i < types.length; i++) {
finalData.push({
type: types[i],
data: []
data: this.getAvailableArticles(articles, types[i])
});
for (let k = 0; k < articles.length; k++) {
if (articles[k]['type'].includes(types[i].id) && parseInt(articles[k]['quantity']) > 0) {
finalData[i].data.push(articles[k]);
}
}
}
}
finalData.sort(ProximoMainScreen.sortFinalData);
return finalData;
}
/**
* Get an array of available articles (in stock) of the given type
*
* @param articles The list of all articles
* @param type The type of articles to find (undefined for any type)
* @return {Array} The array of available articles
*/
getAvailableArticles(articles: Array<Object>, type: ?Object) {
let availableArticles = [];
for (let k = 0; k < articles.length; k++) {
if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id'])
|| type === undefined)
&& parseInt(articles[k]['quantity']) > 0) {
availableArticles.push(articles[k]);
}
}
return availableArticles;
}
static sortFinalData(a: Object, b: Object) {
return a.type.id - b.type.id;
}
getRightButton() {
let searchScreenData = {
shouldFocusSearchBar: true,
data: {
type: {
id: "0",
name: i18n.t('proximoScreen.all'),
icon: 'star'
},
data: this.state.fetchedData.articles !== undefined ?
this.getAvailableArticles(this.state.fetchedData.articles, undefined) : []
},
};
return (
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/>
</Touchable>
<View
style={{
flexDirection: 'row'
}}>
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoListScreen', searchScreenData)}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="magnify"/>
</Touchable>
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/>
</Touchable>
</View>
);
}
getRenderItem(item: Object, section: Object, data: Object) {
let dataToSend = {
shouldFocusSearchBar: false,
data: item,
};
if (item.data.length > 0) {
return (
<ListItem
button
thumbnail
onPress={() => {
this.props.navigation.navigate('ProximoListScreen', item);
this.props.navigation.navigate('ProximoListScreen', dataToSend);
}}
>
<Left>
<CustomMaterialIcon
icon={item.type.icon}
fontSize={30}
color={ThemeManager.getCurrentThemeVariables().brandPrimary}
/>
</Left>
<Body>
<Text>
{item.type.name}
</Text>
<Badge><Text>
<Text note>
{item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
</Text></Badge>
</Text>
</Body>
<Right>
<CustomMaterialIcon icon="chevron-right"/>

1
screens/SettingsScreen.js
View file

@ -140,7 +140,6 @@ export default class SettingsScreen extends React.Component<Props, State> {
actions: [NavigationActions.navigate({routeName: 'Main'})],
});
this.props.navigation.dispatch(resetAction);
// this.props.navigation.navigate('SettingsScreen');
}
/**

12
translations/en.json
View file

@ -25,7 +25,7 @@
},
"slide4": {
"title": "Proximo",
"text": "Are you short on pasta? Or you maybe you feel a little peckish, then look up your INSA shop's stock in real time"
"text": "Are you short on pasta? Or maybe you feel a little peckish, then look up your INSA shop's stock in real time"
},
"slide5": {
"title": "Planex",
@ -110,8 +110,10 @@
"changelog": "Changelog",
"license": "License",
"debug": "Debug",
"team": "Team",
"author": "Author",
"mail": "Send an email",
"authorMail": "Send an email",
"additionalDev": "Additional developer",
"technologies": "Technologies",
"reactNative": "Made with React Native",
"libs": "Libraries used"
@ -129,7 +131,9 @@
"description": "The Proximo is your small grocery store maintained by students directly on the campus. Open every day from 18h30 to 19h30, we welcome you when you are short on pastas or sodas ! Different products for different problems, everything at cost price. You can pay by Lydia or cash.",
"openingHours": "Openning Hours",
"paymentMethods": "Payment Methods",
"paymentMethodsDescription": "Cash or Lydia"
"paymentMethodsDescription": "Cash or Lydia",
"search": "Search",
"all": "All"
},
"proxiwashScreen": {
"dryer": "Dryer",
@ -141,7 +145,7 @@
"listUpdateFail": "Error while updating machines state",
"error": "Could not update machines state. Pull down to retry.",
"loading": "Loading...",
"description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay b credit card or cash.",
"description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay by credit card or cash.",
"informationTab": "Information",
"paymentTab": "Payment",
"tariffs": "Tariffs",

30
translations/fr.json
View file

@ -21,11 +21,11 @@
},
"slide3": {
"title": "N'oubliez plus votre linge !",
"text": "CAMPUS vous informe de la disponibilité des machines et vous permet d'être notifiés lorsque la vôtre se termine bientôt !"
"text": "CAMPUS vous informe de la disponibilité des machines et vous permet d'être notifié lorsque la vôtre se termine bientôt !"
},
"slide4": {
"title": "Proximo",
"text": "Il vous manque des pâtes ? Ou un petit creux au gouter, regardez les stocks de votre supérette insaienne en temps réel"
"text": "Il vous manque des pâtes ? Ou un petit creux au goûter, regardez les stocks de votre supérette insaienne en temps réel"
},
"slide5": {
"title": "Planex",
@ -75,7 +75,7 @@
"dashboard": {
"seeMore": "Cliquez pour plus d'infos",
"todayEventsTitle": "Événements aujourd'hui",
"todayEventsSubtitleNA": "Pas d'événements",
"todayEventsSubtitleNA": "Pas d'événement",
"todayEventsSubtitle": " événement aujourd'hui",
"todayEventsSubtitlePlural": " événements aujourd'hui",
"proximoTitle": "Proximo",
@ -110,8 +110,10 @@
"changelog": "Historique des modifications",
"license": "Licence",
"debug": "Debug",
"team": "Équipe",
"author": "Auteur",
"mail": "Envoyer un mail",
"authorMail": "Envoyer un mail",
"additionalDev": "Développeur additionnel",
"technologies": "Technologies",
"reactNative": "Créé avec React Native",
"libs": "Librairies utilisées"
@ -126,10 +128,12 @@
"listUpdateFail": "Erreur lors de la mise à jour de la list d'articles",
"loading": "Chargement...",
"inStock": "en stock",
"description": "Le Proximo c’est ta petite épicerie étudiante tenu par les étudiants directement sur le campus. Ouvert tous les jours de 18h30 à 19h30, nous t’accueillons et te souvent quand tu n’as plus de pâtes ou de diluant ! Différents produits pour différentes galère, le tout à prix coûtant. Tu peux payer par Lydia ou par espèce.",
"description": "Le Proximo c’est ta petite épicerie étudiante tenue par les étudiants directement sur le campus. Ouverte tous les jours de 18h30 à 19h30, nous t’accueillons et te sauvons quand tu n’as plus de pâtes ou de diluant ! Différents produits pour différentes galères, le tout à prix coûtant. Tu peux payer par Lydia ou par espèce.",
"openingHours": "Horaires d'ouverture",
"paymentMethods" : "Moyens de Paiement",
"paymentMethodsDescription" : "Espèce ou Lydia"
"paymentMethodsDescription" : "Espèce ou Lydia",
"search": "Rechercher",
"all": "Tout"
},
"proxiwashScreen": {
"dryer": "Sèche-Linge",
@ -137,9 +141,9 @@
"washer": "Lave-Linge",
"washers": "Lave-Linges",
"min": "min",
"listUpdated": "Etat des machines mis à jour",
"listUpdateFail": "Erreur lors de la mise à jour del'état des machines",
"error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour reessayer.",
"listUpdated": "État des machines mis à jour",
"listUpdateFail": "Erreur lors de la mise à jour de l'état des machines",
"error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour réessayer.",
"loading": "Chargement...",
"description": "C'est le service de laverie proposé par promologis pour les résidences INSA (On t'en voudra pas si tu loges pas sur le campus et que tu fais ta machine ici). Le local situé au pied du R2 avec ses 3 sèche-linges et 9 machines est ouvert 7J/7 24h/24 ! Ici tu peux vérifier leur disponibilité ! Tu peux amener ta lessive, la prendre sur place ou encore mieux l'acheter au Proximo (moins chère qu'à la laverie directement). Tu peux payer par CB ou espèces.",
"informationTab": "Informations",
@ -152,7 +156,7 @@
"washerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.\n\nDès que le programme est terminé, l’afficheur indique 'Programme terminé', appuyer sur le bouton jaune d’ouverture du hublot pour récupérer le linge.",
"washerTips": "Programme blanc/couleur : 6kg de linge sec (textiles en coton, lin, linge de corps, draps, jeans,serviettes de toilettes).\n\nProgramme nonrepassable : 3,5 kg de linge sec (textiles en fibres synthétiques, cotonet polyester mélangés).\n\nProgramme fin 30°C : 2,5 kg de linge sec (textiles délicats en fibres synthétiques, rayonne).\n\nProgramme laine 30°C : 2,5 kg de linge sec (textiles en laine et lainages lavables).",
"dryerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.",
"dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le seche-linge n'est pas chargé.",
"dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le sèche-linge n'est pas chargé.",
"procedure": "Procédure",
"tips": "Conseils",
@ -161,7 +165,7 @@
"disableNotifications": "Désactiver les notifications",
"ok": "OK",
"cancel": "Annuler",
"finished": "Cette machine est terminée. Si vous l'avez l'avez démarée, vous pouvez récupérer votre linge.",
"finished": "Cette machine est terminée. Si vous l'avez démarrée, vous pouvez récupérer votre linge.",
"ready": "Cette machine est vide et prête à être utilisée.",
"running": "Cette machine a démarré à %{start} et terminera à %{end}.\nTemps restant : %{remaining} min",
"broken": "Cette machine est hors service. Merci pour votre compréhension.",
@ -171,7 +175,7 @@
},
"states": {
"finished": "TERMINE",
"finished": "TERMINÉ",
"ready": "DISPONIBLE",
"running": "EN COURS",
"broken": "HORS SERVICE",
@ -195,7 +199,7 @@
},
"general": {
"loading": "Chargement...",
"networkError": "Impossible de contacter les serveurs. Assurez vous d'être connecté à internet."
"networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet."
},
"date": {
"daysOfWeek": {