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

Added first application draft

Browse source
This commit is contained in:
keplyx 2019-06-25 22:20:24 +02:00
parent 2d641579aa
commit dd2cb38c58
73 changed files with 6587 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
App.js
View file

@ -1,19 +1,54 @@
import React from 'react'; import React from 'react';
import { StyleSheet, Text, View } from 'react-native'; import {Dimensions, StyleSheet, View, Text} from 'react-native';
import {StyleProvider} from 'native-base';
import AppNavigator from './navigation/AppNavigator';
import ThemeManager from './utils/ThemeManager';
import LocaleManager from './utils/LocaleManager';
import * as Font from 'expo-font';
export default function App() {
export default class App extends React.Component {
constructor(props) {
super(props);
LocaleManager.getInstance().initTranslations();
this.updateTheme = this.updateTheme.bind(this);
this.state = {
isLoading: true,
currentTheme: undefined,
};
}
async componentWillMount() {
await Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
});
ThemeManager.getInstance().setUpdateThemeCallback(this.updateTheme);
await ThemeManager.getInstance().getDataFromPreferences();
this.setState({
isLoading: false,
currentTheme: ThemeManager.getInstance().getCurrentTheme()
});
}
updateTheme() {
console.log('update theme called');
// Change not propagating, need to restart the app
// this.setState({
// currentTheme: ThemeManager.getInstance().getCurrentTheme()
// });
}
render() {
if (this.state.isLoading) {
return <View/>;
}
console.log('rendering');
// console.log(this.state.currentTheme.variables.containerBgColor);
return ( return (
<View style={styles.container}> <StyleProvider style={this.state.currentTheme}>
<Text>Open up App.js to start working on your app!</Text> <AppNavigator/>
</View> </StyleProvider>);
); }
} }
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

BIN
assets/amicale.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
assets/drawer-cover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
assets/icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/image-missing.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 732 B

BIN
assets/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 75 KiB

33
components/CustomHeader.js Normal file
View file

@ -0,0 +1,33 @@
import React from "react";
import {Body, Button, Header, Icon, Left, Right, Title} from "native-base";
import {StyleSheet} from "react-native";
import {getStatusBarHeight} from "react-native-status-bar-height";
export default class CustomHeader extends React.Component {
render() {
return (
<Header style={styles.header}>
<Left>
<Button
transparent
onPress={() => this.props.navigation.toggleDrawer()}
>
<Icon name="menu"/>
</Button>
</Left>
<Body>
<Title>{this.props.title}</Title>
</Body>
<Right/>
</Header>);
}
};
// Fix header in status bar on Android
const styles = StyleSheet.create({
header: {
paddingTop: getStatusBarHeight(),
height: 54 + getStatusBarHeight(),
},
});

146
components/SideMenu.js Normal file
View file

@ -0,0 +1,146 @@
import React from 'react';
import {Platform, Dimensions, ScrollView, StyleSheet, View, Image, FlatList} from 'react-native';
import {Drawer} from 'react-native-paper';
import {Badge, Text, Container, Content, Icon, Left, List, ListItem, Right} from "native-base";
import i18n from "i18n-js";
const deviceHeight = Dimensions.get("window").height;
const drawerCover = require("../assets/drawer-cover.png");
export default class SideBar extends React.Component {
constructor(props) {
super(props);
this.state = {
active: 'Home',
};
this.dataSet = [
{
name: i18n.t('screens.home'),
route: "Home",
icon: "home",
bg: "#C5F442"
// types: "11" // Shows the badge
},
{
name: i18n.t('screens.planning'),
route: "Planning",
icon: "calendar-range",
bg: "#477EEA",
// types: "11"
},
{
name: "Proxiwash",
route: "Proxiwash",
icon: "washing-machine",
bg: "#477EEA",
// types: "11"
},
{
name: "Proximo",
route: "Proximo",
icon: "shopping",
bg: "#477EEA",
// types: "11"
},
{
name: i18n.t('screens.settings'),
route: "Settings",
icon: "settings",
bg: "#477EEA",
// types: "11"
},
{
name: i18n.t('screens.about'),
route: "About",
icon: "information",
bg: "#477EEA",
// types: "11"
},
];
}
navigateToScreen = (route) => () => {
this.props.navigation.navigate(route);
this.props.navigation.closeDrawer();
this.setState({active: route});
};
render() {
return (
<Container>
<Content
bounces={false}
style={{ flex: 1, top: -1 }}
>
<Image source={drawerCover} style={styles.drawerCover} />
<FlatList
data={this.dataSet}
extraData={this.state}
keyExtractor={(item, index) => item.route}
renderItem={({item}) =>
<ListItem
button
noBorder={item.route !== 'Proximo'} // Display a separator before settings
selected={this.state.active === item.route}
onPress={
this.navigateToScreen(item.route)
}
>
<Left>
<Icon
active
name={item.icon}
type={'MaterialCommunityIcons'}
style={{ color: "#777", fontSize: 26, width: 30 }}
/>
<Text style={styles.text}>
{item.name}
</Text>
</Left>
{item.types &&
<Right style={{ flex: 1 }}>
<Badge
style={{
borderRadius: 3,
height: 25,
width: 72,
backgroundColor: item.bg
}}
>
<Text
style={styles.badgeText}
>{`${item.types} Types`}</Text>
</Badge>
</Right>}
</ListItem>}
/>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
drawerCover: {
alignSelf: "stretch",
height: deviceHeight / 4,
width: null,
position: "relative",
marginBottom: 10,
marginTop: 20
},
text: {
fontWeight: Platform.OS === "ios" ? "500" : "400",
fontSize: 16,
marginLeft: 20
},
badgeText: {
fontSize: Platform.OS === "ios" ? 13 : 11,
fontWeight: "400",
textAlign: "center",
marginTop: Platform.OS === "android" ? -3 : undefined
}
});

16
components/TabBarIcon.js Normal file
View file

@ -0,0 +1,16 @@
import React from 'react';
import {Ionicons} from '@expo/vector-icons/build/Icons';
export default class TabBarIcon extends React.Component {
render() {
return (
<Ionicons
name={this.props.name}
size={26}
style={{marginBottom: -3}}
color={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
}
}

38
native-base-theme/components/Badge.js Normal file
View file

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

13
native-base-theme/components/Body.js Normal file
View file

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

396
native-base-theme/components/Button.js Normal file
View file

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

37
native-base-theme/components/Card.js Normal file
View file

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

196
native-base-theme/components/CardItem.js Normal file
View file

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

38
native-base-theme/components/CheckBox.js Normal file
View file

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

16
native-base-theme/components/Container.js Normal file
View file

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

16
native-base-theme/components/Content.js Normal file
View file

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

29
native-base-theme/components/Fab.js Normal file
View file

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

118
native-base-theme/components/Footer.js Normal file
View file

@ -0,0 +1,118 @@
// @flow
import variable from "./../variables/platform";
export default (variables /*: * */ = variable) => {
const platformStyle = variables.platformStyle;
const platform = variables.platform;
const iconCommon = {
"NativeBase.Icon": {
color: variables.tabBarActiveTextColor
}
};
const iconNBCommon = {
"NativeBase.IconNB": {
color: variables.tabBarActiveTextColor
}
};
const textCommon = {
"NativeBase.Text": {
color: variables.tabBarActiveTextColor
}
};
const footerTheme = {
"NativeBase.Left": {
"NativeBase.Button": {
".transparent": {
backgroundColor: "transparent",
borderColor: null,
elevation: 0,
shadowColor: null,
shadowOffset: null,
shadowRadius: null,
shadowOpacity: null,
...iconCommon,
...iconNBCommon,
...textCommon
},
alignSelf: null,
...iconCommon,
...iconNBCommon,
// ...textCommon
},
flex: 1,
alignSelf: "center",
alignItems: "flex-start"
},
"NativeBase.Body": {
flex: 1,
alignItems: "center",
alignSelf: "center",
flexDirection: "row",
"NativeBase.Button": {
alignSelf: "center",
".transparent": {
backgroundColor: "transparent",
borderColor: null,
elevation: 0,
shadowColor: null,
shadowOffset: null,
shadowRadius: null,
shadowOpacity: null,
...iconCommon,
...iconNBCommon,
...textCommon
},
".full": {
height: variables.footerHeight,
paddingBottom: variables.footerPaddingBottom,
flex: 1
},
...iconCommon,
...iconNBCommon,
// ...textCommon
}
},
"NativeBase.Right": {
"NativeBase.Button": {
".transparent": {
backgroundColor: "transparent",
borderColor: null,
elevation: 0,
shadowColor: null,
shadowOffset: null,
shadowRadius: null,
shadowOpacity: null,
...iconCommon,
...iconNBCommon,
...textCommon
},
alignSelf: null,
...iconCommon,
...iconNBCommon,
// ...textCommon
},
flex: 1,
alignSelf: "center",
alignItems: "flex-end"
},
backgroundColor: variables.footerDefaultBg,
flexDirection: "row",
justifyContent: "center",
borderTopWidth:
platform === "ios" && platformStyle !== "material"
? variables.borderWidth
: undefined,
borderColor:
platform === "ios" && platformStyle !== "material"
? "#cbcbcb"
: undefined,
height: variables.footerHeight,
paddingBottom: variables.footerPaddingBottom,
elevation: 3,
left: 0,
right: 0
};
return footerTheme;
};

79
native-base-theme/components/FooterTab.js Normal file
View file

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

90
native-base-theme/components/Form.js Normal file
View file

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

13
native-base-theme/components/H1.js Normal file
View file

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

13
native-base-theme/components/H2.js Normal file
View file

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

13
native-base-theme/components/H3.js Normal file
View file

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

394
native-base-theme/components/Header.js Normal file
View file

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

12
native-base-theme/components/Icon.js Normal file
View file

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

19
native-base-theme/components/Input.js Normal file
View file

@ -0,0 +1,19 @@
// @flow
import variable from './../variables/platform';
export default (variables /*: * */ = variable) => {
const inputTheme = {
'.multiline': {
height: null,
},
height: variables.inputHeightBase,
color: variables.inputColor,
paddingLeft: 5,
paddingRight: 5,
flex: 1,
fontSize: variables.inputFontSize
};
return inputTheme;
};

132
native-base-theme/components/InputGroup.js Normal file
View file

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

240
native-base-theme/components/Item.js Normal file
View file

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

14
native-base-theme/components/Label.js Normal file
View file

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

13
native-base-theme/components/Left.js Normal file
View file

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

444
native-base-theme/components/ListItem.js Normal file
View file

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

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

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

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

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

16
native-base-theme/components/Picker.js Normal file
View file

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

28
native-base-theme/components/Radio.js Normal file
View file

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

16
native-base-theme/components/Right.js Normal file
View file

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

56
native-base-theme/components/Segment.js Normal file
View file

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

49
native-base-theme/components/Separator.js Normal file
View file

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

11
native-base-theme/components/Spinner.js Normal file
View file

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

18
native-base-theme/components/Subtitle.js Normal file
View file

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

48
native-base-theme/components/SwipeRow.js Normal file
View file

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

11
native-base-theme/components/Switch.js Normal file
View file

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

12
native-base-theme/components/Tab.js Normal file
View file

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

57
native-base-theme/components/TabBar.js Normal file
View file

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

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

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

39
native-base-theme/components/TabHeading.js Normal file
View file

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

17
native-base-theme/components/Text.js Normal file
View file

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

25
native-base-theme/components/Textarea.js Normal file
View file

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

42
native-base-theme/components/Thumbnail.js Normal file
View file

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

20
native-base-theme/components/Title.js Normal file
View file

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

40
native-base-theme/components/Toast.js Normal file
View file

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

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

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

242
native-base-theme/components/index.js Normal file
View file

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

283
native-base-theme/variables/commonColor.js Normal file
View file

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

283
native-base-theme/variables/material.js Normal file
View file

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

283
native-base-theme/variables/platform.js Normal file
View file

@ -0,0 +1,283 @@
// @flow
import color from "color";
import { Platform, Dimensions, PixelRatio } from "react-native";
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const platform = Platform.OS;
const platformStyle = undefined;
const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
export default {
platformStyle,
platform,
//Accordion
headerStyle: "#edebed",
iconStyle: "#000",
contentStyle: "#f5f4f5",
expandedIconStyle: "#000",
accordionBorderColor: "#d3d3d3",
// Android
androidRipple: true,
androidRippleColor: "rgba(256, 256, 256, 0.3)",
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
btnUppercaseAndroidText: true,
// Badge
badgeBg: "#ED1727",
badgeColor: "#fff",
badgePadding: platform === "ios" ? 3 : 0,
// Button
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
btnDisabledBg: "#b5b5b5",
buttonPadding: 6,
get btnPrimaryBg() {
return this.brandPrimary;
},
get btnPrimaryColor() {
return this.inverseTextColor;
},
get btnInfoBg() {
return this.brandInfo;
},
get btnInfoColor() {
return this.inverseTextColor;
},
get btnSuccessBg() {
return this.brandSuccess;
},
get btnSuccessColor() {
return this.inverseTextColor;
},
get btnDangerBg() {
return this.brandDanger;
},
get btnDangerColor() {
return this.inverseTextColor;
},
get btnWarningBg() {
return this.brandWarning;
},
get btnWarningColor() {
return this.inverseTextColor;
},
get btnTextSize() {
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
},
get btnTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get btnTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
return this.fontSizeBase * 3.8;
},
get iconSizeLarge() {
return this.iconFontSize * 1.5;
},
get iconSizeSmall() {
return this.iconFontSize * 0.6;
},
// Card
cardDefaultBg: "#fff",
cardBorderColor: "#ccc",
cardBorderRadius: 2,
cardItemPadding: platform === "ios" ? 10 : 12,
// CheckBox
CheckboxRadius: platform === "ios" ? 13 : 0,
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
CheckboxIconSize: platform === "ios" ? 21 : 16,
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
checkboxBgColor: "#039BE5",
checkboxSize: 20,
checkboxTickColor: "#fff",
// Color
brandPrimary: platform === "ios" ? "#e42612" : "#e42612",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
brandWarning: "#f0ad4e",
brandDark: "#000",
brandLight: "#f4f4f4",
//Container
containerBgColor: "#fff",
//Date Picker
datePickerTextColor: "#000",
datePickerBg: "transparent",
// Font
DefaultFontSize: 16,
fontFamily: platform === "ios" ? "System" : "Roboto",
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
},
get fontSizeH2() {
return this.fontSizeBase * 1.6;
},
get fontSizeH3() {
return this.fontSizeBase * 1.4;
},
// Footer
footerHeight: 55,
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
tabBarTextSize: platform === "ios" ? 14 : 11,
activeTab: platform === "ios" ? "#007aff" : "#fff",
sTabBarActiveTextColor: "#007aff",
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
// Header
toolbarBtnColor: platform === "ios" ? "#e42612" : "#fff",
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612",
toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#e42612" : "#fff",
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
get statusBarColor() {
return color(this.toolbarDefaultBg)
.darken(0.2)
.hex();
},
get darkenHeader() {
return color(this.tabBgColor)
.darken(0.03)
.hex();
},
// Icon
iconFamily: "Ionicons",
iconFontSize: platform === "ios" ? 30 : 28,
iconHeaderSize: platform === "ios" ? 33 : 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: "#D9D5DC",
inputSuccessBorderColor: "#2b8339",
inputErrorBorderColor: "#ed2f2f",
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return "#575757";
},
// Line Height
btnLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: platform === "ios" ? 20 : 24,
listItemSelected: platform === "ios" ? "#e42612" : "#e42612",
// List
listBg: "transparent",
listBorderColor: "#c9c9c9",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#DDD",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#808080",
listNoteSize: 13,
// Progress Bar
defaultProgressColor: "#E4202D",
inverseProgressColor: "#1A191B",
// Radio Button
radioBtnSize: platform === "ios" ? 25 : 23,
radioSelectedColorAndroid: "#3F51B5",
radioBtnLineHeight: platform === "ios" ? 29 : 24,
get radioColor() {
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
// Spinner
defaultSpinnerColor: "#45D56E",
inverseSpinnerColor: "#1A191B",
// Tab
tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612",
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
topTabBarActiveTextColor: platform === "ios" ? "#e42612" : "#fff",
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
topTabBarActiveBorderColor: platform === "ios" ? "#e42612" : "#fff",
// Tabs
tabBgColor: "#F8F8F8",
tabFontSize: 15,
// Text
textColor: "#000",
inverseTextColor: "#fff",
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
titleFontSize: platform === "ios" ? 17 : 19,
subTitleFontSize: platform === "ios" ? 11 : 14,
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
titleFontColor: platform === "ios" ? "#000" : "#FFF",
// Other
borderRadiusBase: platform === "ios" ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: "#414142",
inputLineHeight: 24,
deviceWidth,
deviceHeight,
isIphoneX,
inputGroupRoundedBorderRadius: 30,
//iPhoneX SafeArea
Inset: {
portrait: {
topInset: 24,
leftInset: 0,
rightInset: 0,
bottomInset: 34
},
landscape: {
topInset: 0,
leftInset: 44,
rightInset: 44,
bottomInset: 21
}
}
};

283
native-base-theme/variables/platformDark.js Normal file
View file

@ -0,0 +1,283 @@
// @flow
import color from "color";
import { Platform, Dimensions, PixelRatio } from "react-native";
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const platform = Platform.OS;
const platformStyle = undefined;
const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
export default {
platformStyle,
platform,
//Accordion
headerStyle: "#edebed",
iconStyle: "#000",
contentStyle: "#f5f4f5",
expandedIconStyle: "#000",
accordionBorderColor: "#d3d3d3",
// Android
androidRipple: true,
androidRippleColor: "rgba(256, 256, 256, 0.3)",
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
btnUppercaseAndroidText: true,
// Badge
badgeBg: "#ED1727",
badgeColor: "#fff",
badgePadding: platform === "ios" ? 3 : 0,
// Button
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
btnDisabledBg: "#b5b5b5",
buttonPadding: 6,
get btnPrimaryBg() {
return this.brandPrimary;
},
get btnPrimaryColor() {
return this.inverseTextColor;
},
get btnInfoBg() {
return this.brandInfo;
},
get btnInfoColor() {
return this.inverseTextColor;
},
get btnSuccessBg() {
return this.brandSuccess;
},
get btnSuccessColor() {
return this.inverseTextColor;
},
get btnDangerBg() {
return this.brandDanger;
},
get btnDangerColor() {
return this.inverseTextColor;
},
get btnWarningBg() {
return this.brandWarning;
},
get btnWarningColor() {
return this.inverseTextColor;
},
get btnTextSize() {
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
},
get btnTextSizeLarge() {
return this.fontSizeBase * 1.5;
},
get btnTextSizeSmall() {
return this.fontSizeBase * 0.8;
},
get borderRadiusLarge() {
return this.fontSizeBase * 3.8;
},
get iconSizeLarge() {
return this.iconFontSize * 1.5;
},
get iconSizeSmall() {
return this.iconFontSize * 0.6;
},
// Card
cardDefaultBg: "#2b2b2b",
cardBorderColor: "#ccc",
cardBorderRadius: 2,
cardItemPadding: platform === "ios" ? 10 : 12,
// CheckBox
CheckboxRadius: platform === "ios" ? 13 : 0,
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
CheckboxIconSize: platform === "ios" ? 21 : 16,
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
checkboxBgColor: "#039BE5",
checkboxSize: 20,
checkboxTickColor: "#fff",
// Color
brandPrimary: platform === "ios" ? "#e42612" : "#e42612",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
brandWarning: "#f0ad4e",
brandDark: "#000",
brandLight: "#f4f4f4",
//Container
containerBgColor: "#2b2b2b",
//Date Picker
datePickerTextColor: "#000",
datePickerBg: "transparent",
// Font
DefaultFontSize: 16,
fontFamily: platform === "ios" ? "System" : "Roboto",
fontSizeBase: 15,
get fontSizeH1() {
return this.fontSizeBase * 1.8;
},
get fontSizeH2() {
return this.fontSizeBase * 1.6;
},
get fontSizeH3() {
return this.fontSizeBase * 1.4;
},
// Footer
footerHeight: 55,
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
footerPaddingBottom: 0,
// FooterTab
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
tabBarTextSize: platform === "ios" ? 14 : 11,
activeTab: platform === "ios" ? "#007aff" : "#fff",
sTabBarActiveTextColor: "#007aff",
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
// Header
toolbarBtnColor: platform === "ios" ? "#e42612" : "#fff",
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612",
toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#e42612" : "#fff",
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
get statusBarColor() {
return color(this.toolbarDefaultBg)
.darken(0.2)
.hex();
},
get darkenHeader() {
return color(this.tabBgColor)
.darken(0.03)
.hex();
},
// Icon
iconFamily: "Ionicons",
iconFontSize: platform === "ios" ? 30 : 28,
iconHeaderSize: platform === "ios" ? 33 : 24,
// InputGroup
inputFontSize: 17,
inputBorderColor: "#D9D5DC",
inputSuccessBorderColor: "#2b8339",
inputErrorBorderColor: "#ed2f2f",
inputHeightBase: 50,
get inputColor() {
return this.textColor;
},
get inputColorPlaceholder() {
return "#575757";
},
// Line Height
btnLineHeight: 19,
lineHeightH1: 32,
lineHeightH2: 27,
lineHeightH3: 22,
lineHeight: platform === "ios" ? 20 : 24,
listItemSelected: platform === "ios" ? "#e42612" : "#e42612",
// List
listBg: "transparent",
listBorderColor: "#c9c9c9",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#DDD",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#808080",
listNoteSize: 13,
// Progress Bar
defaultProgressColor: "#E4202D",
inverseProgressColor: "#1A191B",
// Radio Button
radioBtnSize: platform === "ios" ? 25 : 23,
radioSelectedColorAndroid: "#3F51B5",
radioBtnLineHeight: platform === "ios" ? 29 : 24,
get radioColor() {
return this.brandPrimary;
},
// Segment
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
// Spinner
defaultSpinnerColor: "#45D56E",
inverseSpinnerColor: "#1A191B",
// Tab
tabDefaultBg: platform === "ios" ? "#2b2b2b" : "#e42612",
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
topTabBarActiveTextColor: platform === "ios" ? "#e42612" : "#fff",
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
topTabBarActiveBorderColor: platform === "ios" ? "#e42612" : "#fff",
// Tabs
tabBgColor: "#2b2b2b",
tabFontSize: 15,
// Text
textColor: "#fff",
inverseTextColor: "#000",
noteFontSize: 14,
get defaultTextColor() {
return this.textColor;
},
// Title
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
titleFontSize: platform === "ios" ? 17 : 19,
subTitleFontSize: platform === "ios" ? 11 : 14,
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
titleFontColor: platform === "ios" ? "#000" : "#FFF",
// Other
borderRadiusBase: platform === "ios" ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
contentPadding: 10,
dropdownLinkColor: "#414142",
inputLineHeight: 24,
deviceWidth,
deviceHeight,
isIphoneX,
inputGroupRoundedBorderRadius: 30,
//iPhoneX SafeArea
Inset: {
portrait: {
topInset: 24,
leftInset: 0,
rightInset: 0,
bottomInset: 34
},
landscape: {
topInset: 0,
leftInset: 44,
rightInset: 44,
bottomInset: 21
}
}
};

9
navigation/AppNavigator.js Normal file
View file

@ -0,0 +1,9 @@
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import MainDrawerNavigator from './MainDrawerNavigator';
export default createAppContainer(
createSwitchNavigator({
Main: MainDrawerNavigator,
})
);

24
navigation/MainDrawerNavigator.js Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
import {createDrawerNavigator} from 'react-navigation';
import HomeScreen from '../screens/HomeScreen';
import PlanningScreen from '../screens/PlanningScreen';
import ProxiwashScreen from '../screens/ProxiwashScreen';
import ProximoScreen from '../screens/ProximoScreen';
import SettingsScreen from '../screens/SettingsScreen';
import AboutScreen from '../screens/AboutScreen';
import SideMenu from "../components/SideMenu";
export default createDrawerNavigator({
Home: {screen: HomeScreen},
Planning: {screen: PlanningScreen,},
Proxiwash: {screen: ProxiwashScreen,},
Proximo: {screen: ProximoScreen,},
Settings: {screen: SettingsScreen,},
About: {screen: AboutScreen,},
}, {
contentComponent: SideMenu,
}
);

58
navigation/MainTabNavigator.js Normal file
View file

@ -0,0 +1,58 @@
import React from 'react';
import {Platform} from 'react-native';
import {createStackNavigator} from 'react-navigation';
import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs";
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import PlanningScreen from '../screens/PlanningScreen';
const HomeStack = createStackNavigator({
Home: HomeScreen,
});
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({focused}) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? 'ios-home'
: 'md-home'
}
/>
),
};
const ProfileStack = createStackNavigator({
Profile: PlanningScreen,
});
ProfileStack.navigationOptions = {
tabBarLabel: 'Profile',
tabBarIcon: ({focused}) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? 'ios-people'
: 'md-people'
}
/>
),
};
export default createMaterialBottomTabNavigator(
{
Home: HomeStack,
Profile: ProfileStack
}, {
initialRouteName: 'Home',
shifting: true,
activeColor: Colors.tabIconSelected,
inactiveColor: Colors.tabIconDefault,
barStyle: {backgroundColor: Colors.mainColor},
}
);

1362
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

15
package.json
View file

@ -8,11 +8,24 @@
"eject": "expo eject" "eject": "expo eject"
}, },
"dependencies": { "dependencies": {
"@expo/vector-icons": "latest",
"expo": "^33.0.0", "expo": "^33.0.0",
"expo-font": "^5.0.1",
"expo-localization": "^5.0.1",
"i18n-js": "^3.3.0",
"i18next": "latest",
"native-base": "latest",
"react": "16.8.3", "react": "16.8.3",
"react-dom": "^16.8.6", "react-dom": "^16.8.6",
"react-i18next": "latest",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz", "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-web": "^0.11.4" "react-native-paper": "latest",
"react-native-settings-page": "latest",
"react-native-status-bar-height": "latest",
"react-native-web": "^0.11.4",
"react-native-week-view": "latest",
"react-navigation": "latest",
"react-navigation-material-bottom-tabs": "latest"
}, },
"devDependencies": { "devDependencies": {
"babel-preset-expo": "^5.1.1" "babel-preset-expo": "^5.1.1"

226
screens/AboutScreen.js Normal file
View file

@ -0,0 +1,226 @@
import React from 'react';
import {Platform, StyleSheet, Linking, Alert} from 'react-native';
import {Container, Content, Text, Card, CardItem, Body, Icon, Left, Right, Thumbnail, H1} from 'native-base';
import CustomHeader from "../components/CustomHeader";
import i18n from "i18n-js";
const version = 'a0.0.1';
const links = {
appstore: 'https://qwant.com',
playstore: 'https://qwant.com',
gitlab: 'https://qwant.com',
bugs: 'https://qwant.com',
changelog: 'https://qwant.com',
license: 'https://qwant.com',
mail: "mailto:arnaud.vergnet@netc.fr?subject=Application Amicale INSA Toulouse&body=",
linkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
facebook: 'https://www.facebook.com/arnaud.vergnet',
react: 'https://facebook.github.io/react-native/',
};
export default class AboutScreen extends React.Component {
openWebLink(link) {
Linking.openURL(link).catch((err) => console.error('Error opening link', err));
}
render() {
const nav = this.props.navigation;
return (
<Container>
<CustomHeader navigation={nav} title={i18n.t('screens.about')}/>
<Content>
<Card>
<CardItem>
<Left>
<Thumbnail square source={require('../assets/amicale.png')}/>
<Body>
<H1>Amicale INSA Toulouse</H1>
<Text note>
v.{version}
</Text>
</Body>
</Left>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore)}>
<Left>
<Icon active name={Platform.OS === "ios" ? 'apple' : 'google-play'}
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>{Platform.OS === "ios" ? i18n.t('aboutScreen.appstore') : i18n.t('aboutScreen.playstore')}</Text>
</Left>
<Right>
<Icon name="arrow-forward"/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.gitlab)}>
<Left>
<Icon active name="git"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>Gitlab</Text>
</Left>
<Right>
<Icon name="arrow-forward"/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.bugs)}>
<Left>
<Icon active name="bug"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>{i18n.t('aboutScreen.bugs')}</Text>
</Left>
<Right>
<Icon name="arrow-forward"/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.changelog)}>
<Left>
<Icon active name="refresh"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
{i18n.t('aboutScreen.changelog')}
</Text>
</Left>
<Right>
<Icon name="arrow-forward"/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.license)}>
<Left>
<Icon active name="file-document"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
{i18n.t('aboutScreen.license')}
</Text>
</Left>
<Right>
<Icon name="arrow-forward"/>
</Right>
</CardItem>
</Card>
<Card>
<CardItem header>
<Text>{i18n.t('aboutScreen.author')}</Text>
</CardItem>
<CardItem button
onPress={() => Alert.alert('Coucou', 'Whaou')}>
<Left>
<Icon active name="account-circle"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>Arnaud VERGNET</Text>
</Left>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.mail)}>
<Left>
<Icon active name="email"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
{i18n.t('aboutScreen.mail')}
</Text>
</Left>
<Right>
<Icon name="arrow-forward"/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.linkedin)}>
<Left>
<Icon active name="linkedin"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
Linkedin
</Text>
</Left>
<Right>
<Icon name="arrow-forward"/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.facebook)}>
<Left>
<Icon active name="facebook"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
Facebook
</Text>
</Left>
<Right>
<Icon name="arrow-forward"/>
</Right>
</CardItem>
</Card>
<Card>
<CardItem header>
<Text>{i18n.t('aboutScreen.technologies')}</Text>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.react)}>
<Left>
<Icon active name="react"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
{i18n.t('aboutScreen.reactNative')}
</Text>
</Left>
<Right>
<Icon name="arrow-forward"/>
</Right>
</CardItem>
<CardItem button
onPress={() => console.log('libs')}>
<Left>
<Icon active name="developer-board"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
{i18n.t('aboutScreen.libs')}
</Text>
</Left>
<Right>
<Icon name="arrow-forward"/>
</Right>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

28
screens/HomeScreen.js Normal file
View file

@ -0,0 +1,28 @@
import React from 'react';
import {Container, Content, Text, Button, Icon} from 'native-base';
import CustomHeader from '../components/CustomHeader';
import i18n from "i18n-js";
import { Notifications } from 'expo';
export default class HomeScreen extends React.Component {
render() {
const nav = this.props.navigation;
return (
<Container>
<CustomHeader navigation={nav} title={i18n.t('screens.home')}/>
<Content>
<Button>
<Icon
active
name={'bell-ring'}
type={'MaterialCommunityIcons'}
/>
<Text>Notif</Text>
</Button>
</Content>
</Container>
);
}
}

24
screens/PlanningScreen.js Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
import { StyleSheet, View } from 'react-native';
import {Container, Text} from 'native-base';
import CustomHeader from "../components/CustomHeader";
import i18n from "i18n-js";
export default class PlanningScreen extends React.Component {
render() {
const nav = this.props.navigation;
return (
<Container>
<CustomHeader navigation={nav} title={i18n.t('screens.planning')}/>
</Container>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

113
screens/ProximoScreen.js Normal file
View file

@ -0,0 +1,113 @@
import React from 'react';
import {StyleSheet, View, Alert, ScrollView, RefreshControl, FlatList} from 'react-native';
import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Badge} from 'native-base';
import CustomHeader from "../components/CustomHeader";
const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/data.txt";
const IMG_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/img/";
const defaultImage = require('../assets/image-missing.png');
export default class ProximoScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
refreshing: false,
data: undefined
};
}
async readData() {
try {
let response = await fetch(
'https://etud.insa-toulouse.fr/~vergnet/appli-amicale/data.txt',
);
let responseText = await response.text();
let responseArray = responseText.split('\n');
let responseFinal = [];
for (let i = 0; i < responseArray.length; i++) {
if (responseArray[i] !== "") {
let itemArray = responseArray[i]
.replace('[', '')
.replace(']', '')
.split(',')[1]
.split(';');
let object = {
name: itemArray[0],
price: itemArray[1],
image: defaultImage
};
responseFinal.push(object);
}
}
this.setState({data: responseFinal});
} catch (error) {
console.error(error);
return undefined;
}
}
componentDidMount() {
this._onRefresh();
}
_onRefresh = () => {
this.setState({refreshing: true});
this.readData().then(() => {
this.setState({refreshing: false});
// console.log(this.state.data);
});
};
render() {
const nav = this.props.navigation;
return (
<Container>
<CustomHeader navigation={nav} title={'Proximo'}/>
<Content>
<FlatList
data={this.state.data}
extraData={this.state}
keyExtractor={(item, index) => item.name}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}
style={{minHeight: 300, width: '100%'}}
renderItem={({item}) =>
<ListItem
onPress={() => {
console.log(IMG_URL + item.name + '.jpg')
}}
>
<Left>
<Thumbnail square source={{ uri: IMG_URL + item.name + '.jpg' }} />
<Text style={{marginLeft: 20}}>
{item.name}
</Text>
</Left>
<Right style={{ flex: 1 }}>
<Text>
{item.price}€
</Text>
</Right>
</ListItem>}
/>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

24
screens/ProxiwashScreen.js Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Container, Text} from 'native-base';
import CustomHeader from "../components/CustomHeader";
export default class ProxiwashScreen extends React.Component {
render() {
const nav = this.props.navigation;
return (
<Container>
<CustomHeader navigation={nav} title={'Proxiwash'}/>
</Container>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

56
screens/SettingsScreen.js Normal file
View file

@ -0,0 +1,56 @@
import React from 'react';
import {Alert} from 'react-native'
import {Badge, Container, Content, Icon, Left, ListItem, Right, Text, List, CheckBox} from "native-base";
import CustomHeader from "../components/CustomHeader";
import ThemeManager from '../utils/ThemeManager';
import i18n from "i18n-js";
const nightModeKey = 'nightMode';
export default class SettingsScreen extends React.Component {
state = {
nightMode: ThemeManager.getInstance().getNightMode(),
};
toggleNightMode() {
this.setState({nightMode: !this.state.nightMode});
ThemeManager.getInstance().setNightmode(!this.state.nightMode);
Alert.alert(i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.restart'));
}
render() {
const nav = this.props.navigation;
return (
<Container>
<CustomHeader navigation={nav} title={i18n.t('screens.settings')}/>
<Content>
<List>
<ListItem
button
onPress={() => this.toggleNightMode()}
>
<Left>
<Icon
active
name={'theme-light-dark'}
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
{i18n.t('settingsScreen.nightMode')}
</Text>
</Left>
<Right style={{flex: 1}}>
<CheckBox checked={this.state.nightMode}
onPress={() => this.toggleNightMode()}/>
</Right>
</ListItem>
</List>
</Content>
</Container>
);
}
}

24
translations/en.json Normal file
View file

@ -0,0 +1,24 @@
{
"screens": {
"home": "Home",
"planning": "Planning",
"settings": "Settings",
"about": "About"
},
"settingsScreen": {
"nightMode": "Night Mode",
"restart": "Restart the app to apply changes"
},
"aboutScreen": {
"appstore": "See on the Appstore",
"playstore": "See on the Playstore",
"bugs": "Report Bugs",
"changelog": "Changelog",
"license": "License",
"author": "Author",
"mail": "Send an email",
"technologies": "Technologies",
"reactNative": "Made with React Native",
"libs": "Libraries used"
},
}

24
translations/fr.json Normal file
View file

@ -0,0 +1,24 @@
{
"screens": {
"home": "Accueil",
"planning": "Planning",
"settings": "Paramètres",
"about": "À Propos"
},
"settingsScreen": {
"nightMode": "Mode Nuit",
"restart": "Redémarrez l'application pour appliquer les changements"
},
"aboutScreen": {
"appstore": "Voir sur l'Appstore",
"playstore": "Voir sur le Playstore",
"bugs": "Rapporter des Bugs",
"changelog": "Historique des modifications",
"license": "Licence",
"author": "Auteur",
"mail": "Envoyer un mail",
"technologies": "Technologies",
"reactNative": "Créé avec React Native",
"libs": "Librairies utilisées"
}
}

23
utils/LocaleManager.js Normal file
View file

@ -0,0 +1,23 @@
import i18n from 'i18n-js';
import * as Localization from 'expo-localization';
import en from '../translations/en';
import fr from '../translations/fr';
export default class LocaleManager {
static instance = null;
static getInstance() {
if (LocaleManager.instance == null) {
LocaleManager.instance = new LocaleManager();
}
return this.instance;
}
initTranslations() {
i18n.fallbacks = true;
i18n.translations = {fr, en};
i18n.locale = Localization.locale;
}
}

57
utils/ThemeManager.js Normal file
View file

@ -0,0 +1,57 @@
import {DefaultTheme} from 'react-native-paper';
import {AsyncStorage} from 'react-native'
import platform from '../native-base-theme/variables/platform';
import platformDark from '../native-base-theme/variables/platformDark';
import getTheme from '../native-base-theme/components';
const nightModeKey = 'nightMode';
export default class ThemeManager {
static instance = null;
constructor() {
this.nightMode = false;
this.updateThemeCallback = undefined;
}
static getInstance() {
if (ThemeManager.instance == null) {
ThemeManager.instance = new ThemeManager();
}
return this.instance;
}
setUpdateThemeCallback(callback) {
this.updateThemeCallback = callback;
console.log(this.updateThemeCallback);
}
async getDataFromPreferences() {
let result = await AsyncStorage.getItem(nightModeKey);
if (result === '1')
this.nightMode = true;
console.log('nightmode: ' + this.nightMode);
}
setNightmode(isNightMode) {
this.nightMode = isNightMode;
AsyncStorage.setItem(nightModeKey, isNightMode ? '1' : '0');
if (this.updateThemeCallback !== undefined)
this.updateThemeCallback();
}
getNightMode() {
return this.nightMode;
}
getCurrentTheme() {
if (this.nightMode)
return getTheme(platformDark);
else
return getTheme(platform);
}
};