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

7
components/BaseContainer.js
View file

@ -3,7 +3,7 @@
import * as React from 'react';
import {Container} from "native-base";
import CustomHeader from "./CustomHeader";
import CustomMaterialIcon from "./CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import {Platform, View} from "react-native";
import ThemeManager from "../utils/ThemeManager";
import Touchable from "react-native-platform-touchable";
@ -66,9 +66,10 @@ export default class BaseContainer extends React.Component<Props, State> {
<Touchable
style={{padding: 6}}
onPress={this.onDrawerPress}>
<CustomMaterialIcon
<MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="menu"/>
size={26}
name="menu"/>
</Touchable>
}
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 Touchable from 'react-native-platform-touchable';
import ThemeManager from "../utils/ThemeManager";
import CustomMaterialIcon from "./CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import i18n from "i18n-js";
type Props = {
@ -76,8 +76,9 @@ export default class CustomHeader extends React.Component<Props> {
width: '100%',
marginBottom: 7
}}>
<CustomMaterialIcon
icon={'magnify'}
<MaterialCommunityIcons
name={'magnify'}
size={26}
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
<Input
ref="searchInput"
@ -116,9 +117,10 @@ export default class CustomHeader extends React.Component<Props> {
<Touchable
style={{padding: 6}}
onPress={this.onPressBack}>
<CustomMaterialIcon
<MaterialCommunityIcons
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>;
else
button = this.props.leftButton;

7
components/CustomIntroSlider.js
View file

@ -3,7 +3,7 @@
import * as React from 'react';
import {LinearGradient} from "expo-linear-gradient";
import {Image, StyleSheet, View} from "react-native";
import CustomMaterialIcon from "./CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import {Text} from "native-base";
import i18n from 'i18n-js';
import AppIntroSlider from "react-native-app-intro-slider";
@ -131,7 +131,10 @@ export default class CustomIntroSlider extends React.Component<Props> {
>
{item.image !== undefined ?
<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}}>
<Text style={styles.title}>{item.title}</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 {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 ThemeManager from "../utils/ThemeManager";
import HTML from "react-native-render-html";
@ -132,7 +132,9 @@ export default class DashboardItem extends React.Component<Props> {
}}>
{i18n.t("homeScreen.dashboard.seeMore")}
</Text>
<CustomMaterialIcon icon={'chevron-right'}/>
<MaterialCommunityIcons
name={'chevron-right'}
size={26}/>
</View>
</LinearGradient>
</Body>
@ -145,15 +147,14 @@ export default class DashboardItem extends React.Component<Props> {
getIcon() {
return (
<CustomMaterialIcon
icon={this.props.icon}
<MaterialCommunityIcons
name={this.props.icon}
color={
this.props.isAvailable ?
this.props.color :
ThemeManager.getCurrentThemeVariables().textDisabledColor
}
fontSize={this.props.isSquare ? 50 : 40}
width={this.props.isSquare ? 50 : 40}/>
size={this.props.isSquare ? 50 : 40}/>
);
}

36
components/Sidebar.js
View file

@ -1,17 +1,15 @@
// @flow
import * as React from 'react';
import {Dimensions, FlatList, Image, Linking, Platform, StyleSheet} from 'react-native';
import {Badge, Container, Left, ListItem, Right, Text} from "native-base";
import {Dimensions, FlatList, Image,Platform, StyleSheet} from 'react-native';
import {Container, Left, ListItem, Text} from "native-base";
import i18n from "i18n-js";
import CustomMaterialIcon from '../components/CustomMaterialIcon';
import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../utils/ThemeManager";
import * as WebBrowser from 'expo-web-browser';
const deviceWidth = Dimensions.get("window").width;
const drawerCover = require("../assets/drawer-cover.png");
type Props = {
navigation: Object,
};
@ -134,7 +132,7 @@ export default class SideBar extends React.Component<Props, State> {
getRenderItem({item}: Object) {
const onListItemPress = this.onListItemPress.bind(this, item);
// return <View/>;
if (item.icon !== undefined) {
return (
<ListItem
@ -144,29 +142,15 @@ export default class SideBar extends React.Component<Props, State> {
onPress={onListItemPress}
>
<Left>
<CustomMaterialIcon
icon={item.icon}
active={this.state.active === item.route}
<MaterialCommunityIcons
name={item.icon}
size={26}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
/>
<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>
);
} else {
@ -180,12 +164,12 @@ export default class SideBar extends React.Component<Props, State> {
}
render() {
// console.log("rendering SideBar");
console.log("rendering SideBar");
return (
<Container style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
}}>
<Image source={drawerCover} style={styles.drawerCover}/>
<Image source={require("../assets/drawer-cover.png")} style={styles.drawerCover}/>
<FlatList
data={this.dataSet}
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 ThemeManager from '../utils/ThemeManager';
import WebDataManager from "../utils/WebDataManager";
import CustomMaterialIcon from "./CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import i18n from "i18n-js";
import {RefreshControl, SectionList} from "react-native";
@ -150,10 +150,9 @@ export default class WebSectionList extends React.Component<Props, State> {
{this.state.refreshing ?
<Spinner/>
:
<CustomMaterialIcon
icon={item.icon}
fontSize={100}
width={100}
<MaterialCommunityIcons
name={item.icon}
size={100}
color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>}
</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 WebView from "react-native-webview";
import Touchable from "react-native-platform-touchable";
import CustomMaterialIcon from "../components/CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../utils/ThemeManager";
import BaseContainer from "../components/BaseContainer";
@ -59,9 +59,10 @@ export default class WebViewScreen extends React.Component<Props> {
<Touchable
style={{padding: 6}}
onPress={clickAction}>
<CustomMaterialIcon
<MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={icon}/>
name={icon}
size={26}/>
</Touchable>
);
}
@ -144,10 +145,10 @@ export default class WebViewScreen extends React.Component<Props> {
tabbedView.push(
<Tab heading={
<TabHeading>
<CustomMaterialIcon
icon={this.props.data[i]['icon']}
<MaterialCommunityIcons
name={this.props.data[i]['icon']}
color={ThemeManager.getCurrentThemeVariables().tabIconColor}
fontSize={20}
size={20}
/>
<Text>{this.props.data[i]['name']}</Text>
</TabHeading>}

64
navigation/DrawerNavigator.js
View file

@ -11,6 +11,7 @@ import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
import DebugScreen from '../screens/DebugScreen';
import Sidebar from "../components/Sidebar";
import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
import PerfHomeScreen from '../screens/PerfHomeScreen';
const AboutStack = createStackNavigator();
@ -84,47 +85,24 @@ export default function DrawerNavigator() {
</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,
// },
// });
// }
// /**
// * Creates the drawer navigation stack
// */
// function createDrawerNavigatorWithInitialRoute(initialRoute: string) {
// return createDrawerNavigator({
// Main: createDrawerStackWithInitialRoute(initialRoute),
// }, {
// contentComponent: Sidebar,
// initialRouteName: 'Main',
// backBehavior: 'initialRoute',
// drawerType: 'front',
// useNativeAnimations: true,
// });
// }
//
// export {createDrawerNavigatorWithInitialRoute};
const basicStack = createStackNavigator();
function DrawerNavigator1() {
return (
<basicStack.Navigator
initialRouteName={'Main'}
mode='card'
screenOptions={{
gestureEnabled: true,
cardOverlayEnabled: true,
...TransitionPresets.SlideFromRightIOS,
}}
>
<basicStack.Screen
name="Main"
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 HomeScreen from '../screens/HomeScreen';
import PerfHomeScreen from '../screens/PerfHomeScreen';
import PlanningScreen from '../screens/PlanningScreen';
import PlanningDisplayScreen from '../screens/PlanningDisplayScreen';
import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
@ -11,12 +12,8 @@ import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen';
import ProximoListScreen from "../screens/Proximo/ProximoListScreen";
import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
import PlanexScreen from '../screens/Websites/PlanexScreen';
import CustomMaterialIcon from "../components/CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
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";
const TAB_ICONS = {
@ -145,12 +142,12 @@ export default function TabNavigator() {
<Tab.Navigator
initialRouteName={AsyncStorageManager.getInstance().preferences.defaultStartScreen.current}
barStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary}}
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
let icon = TAB_ICONS[route.name];
// tintColor is ignoring activeColor and inactiveColor for some reason
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"
},
"dependencies": {
"@expo/vector-icons": "~10.0.0",
"@react-native-community/masked-view": "0.1.5",
"@react-navigation/bottom-tabs": "^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 appJson from '../../app';
import packageJson from '../../package';
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import AsyncStorageManager from "../../utils/AsyncStorageManager";
import {Modalize} from "react-native-modalize";
import ThemeManager from "../../utils/ThemeManager";
@ -227,11 +227,10 @@ export default class AboutScreen extends React.Component<Props, State> {
<Card>
<CardItem>
<Left>
<CustomMaterialIcon
icon={'account-multiple'}
fontSize={40}
width={40}
color={ThemeManager.getCurrentThemeVariables().brandPrimary}/>
<MaterialCommunityIcons
name='account-multiple'
size={40}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
<Body>
<H1>{i18n.t('aboutScreen.team')}</H1>
</Body>
@ -290,13 +289,18 @@ export default class AboutScreen extends React.Component<Props, State> {
<CardItem button
onPress={item.onPressCallback}>
<Left>
<CustomMaterialIcon icon={item.icon}/>
<MaterialCommunityIcons
name={item.icon}
size={26}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
<Text>{item.text}</Text>
</Left>
{item.showChevron ?
<Right>
<CustomMaterialIcon icon="chevron-right"
fontSize={20}/>
<MaterialCommunityIcons
name={'chevron-right'}
size={26}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
</Right>
:
<Right/>
@ -344,8 +348,9 @@ export default class AboutScreen extends React.Component<Props, State> {
marginRight: 'auto',
}}
onPress={onPressMail}>
<CustomMaterialIcon
icon={'email'}
<MaterialCommunityIcons
name={'email'}
size={26}
color={'#fff'}/>
<Text>{i18n.t('aboutScreen.bugsMail')}</Text>
</Button>
@ -356,8 +361,9 @@ export default class AboutScreen extends React.Component<Props, State> {
marginRight: 'auto',
}}
onPress={onPressGit}>
<CustomMaterialIcon
icon={'git'}
<MaterialCommunityIcons
name={'git'}
size={26}
color={'#fff'}/>
<Text>{i18n.t('aboutScreen.bugsGit')}</Text>
</Button>

4
screens/DebugScreen.js
View file

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

8
screens/HomeScreen.js
View file

@ -4,7 +4,7 @@ import * as React from 'react';
import {Image, TouchableOpacity, View} from 'react-native';
import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base';
import i18n from "i18n-js";
import CustomMaterialIcon from '../components/CustomMaterialIcon';
import {MaterialCommunityIcons} from "@expo/vector-icons";
import Autolink from 'react-native-autolink';
import ThemeManager from "../utils/ThemeManager";
import DashboardItem from "../components/DashboardItem";
@ -551,10 +551,10 @@ export default class HomeScreen extends React.Component<Props> {
<Left>
<Button transparent
onPress={onOutLinkPress}>
<CustomMaterialIcon
icon="facebook"
<MaterialCommunityIcons
name="facebook"
color="#57aeff"
width={20}/>
size={26}/>
<Text>En savoir plus</Text>
</Button>
</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 CustomHeader from "../../components/CustomHeader";
import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
type Props = {
navigation: Object,
@ -39,7 +39,9 @@ export default class ProximoAboutScreen extends React.Component<Props> {
<Card>
<CardItem>
<Left>
<CustomMaterialIcon icon={'clock-outline'}/>
<MaterialCommunityIcons
name={'clock-outline'}
size={30}/>
<H2>{i18n.t('proximoScreen.openingHours')}</H2>
</Left>
</CardItem>
@ -50,7 +52,9 @@ export default class ProximoAboutScreen extends React.Component<Props> {
<Card>
<CardItem>
<Left>
<CustomMaterialIcon icon={'cash'}/>
<MaterialCommunityIcons
name={'cash'}
size={30}/>
<H2>{i18n.t('proximoScreen.paymentMethods')}</H2>
</Left>
</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 Menu, {MenuItem} from 'react-native-material-menu';
import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../../utils/ThemeManager";
import {Modalize} from 'react-native-modalize';
@ -182,11 +182,15 @@ export default class ProximoListScreen extends React.Component<Props, State> {
*/
setupSortIcons(mode: string, isReverse: boolean) {
const downSortIcon =
<CustomMaterialIcon
icon={'sort-descending'}/>;
<MaterialCommunityIcons
name={'sort-descending'}
color={'#000'}
size={26}/>;
const upSortIcon =
<CustomMaterialIcon
icon={'sort-ascending'}/>;
<MaterialCommunityIcons
name={'sort-ascending'}
color={'#000'}
size={26}/>;
switch (mode) {
case sortMode.price:
this.setState({sortNameIcon: ''});
@ -297,9 +301,10 @@ export default class ProximoListScreen extends React.Component<Props, State> {
<Touchable
style={{padding: 6}}
onPress={this.onSortMenuPress}>
<CustomMaterialIcon
<MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={'sort'}/>
name={'sort'}
size={26}/>
</Touchable>
}
>

27
screens/Proximo/ProximoMainScreen.js
View file

@ -4,7 +4,7 @@ import * as React from 'react';
import {Platform, View} from 'react-native'
import {Body, Left, ListItem, Right, Text} from 'native-base';
import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../../utils/ThemeManager";
import Touchable from "react-native-platform-touchable";
import BaseContainer from "../../components/BaseContainer";
@ -155,16 +155,18 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
<Touchable
style={{padding: 6}}
onPress={this.onPressSearchBtn}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="magnify"/>
<MaterialCommunityIcons
name="magnify"
size={26}
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
</Touchable>
<Touchable
style={{padding: 6}}
onPress={this.onPressAboutBtn}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/>
<MaterialCommunityIcons
name="information"
size={26}
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
</Touchable>
</View>
);
@ -184,9 +186,9 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
onPress={onPress}
>
<Left>
<CustomMaterialIcon
icon={item.type.icon}
fontSize={30}
<MaterialCommunityIcons
name={item.type.icon}
size={30}
color={ThemeManager.getCurrentThemeVariables().brandPrimary}
/>
</Left>
@ -199,7 +201,10 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
</Text>
</Body>
<Right>
<CustomMaterialIcon icon="chevron-right"/>
<MaterialCommunityIcons
icon="chevron-right"
size={26}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
</Right>
</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 CustomHeader from "../../components/CustomHeader";
import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../../utils/ThemeManager";
type Props = {
@ -32,10 +32,10 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Tab
heading={
<TabHeading>
<CustomMaterialIcon
icon={'information'}
<MaterialCommunityIcons
name={'information'}
color={ThemeManager.getCurrentThemeVariables().tabIconColor}
fontSize={20}
size={20}
/>
<Text>{i18n.t('proxiwashScreen.informationTab')}</Text>
</TabHeading>
@ -60,7 +60,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Card>
<CardItem>
<Left>
<CustomMaterialIcon icon={'tumble-dryer'}/>
<MaterialCommunityIcons
name={'tumble-dryer'}
size={26}/>
<H2>{i18n.t('proxiwashScreen.dryer')}</H2>
</Left>
</CardItem>
@ -80,7 +82,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Card>
<CardItem>
<Left>
<CustomMaterialIcon icon={'washing-machine'}/>
<MaterialCommunityIcons
name={'washing-machine'}
size={26}/>
<H2>{i18n.t('proxiwashScreen.washer')}</H2>
</Left>
</CardItem>
@ -102,10 +106,10 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Tab
heading={
<TabHeading>
<CustomMaterialIcon
icon={'cash'}
<MaterialCommunityIcons
name={'cash'}
color={ThemeManager.getCurrentThemeVariables().tabIconColor}
fontSize={20}
size={20}
/>
<Text>{i18n.t('proxiwashScreen.paymentTab')}</Text>
</TabHeading>
@ -116,7 +120,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Card>
<CardItem>
<Left>
<CustomMaterialIcon icon={'coins'}/>
<MaterialCommunityIcons
name={'coins'}
size={26}/>
<H2>{i18n.t('proxiwashScreen.tariffs')}</H2>
</Left>
</CardItem>
@ -130,7 +136,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Card>
<CardItem>
<Left>
<CustomMaterialIcon icon={'cash'}/>
<MaterialCommunityIcons
name={'cash'}
size={26}/>
<H2>{i18n.t('proxiwashScreen.paymentMethods')}</H2>
</Left>
</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 ThemeManager from '../../utils/ThemeManager';
import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import WebSectionList from "../../components/WebSectionList";
import NotificationsManager from "../../utils/NotificationsManager";
import PlatformTouchable from "react-native-platform-touchable";
@ -288,9 +288,10 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
<Touchable
style={{padding: 6}}
onPress={this.onAboutPress}>
<CustomMaterialIcon
<MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/>
name="information"
size={26}/>
</Touchable>
);
}
@ -320,7 +321,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
* @param section The object describing the current SectionList section
* @returns {React.Node}
*/
getRenderItem({item, section} : Object) {
getRenderItem({item, section}: Object) {
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 isDryer = section.title === i18n.t('proxiwashScreen.dryers');
@ -361,18 +362,19 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
<View/>
</PlatformTouchable>
<Left style={{marginLeft: 10}}>
<CustomMaterialIcon
icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
fontSize={30}
<MaterialCommunityIcons
name={isDryer ? 'tumble-dryer' : 'washing-machine'}
size={30}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
/>
<Body>
<Text>
{machineName + ' '}
{this.isMachineWatched(item.number) ?
<CustomMaterialIcon
icon='bell-ring'
<MaterialCommunityIcons
name='bell-ring'
color={ThemeManager.getCurrentThemeVariables().brandPrimary}
fontSize={20}
size={20}
/> : ''}
</Text>
<Text note>
@ -386,8 +388,10 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
>
{stateStrings[MACHINE_STATES[item.state]]}
</Text>
<CustomMaterialIcon icon={stateIcons[MACHINE_STATES[item.state]]}
fontSize={25}
<MaterialCommunityIcons
name={stateIcons[MACHINE_STATES[item.state]]}
size={25}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
/>
</Right>
</CardItem>

14
screens/SettingsScreen.js
View file

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