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

Use expo material icons instead of custom class

Browse source
This commit is contained in:
keplyx 2020-03-05 21:48:37 +01:00
parent b562357a95
commit cec72be88c
21 changed files with 186 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
App.js
View file

@ -9,12 +9,11 @@ import {clearThemeCache} from 'native-base-shoutem-theme';
import AsyncStorageManager from "./utils/AsyncStorageManager"; import AsyncStorageManager from "./utils/AsyncStorageManager";
import CustomIntroSlider from "./components/CustomIntroSlider"; import CustomIntroSlider from "./components/CustomIntroSlider";
import {SplashScreen} from 'expo'; import {SplashScreen} from 'expo';
import NotificationsManager from "./utils/NotificationsManager";
import ThemeManager from './utils/ThemeManager'; import ThemeManager from './utils/ThemeManager';
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
import DrawerNavigator from './navigation/DrawerNavigator'; import DrawerNavigator from './navigation/DrawerNavigator';
import { enableScreens } from 'react-native-screens'; import NotificationsManager from "./utils/NotificationsManager";
type Props = {}; type Props = {};
@ -36,10 +35,12 @@ export default class App extends React.Component<Props, State> {
currentTheme: null, currentTheme: null,
}; };
constructor(props: Object) { onIntroDone: Function;
super(props);
constructor() {
super();
LocaleManager.initTranslations(); LocaleManager.initTranslations();
enableScreens(); this.onIntroDone = this.onIntroDone.bind(this);
} }
/** /**
@ -81,23 +82,21 @@ export default class App extends React.Component<Props, State> {
async loadAssetsAsync() { async loadAssetsAsync() {
// Wait for custom fonts to be loaded before showing the app // Wait for custom fonts to be loaded before showing the app
console.log("loading Fonts"); // console.log("loading Fonts");
SplashScreen.preventAutoHide(); SplashScreen.preventAutoHide();
await Font.loadAsync({ await Font.loadAsync({
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'), 'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
}); });
console.log("loading preferences"); // console.log("loading preferences");
await AsyncStorageManager.getInstance().loadPreferences(); await AsyncStorageManager.getInstance().loadPreferences();
ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme()); ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
console.log("loading Expo token"); // console.log("loading Expo token");
await NotificationsManager.initExpoToken(); await NotificationsManager.initExpoToken();
console.log("loaded");
this.onLoadFinished(); this.onLoadFinished();
} }
onLoadFinished() { onLoadFinished() {
// console.log("finished");
console.log("finished");
// Only show intro if this is the first time starting the app // Only show intro if this is the first time starting the app
this.setState({ this.setState({
isLoading: false, isLoading: false,

7
components/BaseContainer.js
View file

@ -3,7 +3,7 @@
import * as React from 'react'; import * as React from 'react';
import {Container} from "native-base"; import {Container} from "native-base";
import CustomHeader from "./CustomHeader"; import CustomHeader from "./CustomHeader";
import CustomMaterialIcon from "./CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import {Platform, View} from "react-native"; import {Platform, View} from "react-native";
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import Touchable from "react-native-platform-touchable"; import Touchable from "react-native-platform-touchable";
@ -66,9 +66,10 @@ export default class BaseContainer extends React.Component<Props, State> {
<Touchable <Touchable
style={{padding: 6}} style={{padding: 6}}
onPress={this.onDrawerPress}> onPress={this.onDrawerPress}>
<CustomMaterialIcon <MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="menu"/> size={26}
name="menu"/>
</Touchable> </Touchable>
} }
rightButton={this.props.headerRightButton} rightButton={this.props.headerRightButton}

12
components/CustomHeader.js
View file

@ -6,7 +6,7 @@ import {Platform, StyleSheet, View} from "react-native";
import {getStatusBarHeight} from "react-native-status-bar-height"; import {getStatusBarHeight} from "react-native-status-bar-height";
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import CustomMaterialIcon from "./CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import i18n from "i18n-js"; import i18n from "i18n-js";
type Props = { type Props = {
@ -76,8 +76,9 @@ export default class CustomHeader extends React.Component<Props> {
width: '100%', width: '100%',
marginBottom: 7 marginBottom: 7
}}> }}>
<CustomMaterialIcon <MaterialCommunityIcons
icon={'magnify'} name={'magnify'}
size={26}
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/> color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
<Input <Input
ref="searchInput" ref="searchInput"
@ -116,9 +117,10 @@ export default class CustomHeader extends React.Component<Props> {
<Touchable <Touchable
style={{padding: 6}} style={{padding: 6}}
onPress={this.onPressBack}> onPress={this.onPressBack}>
<CustomMaterialIcon <MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={Platform.OS === 'ios' ? 'chevron-left' : "arrow-left"}/> name={Platform.OS === 'ios' ? 'chevron-left' : "arrow-left"}
size={26}/>
</Touchable>; </Touchable>;
else else
button = this.props.leftButton; button = this.props.leftButton;

7
components/CustomIntroSlider.js
View file

@ -3,7 +3,7 @@
import * as React from 'react'; import * as React from 'react';
import {LinearGradient} from "expo-linear-gradient"; import {LinearGradient} from "expo-linear-gradient";
import {Image, StyleSheet, View} from "react-native"; import {Image, StyleSheet, View} from "react-native";
import CustomMaterialIcon from "./CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import {Text} from "native-base"; import {Text} from "native-base";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import AppIntroSlider from "react-native-app-intro-slider"; import AppIntroSlider from "react-native-app-intro-slider";
@ -131,7 +131,10 @@ export default class CustomIntroSlider extends React.Component<Props> {
> >
{item.image !== undefined ? {item.image !== undefined ?
<Image source={item.image} style={styles.image}/> <Image source={item.image} style={styles.image}/>
: <CustomMaterialIcon icon={item.icon} color={'#fff'} fontSize={200} width={200}/>} : <MaterialCommunityIcons
name={item.icon}
color={'#fff'}
size={200}/>}
<View style={{marginTop: 20}}> <View style={{marginTop: 20}}>
<Text style={styles.title}>{item.title}</Text> <Text style={styles.title}>{item.title}</Text>
<Text style={styles.text}>{item.text}</Text> <Text style={styles.text}>{item.text}</Text>

61
components/CustomMaterialIcon.js
View file

@ -1,61 +0,0 @@
// @flow
import * as React from 'react';
import {Icon} from "native-base";
import ThemeManager from '../utils/ThemeManager';
type Props = {
active: boolean,
icon: string,
color: ?string,
fontSize: number,
width: number | string,
}
/**
* Custom component defining a material icon using native base
*
* @prop active {boolean} Whether to set the icon color to active
* @prop icon {string} The icon string to use from MaterialCommunityIcons
* @prop color {string} The icon color. Use default theme color if unspecified
* @prop fontSize {number} The icon size. Use 26 if unspecified
* @prop width {number} The icon width. Use 30 if unspecified
*/
export default class CustomMaterialIcon extends React.Component<Props> {
static defaultProps = {
active: false,
color: undefined,
fontSize: 26,
width: 30,
};
shouldComponentUpdate(nextProps: Props): boolean {
return nextProps.icon !== this.props.icon ||
nextProps.active !== this.props.active ||
nextProps.width !== this.props.width ||
nextProps.fontSize !== this.props.fontSize ||
nextProps.color !== this.props.color;
}
render() {
// console.log("rendering icon " + this.props.icon);
return (
<Icon
active
name={this.props.icon}
type={'MaterialCommunityIcons'}
style={{
color:
this.props.color !== undefined ?
this.props.color :
this.props.active ?
ThemeManager.getCurrentThemeVariables().brandPrimary :
ThemeManager.getCurrentThemeVariables().customMaterialIconColor,
fontSize: this.props.fontSize,
width: this.props.width
}}
/>
);
}
}

13
components/DashboardItem.js
View file

@ -2,7 +2,7 @@
import * as React from 'react'; import * as React from 'react';
import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base"; import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base";
import CustomMaterialIcon from "./CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import {View} from "react-native"; import {View} from "react-native";
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import HTML from "react-native-render-html"; import HTML from "react-native-render-html";
@ -132,7 +132,9 @@ export default class DashboardItem extends React.Component<Props> {
}}> }}>
{i18n.t("homeScreen.dashboard.seeMore")} {i18n.t("homeScreen.dashboard.seeMore")}
</Text> </Text>
<CustomMaterialIcon icon={'chevron-right'}/> <MaterialCommunityIcons
name={'chevron-right'}
size={26}/>
</View> </View>
</LinearGradient> </LinearGradient>
</Body> </Body>
@ -145,15 +147,14 @@ export default class DashboardItem extends React.Component<Props> {
getIcon() { getIcon() {
return ( return (
<CustomMaterialIcon <MaterialCommunityIcons
icon={this.props.icon} name={this.props.icon}
color={ color={
this.props.isAvailable ? this.props.isAvailable ?
this.props.color : this.props.color :
ThemeManager.getCurrentThemeVariables().textDisabledColor ThemeManager.getCurrentThemeVariables().textDisabledColor
} }
fontSize={this.props.isSquare ? 50 : 40} size={this.props.isSquare ? 50 : 40}/>
width={this.props.isSquare ? 50 : 40}/>
); );
} }

36
components/Sidebar.js
View file

@ -1,17 +1,15 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Dimensions, FlatList, Image, Linking, Platform, StyleSheet} from 'react-native'; import {Dimensions, FlatList, Image,Platform, StyleSheet} from 'react-native';
import {Badge, Container, Left, ListItem, Right, Text} from "native-base"; import {Container, Left, ListItem, Text} from "native-base";
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomMaterialIcon from '../components/CustomMaterialIcon'; import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import * as WebBrowser from 'expo-web-browser'; import * as WebBrowser from 'expo-web-browser';
const deviceWidth = Dimensions.get("window").width; const deviceWidth = Dimensions.get("window").width;
const drawerCover = require("../assets/drawer-cover.png");
type Props = { type Props = {
navigation: Object, navigation: Object,
}; };
@ -134,7 +132,7 @@ export default class SideBar extends React.Component<Props, State> {
getRenderItem({item}: Object) { getRenderItem({item}: Object) {
const onListItemPress = this.onListItemPress.bind(this, item); const onListItemPress = this.onListItemPress.bind(this, item);
// return <View/>;
if (item.icon !== undefined) { if (item.icon !== undefined) {
return ( return (
<ListItem <ListItem
@ -144,29 +142,15 @@ export default class SideBar extends React.Component<Props, State> {
onPress={onListItemPress} onPress={onListItemPress}
> >
<Left> <Left>
<CustomMaterialIcon <MaterialCommunityIcons
icon={item.icon} name={item.icon}
active={this.state.active === item.route} size={26}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
/> />
<Text style={styles.text}> <Text style={styles.text}>
{item.name} {item.name}
</Text> </Text>
</Left> </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> </ListItem>
); );
} else { } else {
@ -180,12 +164,12 @@ export default class SideBar extends React.Component<Props, State> {
} }
render() { render() {
// console.log("rendering SideBar"); console.log("rendering SideBar");
return ( return (
<Container style={{ <Container style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor, backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
}}> }}>
<Image source={drawerCover} style={styles.drawerCover}/> <Image source={require("../assets/drawer-cover.png")} style={styles.drawerCover}/>
<FlatList <FlatList
data={this.dataSet} data={this.dataSet}
extraData={this.state} extraData={this.state}

9
components/WebSectionList.js
View file

@ -4,7 +4,7 @@ import * as React from 'react';
import {H3, Spinner, View} from "native-base"; import {H3, Spinner, View} from "native-base";
import ThemeManager from '../utils/ThemeManager'; import ThemeManager from '../utils/ThemeManager';
import WebDataManager from "../utils/WebDataManager"; import WebDataManager from "../utils/WebDataManager";
import CustomMaterialIcon from "./CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import i18n from "i18n-js"; import i18n from "i18n-js";
import {RefreshControl, SectionList} from "react-native"; import {RefreshControl, SectionList} from "react-native";
@ -150,10 +150,9 @@ export default class WebSectionList extends React.Component<Props, State> {
{this.state.refreshing ? {this.state.refreshing ?
<Spinner/> <Spinner/>
: :
<CustomMaterialIcon <MaterialCommunityIcons
icon={item.icon} name={item.icon}
fontSize={100} size={100}
width={100}
color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>} color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>}
</View> </View>

13
components/WebViewScreen.js
View file

@ -5,7 +5,7 @@ import {Linking, Platform, View} from 'react-native';
import {Body, Footer, Left, Right, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base'; import {Body, Footer, Left, Right, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base';
import WebView from "react-native-webview"; import WebView from "react-native-webview";
import Touchable from "react-native-platform-touchable"; import Touchable from "react-native-platform-touchable";
import CustomMaterialIcon from "../components/CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import BaseContainer from "../components/BaseContainer"; import BaseContainer from "../components/BaseContainer";
@ -59,9 +59,10 @@ export default class WebViewScreen extends React.Component<Props> {
<Touchable <Touchable
style={{padding: 6}} style={{padding: 6}}
onPress={clickAction}> onPress={clickAction}>
<CustomMaterialIcon <MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={icon}/> name={icon}
size={26}/>
</Touchable> </Touchable>
); );
} }
@ -144,10 +145,10 @@ export default class WebViewScreen extends React.Component<Props> {
tabbedView.push( tabbedView.push(
<Tab heading={ <Tab heading={
<TabHeading> <TabHeading>
<CustomMaterialIcon <MaterialCommunityIcons
icon={this.props.data[i]['icon']} name={this.props.data[i]['icon']}
color={ThemeManager.getCurrentThemeVariables().tabIconColor} color={ThemeManager.getCurrentThemeVariables().tabIconColor}
fontSize={20} size={20}
/> />
<Text>{this.props.data[i]['name']}</Text> <Text>{this.props.data[i]['name']}</Text>
</TabHeading>} </TabHeading>}

64
navigation/DrawerNavigator.js
View file

@ -11,6 +11,7 @@ import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
import DebugScreen from '../screens/DebugScreen'; import DebugScreen from '../screens/DebugScreen';
import Sidebar from "../components/Sidebar"; import Sidebar from "../components/Sidebar";
import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
import PerfHomeScreen from '../screens/PerfHomeScreen';
const AboutStack = createStackNavigator(); const AboutStack = createStackNavigator();
@ -84,47 +85,24 @@ export default function DrawerNavigator() {
</Drawer.Navigator> </Drawer.Navigator>
); );
} }
//
// // Create a stack to use animations
// function createDrawerStackWithInitialRoute(initialRoute: string) {
// return createStackNavigator({
// Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute),
// SettingsScreen: {screen: SettingsScreen},
// AboutScreen: AboutStack,
// SelfMenuScreen: {screen: SelfMenuScreen},
// TutorInsaScreen: {screen: TutorInsaScreen},
// AmicaleScreen: {screen: AmicaleScreen},
// WiketudScreen: {screen: WiketudScreen},
// ElusEtudScreen: {screen: ElusEtudScreen},
// BlueMindScreen: {screen: BlueMindScreen},
// EntScreen: {screen: EntScreen},
// AvailableRoomScreen: {screen: AvailableRoomScreen},
// },
// {
// initialRouteName: "Main",
// mode: 'card',
// headerMode: "none",
// defaultNavigationOptions: {
// gestureEnabled: true,
// cardOverlayEnabled: true,
// ...TransitionPresets.SlideFromRightIOS,
// },
// });
// }
// /** const basicStack = createStackNavigator();
// * Creates the drawer navigation stack
// */ function DrawerNavigator1() {
// function createDrawerNavigatorWithInitialRoute(initialRoute: string) { return (
// return createDrawerNavigator({ <basicStack.Navigator
// Main: createDrawerStackWithInitialRoute(initialRoute), initialRouteName={'Main'}
// }, { mode='card'
// contentComponent: Sidebar, screenOptions={{
// initialRouteName: 'Main', gestureEnabled: true,
// backBehavior: 'initialRoute', cardOverlayEnabled: true,
// drawerType: 'front', ...TransitionPresets.SlideFromRightIOS,
// useNativeAnimations: true, }}
// }); >
// } <basicStack.Screen
// name="Main"
// export {createDrawerNavigatorWithInitialRoute}; component={TabNavigator}
/>
</basicStack.Navigator>
);
}

13
navigation/MainTabNavigator.js
View file

@ -3,6 +3,7 @@ import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs"; import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs";
import HomeScreen from '../screens/HomeScreen'; import HomeScreen from '../screens/HomeScreen';
import PerfHomeScreen from '../screens/PerfHomeScreen';
import PlanningScreen from '../screens/PlanningScreen'; import PlanningScreen from '../screens/PlanningScreen';
import PlanningDisplayScreen from '../screens/PlanningDisplayScreen'; import PlanningDisplayScreen from '../screens/PlanningDisplayScreen';
import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen'; import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
@ -11,12 +12,8 @@ import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen';
import ProximoListScreen from "../screens/Proximo/ProximoListScreen"; import ProximoListScreen from "../screens/Proximo/ProximoListScreen";
import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen"; import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
import PlanexScreen from '../screens/Websites/PlanexScreen'; import PlanexScreen from '../screens/Websites/PlanexScreen';
import CustomMaterialIcon from "../components/CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import AboutScreen from "../screens/About/AboutScreen";
import AboutDependenciesScreen from "../screens/About/AboutDependenciesScreen";
import DebugScreen from "../screens/DebugScreen";
import SettingsScreen from "../screens/SettingsScreen";
import AsyncStorageManager from "../utils/AsyncStorageManager"; import AsyncStorageManager from "../utils/AsyncStorageManager";
const TAB_ICONS = { const TAB_ICONS = {
@ -145,12 +142,12 @@ export default function TabNavigator() {
<Tab.Navigator <Tab.Navigator
initialRouteName={AsyncStorageManager.getInstance().preferences.defaultStartScreen.current} initialRouteName={AsyncStorageManager.getInstance().preferences.defaultStartScreen.current}
barStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary}} barStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary}}
screenOptions={({ route }) => ({ screenOptions={({route}) => ({
tabBarIcon: ({ focused, color, size }) => { tabBarIcon: ({focused, color, size}) => {
let icon = TAB_ICONS[route.name]; let icon = TAB_ICONS[route.name];
// tintColor is ignoring activeColor and inactiveColor for some reason // tintColor is ignoring activeColor and inactiveColor for some reason
color = focused ? "#f0edf6" : "#4e1108"; color = focused ? "#f0edf6" : "#4e1108";
return <CustomMaterialIcon icon={icon} color={color}/>; return <MaterialCommunityIcons name={icon} color={color} size={26}/>;
}, },
})} })}
> >

1
package.json
View file

@ -8,6 +8,7 @@
"eject": "expo eject" "eject": "expo eject"
}, },
"dependencies": { "dependencies": {
"@expo/vector-icons": "~10.0.0",
"@react-native-community/masked-view": "0.1.5", "@react-native-community/masked-view": "0.1.5",
"@react-navigation/bottom-tabs": "^5.1.1", "@react-navigation/bottom-tabs": "^5.1.1",
"@react-navigation/drawer": "^5.1.1", "@react-navigation/drawer": "^5.1.1",

32
screens/About/AboutScreen.js
View file

@ -7,7 +7,7 @@ import CustomHeader from "../../components/CustomHeader";
import i18n from "i18n-js"; import i18n from "i18n-js";
import appJson from '../../app'; import appJson from '../../app';
import packageJson from '../../package'; import packageJson from '../../package';
import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import AsyncStorageManager from "../../utils/AsyncStorageManager"; import AsyncStorageManager from "../../utils/AsyncStorageManager";
import {Modalize} from "react-native-modalize"; import {Modalize} from "react-native-modalize";
import ThemeManager from "../../utils/ThemeManager"; import ThemeManager from "../../utils/ThemeManager";
@ -227,11 +227,10 @@ export default class AboutScreen extends React.Component<Props, State> {
<Card> <Card>
<CardItem> <CardItem>
<Left> <Left>
<CustomMaterialIcon <MaterialCommunityIcons
icon={'account-multiple'} name='account-multiple'
fontSize={40} size={40}
width={40} color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
color={ThemeManager.getCurrentThemeVariables().brandPrimary}/>
<Body> <Body>
<H1>{i18n.t('aboutScreen.team')}</H1> <H1>{i18n.t('aboutScreen.team')}</H1>
</Body> </Body>
@ -290,13 +289,18 @@ export default class AboutScreen extends React.Component<Props, State> {
<CardItem button <CardItem button
onPress={item.onPressCallback}> onPress={item.onPressCallback}>
<Left> <Left>
<CustomMaterialIcon icon={item.icon}/> <MaterialCommunityIcons
name={item.icon}
size={26}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
<Text>{item.text}</Text> <Text>{item.text}</Text>
</Left> </Left>
{item.showChevron ? {item.showChevron ?
<Right> <Right>
<CustomMaterialIcon icon="chevron-right" <MaterialCommunityIcons
fontSize={20}/> name={'chevron-right'}
size={26}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
</Right> </Right>
: :
<Right/> <Right/>
@ -344,8 +348,9 @@ export default class AboutScreen extends React.Component<Props, State> {
marginRight: 'auto', marginRight: 'auto',
}} }}
onPress={onPressMail}> onPress={onPressMail}>
<CustomMaterialIcon <MaterialCommunityIcons
icon={'email'} name={'email'}
size={26}
color={'#fff'}/> color={'#fff'}/>
<Text>{i18n.t('aboutScreen.bugsMail')}</Text> <Text>{i18n.t('aboutScreen.bugsMail')}</Text>
</Button> </Button>
@ -356,8 +361,9 @@ export default class AboutScreen extends React.Component<Props, State> {
marginRight: 'auto', marginRight: 'auto',
}} }}
onPress={onPressGit}> onPress={onPressGit}>
<CustomMaterialIcon <MaterialCommunityIcons
icon={'git'} name={'git'}
size={26}
color={'#fff'}/> color={'#fff'}/>
<Text>{i18n.t('aboutScreen.bugsGit')}</Text> <Text>{i18n.t('aboutScreen.bugsGit')}</Text>
</Button> </Button>

4
screens/DebugScreen.js
View file

@ -23,7 +23,7 @@ import {
import CustomHeader from "../components/CustomHeader"; import CustomHeader from "../components/CustomHeader";
import ThemeManager from '../utils/ThemeManager'; import ThemeManager from '../utils/ThemeManager';
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomMaterialIcon from "../components/CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import {Alert, Clipboard, View} from "react-native"; import {Alert, Clipboard, View} from "react-native";
import AsyncStorageManager from "../utils/AsyncStorageManager"; import AsyncStorageManager from "../utils/AsyncStorageManager";
import NotificationsManager from "../utils/NotificationsManager"; import NotificationsManager from "../utils/NotificationsManager";
@ -64,7 +64,7 @@ export default class DebugScreen extends React.Component<Props, State> {
> >
{icon !== undefined ? {icon !== undefined ?
<Left> <Left>
<CustomMaterialIcon icon={icon}/> <MaterialCommunityIcons name={icon} size={26}/>
</Left> </Left>
: <View/> : <View/>
} }

8
screens/HomeScreen.js
View file

@ -4,7 +4,7 @@ import * as React from 'react';
import {Image, TouchableOpacity, View} from 'react-native'; import {Image, TouchableOpacity, View} from 'react-native';
import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base'; import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base';
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomMaterialIcon from '../components/CustomMaterialIcon'; import {MaterialCommunityIcons} from "@expo/vector-icons";
import Autolink from 'react-native-autolink'; import Autolink from 'react-native-autolink';
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import DashboardItem from "../components/DashboardItem"; import DashboardItem from "../components/DashboardItem";
@ -551,10 +551,10 @@ export default class HomeScreen extends React.Component<Props> {
<Left> <Left>
<Button transparent <Button transparent
onPress={onOutLinkPress}> onPress={onOutLinkPress}>
<CustomMaterialIcon <MaterialCommunityIcons
icon="facebook" name="facebook"
color="#57aeff" color="#57aeff"
width={20}/> size={26}/>
<Text>En savoir plus</Text> <Text>En savoir plus</Text>
</Button> </Button>
</Left> </Left>

10
screens/Proximo/ProximoAboutScreen.js
View file

@ -5,7 +5,7 @@ import {Image, View} from 'react-native';
import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base'; import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base';
import CustomHeader from "../../components/CustomHeader"; import CustomHeader from "../../components/CustomHeader";
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -39,7 +39,9 @@ export default class ProximoAboutScreen extends React.Component<Props> {
<Card> <Card>
<CardItem> <CardItem>
<Left> <Left>
<CustomMaterialIcon icon={'clock-outline'}/> <MaterialCommunityIcons
name={'clock-outline'}
size={30}/>
<H2>{i18n.t('proximoScreen.openingHours')}</H2> <H2>{i18n.t('proximoScreen.openingHours')}</H2>
</Left> </Left>
</CardItem> </CardItem>
@ -50,7 +52,9 @@ export default class ProximoAboutScreen extends React.Component<Props> {
<Card> <Card>
<CardItem> <CardItem>
<Left> <Left>
<CustomMaterialIcon icon={'cash'}/> <MaterialCommunityIcons
name={'cash'}
size={30}/>
<H2>{i18n.t('proximoScreen.paymentMethods')}</H2> <H2>{i18n.t('proximoScreen.paymentMethods')}</H2>
</Left> </Left>
</CardItem> </CardItem>

19
screens/Proximo/ProximoListScreen.js
View file

@ -7,7 +7,7 @@ import {FlatList, Image, Platform, View} from "react-native";
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import Menu, {MenuItem} from 'react-native-material-menu'; import Menu, {MenuItem} from 'react-native-material-menu';
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../../utils/ThemeManager"; import ThemeManager from "../../utils/ThemeManager";
import {Modalize} from 'react-native-modalize'; import {Modalize} from 'react-native-modalize';
@ -182,11 +182,15 @@ export default class ProximoListScreen extends React.Component<Props, State> {
*/ */
setupSortIcons(mode: string, isReverse: boolean) { setupSortIcons(mode: string, isReverse: boolean) {
const downSortIcon = const downSortIcon =
<CustomMaterialIcon <MaterialCommunityIcons
icon={'sort-descending'}/>; name={'sort-descending'}
color={'#000'}
size={26}/>;
const upSortIcon = const upSortIcon =
<CustomMaterialIcon <MaterialCommunityIcons
icon={'sort-ascending'}/>; name={'sort-ascending'}
color={'#000'}
size={26}/>;
switch (mode) { switch (mode) {
case sortMode.price: case sortMode.price:
this.setState({sortNameIcon: ''}); this.setState({sortNameIcon: ''});
@ -297,9 +301,10 @@ export default class ProximoListScreen extends React.Component<Props, State> {
<Touchable <Touchable
style={{padding: 6}} style={{padding: 6}}
onPress={this.onSortMenuPress}> onPress={this.onSortMenuPress}>
<CustomMaterialIcon <MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={'sort'}/> name={'sort'}
size={26}/>
</Touchable> </Touchable>
} }
> >

27
screens/Proximo/ProximoMainScreen.js
View file

@ -4,7 +4,7 @@ import * as React from 'react';
import {Platform, View} from 'react-native' import {Platform, View} from 'react-native'
import {Body, Left, ListItem, Right, Text} from 'native-base'; import {Body, Left, ListItem, Right, Text} from 'native-base';
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../../utils/ThemeManager"; import ThemeManager from "../../utils/ThemeManager";
import Touchable from "react-native-platform-touchable"; import Touchable from "react-native-platform-touchable";
import BaseContainer from "../../components/BaseContainer"; import BaseContainer from "../../components/BaseContainer";
@ -155,16 +155,18 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
<Touchable <Touchable
style={{padding: 6}} style={{padding: 6}}
onPress={this.onPressSearchBtn}> onPress={this.onPressSearchBtn}>
<CustomMaterialIcon <MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} name="magnify"
icon="magnify"/> size={26}
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
</Touchable> </Touchable>
<Touchable <Touchable
style={{padding: 6}} style={{padding: 6}}
onPress={this.onPressAboutBtn}> onPress={this.onPressAboutBtn}>
<CustomMaterialIcon <MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} name="information"
icon="information"/> size={26}
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
</Touchable> </Touchable>
</View> </View>
); );
@ -184,9 +186,9 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
onPress={onPress} onPress={onPress}
> >
<Left> <Left>
<CustomMaterialIcon <MaterialCommunityIcons
icon={item.type.icon} name={item.type.icon}
fontSize={30} size={30}
color={ThemeManager.getCurrentThemeVariables().brandPrimary} color={ThemeManager.getCurrentThemeVariables().brandPrimary}
/> />
</Left> </Left>
@ -199,7 +201,10 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
</Text> </Text>
</Body> </Body>
<Right> <Right>
<CustomMaterialIcon icon="chevron-right"/> <MaterialCommunityIcons
icon="chevron-right"
size={26}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
</Right> </Right>
</ListItem> </ListItem>
); );

30
screens/Proxiwash/ProxiwashAboutScreen.js
View file

@ -5,7 +5,7 @@ import {Image, View} from 'react-native';
import {Body, Card, CardItem, Container, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base'; import {Body, Card, CardItem, Container, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base';
import CustomHeader from "../../components/CustomHeader"; import CustomHeader from "../../components/CustomHeader";
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../../utils/ThemeManager"; import ThemeManager from "../../utils/ThemeManager";
type Props = { type Props = {
@ -32,10 +32,10 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Tab <Tab
heading={ heading={
<TabHeading> <TabHeading>
<CustomMaterialIcon <MaterialCommunityIcons
icon={'information'} name={'information'}
color={ThemeManager.getCurrentThemeVariables().tabIconColor} color={ThemeManager.getCurrentThemeVariables().tabIconColor}
fontSize={20} size={20}
/> />
<Text>{i18n.t('proxiwashScreen.informationTab')}</Text> <Text>{i18n.t('proxiwashScreen.informationTab')}</Text>
</TabHeading> </TabHeading>
@ -60,7 +60,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Card> <Card>
<CardItem> <CardItem>
<Left> <Left>
<CustomMaterialIcon icon={'tumble-dryer'}/> <MaterialCommunityIcons
name={'tumble-dryer'}
size={26}/>
<H2>{i18n.t('proxiwashScreen.dryer')}</H2> <H2>{i18n.t('proxiwashScreen.dryer')}</H2>
</Left> </Left>
</CardItem> </CardItem>
@ -80,7 +82,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Card> <Card>
<CardItem> <CardItem>
<Left> <Left>
<CustomMaterialIcon icon={'washing-machine'}/> <MaterialCommunityIcons
name={'washing-machine'}
size={26}/>
<H2>{i18n.t('proxiwashScreen.washer')}</H2> <H2>{i18n.t('proxiwashScreen.washer')}</H2>
</Left> </Left>
</CardItem> </CardItem>
@ -102,10 +106,10 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Tab <Tab
heading={ heading={
<TabHeading> <TabHeading>
<CustomMaterialIcon <MaterialCommunityIcons
icon={'cash'} name={'cash'}
color={ThemeManager.getCurrentThemeVariables().tabIconColor} color={ThemeManager.getCurrentThemeVariables().tabIconColor}
fontSize={20} size={20}
/> />
<Text>{i18n.t('proxiwashScreen.paymentTab')}</Text> <Text>{i18n.t('proxiwashScreen.paymentTab')}</Text>
</TabHeading> </TabHeading>
@ -116,7 +120,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Card> <Card>
<CardItem> <CardItem>
<Left> <Left>
<CustomMaterialIcon icon={'coins'}/> <MaterialCommunityIcons
name={'coins'}
size={26}/>
<H2>{i18n.t('proxiwashScreen.tariffs')}</H2> <H2>{i18n.t('proxiwashScreen.tariffs')}</H2>
</Left> </Left>
</CardItem> </CardItem>
@ -130,7 +136,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Card> <Card>
<CardItem> <CardItem>
<Left> <Left>
<CustomMaterialIcon icon={'cash'}/> <MaterialCommunityIcons
name={'cash'}
size={26}/>
<H2>{i18n.t('proxiwashScreen.paymentMethods')}</H2> <H2>{i18n.t('proxiwashScreen.paymentMethods')}</H2>
</Left> </Left>
</CardItem> </CardItem>

28
screens/Proxiwash/ProxiwashScreen.js
View file

@ -5,7 +5,7 @@ import {Alert, Platform, View} from 'react-native';
import {Body, Card, CardItem, Left, Right, Text} from 'native-base'; import {Body, Card, CardItem, Left, Right, Text} from 'native-base';
import ThemeManager from '../../utils/ThemeManager'; import ThemeManager from '../../utils/ThemeManager';
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import WebSectionList from "../../components/WebSectionList"; import WebSectionList from "../../components/WebSectionList";
import NotificationsManager from "../../utils/NotificationsManager"; import NotificationsManager from "../../utils/NotificationsManager";
import PlatformTouchable from "react-native-platform-touchable"; import PlatformTouchable from "react-native-platform-touchable";
@ -288,9 +288,10 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
<Touchable <Touchable
style={{padding: 6}} style={{padding: 6}}
onPress={this.onAboutPress}> onPress={this.onAboutPress}>
<CustomMaterialIcon <MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/> name="information"
size={26}/>
</Touchable> </Touchable>
); );
} }
@ -320,7 +321,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
* @param section The object describing the current SectionList section * @param section The object describing the current SectionList section
* @returns {React.Node} * @returns {React.Node}
*/ */
getRenderItem({item, section} : Object) { getRenderItem({item, section}: Object) {
let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]; let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"];
let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number;
let isDryer = section.title === i18n.t('proxiwashScreen.dryers'); let isDryer = section.title === i18n.t('proxiwashScreen.dryers');
@ -361,18 +362,19 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
<View/> <View/>
</PlatformTouchable> </PlatformTouchable>
<Left style={{marginLeft: 10}}> <Left style={{marginLeft: 10}}>
<CustomMaterialIcon <MaterialCommunityIcons
icon={isDryer ? 'tumble-dryer' : 'washing-machine'} name={isDryer ? 'tumble-dryer' : 'washing-machine'}
fontSize={30} size={30}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
/> />
<Body> <Body>
<Text> <Text>
{machineName + ' '} {machineName + ' '}
{this.isMachineWatched(item.number) ? {this.isMachineWatched(item.number) ?
<CustomMaterialIcon <MaterialCommunityIcons
icon='bell-ring' name='bell-ring'
color={ThemeManager.getCurrentThemeVariables().brandPrimary} color={ThemeManager.getCurrentThemeVariables().brandPrimary}
fontSize={20} size={20}
/> : ''} /> : ''}
</Text> </Text>
<Text note> <Text note>
@ -386,8 +388,10 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
> >
{stateStrings[MACHINE_STATES[item.state]]} {stateStrings[MACHINE_STATES[item.state]]}
</Text> </Text>
<CustomMaterialIcon icon={stateIcons[MACHINE_STATES[item.state]]} <MaterialCommunityIcons
fontSize={25} name={stateIcons[MACHINE_STATES[item.state]]}
size={25}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
/> />
</Right> </Right>
</CardItem> </CardItem>

14
screens/SettingsScreen.js
View file

@ -18,8 +18,8 @@ import {
import CustomHeader from "../components/CustomHeader"; import CustomHeader from "../components/CustomHeader";
import ThemeManager from '../utils/ThemeManager'; import ThemeManager from '../utils/ThemeManager';
import i18n from "i18n-js"; import i18n from "i18n-js";
import {NavigationActions, StackActions} from "react-navigation"; import {NavigationActions, StackActions} from "@react-navigation/native";
import CustomMaterialIcon from "../components/CustomMaterialIcon"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import AsyncStorageManager from "../utils/AsyncStorageManager"; import AsyncStorageManager from "../utils/AsyncStorageManager";
import NotificationsManager from "../utils/NotificationsManager"; import NotificationsManager from "../utils/NotificationsManager";
@ -69,7 +69,10 @@ export default class SettingsScreen extends React.Component<Props, State> {
thumbnail thumbnail
> >
<Left> <Left>
<CustomMaterialIcon icon={icon}/> <MaterialCommunityIcons
name={icon}
size={26}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
</Left> </Left>
<Body> <Body>
<Text> <Text>
@ -201,7 +204,10 @@ export default class SettingsScreen extends React.Component<Props, State> {
onPress={onPressCallback} onPress={onPressCallback}
> >
<Left> <Left>
<CustomMaterialIcon icon={icon}/> <MaterialCommunityIcons
name={icon}
size={26}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
</Left> </Left>
<Body> <Body>
<Text> <Text>