Improved night mode

App.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import {Dimensions, StyleSheet, View, Text} from 'react-native';
+import {StyleProvider, Root, View} from 'native-base';
-import {StyleProvider, Root} from 'native-base';
 import AppNavigator from './navigation/AppNavigator';
 import ThemeManager from './utils/ThemeManager';
 import LocaleManager from './utils/LocaleManager';
 import * as Font from 'expo-font';
-
+// edited native-base-shoutem-theme according to
+// https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422
+// to allow for dynamic theme switching
+import { clearThemeCache } from 'native-base-shoutem-theme';
 
 export default class App extends React.Component {
 
@@ -35,9 +37,10 @@ export default class App extends React.Component {
     updateTheme() {
         console.log('update theme called');
         // Change not propagating, need to restart the app
-        // this.setState({
+        this.setState({
-        //     currentTheme: ThemeManager.getInstance().getCurrentTheme()
+            currentTheme: ThemeManager.getInstance().getCurrentTheme()
-        // });
+        });
+        clearThemeCache();
     }
 
     render() {
@@ -45,12 +48,15 @@ export default class App extends React.Component {
             return <View/>;
         }
         console.log('rendering');
-        // console.log(this.state.currentTheme.variables.containerBgColor);
+        console.log(this.state.currentTheme.variables.containerBgColor);
         return (
-            <StyleProvider style={this.state.currentTheme}>
+            <Root>
-                <Root>
+                <StyleProvider style={this.state.currentTheme}>
+
                     <AppNavigator/>
-                </Root>
+
-            </StyleProvider>);
+                </StyleProvider>
+            </Root>
+        );
     }
 }

app.json

@@ -12,10 +12,11 @@
     "version": "0.0.1",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
+    "primaryColor": "#e42612",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#fff"
     },
     "updates": {
       "fallbackToCacheTimeout": 0
@@ -24,7 +25,11 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.test.applicationamicale"
+    },
+    "android": {
+      "package": "com.test.applicationamicale"
     }
   }
 }

components/CustomMaterialIcon.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {Icon} from "native-base";
+import ThemeManager from '../utils/ThemeManager';
+
+export default class CustomMaterialIcon extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <Icon
+                active
+                name={this.props.icon}
+                type={'MaterialCommunityIcons'}
+                style={{
+                    color:
+                        this.props.color !== undefined ?
+                            this.props.color :
+                            this.props.active ?
+                                ThemeManager.getInstance().getCurrentThemeVariables().brandPrimary :
+                                ThemeManager.getInstance().getCurrentThemeVariables().customMaterialIconColor,
+                    fontSize: this.props.fontSize !== undefined ? this.props.fontSize : 26,
+                    width: this.props.width !== undefined ? this.props.width : 30
+                }}
+            />
+        );
+    }
+}

components/SideMenu.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {Platform, Dimensions, StyleSheet, Image, FlatList, Linking} from 'react-native';
 import {Badge, Text, Container, Content, Icon, Left, ListItem, Right} from "native-base";
 import i18n from "i18n-js";
+import CustomMaterialIcon from '../components/CustomMaterialIcon';
 
 const deviceHeight = Dimensions.get("window").height;
 
@@ -101,11 +102,9 @@ export default class SideBar extends React.Component {
                                 }}
                             >
                                 <Left>
-                                    <Icon
+                                    <CustomMaterialIcon
-                                        active
+                                        icon={item.icon}
-                                        name={item.icon}
+                                        active={this.state.active === item.route}
-                                        type={'MaterialCommunityIcons'}
-                                        style={{color: "#777", fontSize: 26, width: 30}}
                                     />
                                     <Text style={styles.text}>
                                         {item.name}

native-base-theme/components/Button.js

@@ -319,7 +319,7 @@ export default (variables /*: * */ = variable) => {
       fontFamily: variables.btnFontFamily,
       marginLeft: 0,
       marginRight: 0,
-      color: variables.inverseTextColor,
+      color: variables.btnTextColor,
       fontSize: variables.btnTextSize,
       paddingHorizontal: 16,
       backgroundColor: "transparent"
@@ -327,13 +327,13 @@ export default (variables /*: * */ = variable) => {
     },
 
     "NativeBase.Icon": {
-      color: variables.inverseTextColor,
+      color: variables.btnTextColor,
       fontSize: 24,
       marginHorizontal: 16,
       paddingTop: platform === "ios" ? 2 : undefined
     },
     "NativeBase.IconNB": {
-      color: variables.inverseTextColor,
+      color: variables.btnTextColor,
       fontSize: 24,
       marginHorizontal: 16,
       paddingTop: platform === "ios" ? 2 : undefined

native-base-theme/variables/platform.js

@@ -35,6 +35,7 @@ export default {
 
   // Button
   btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
+  btnTextColor: '#fff',
   btnDisabledBg: "#b5b5b5",
   buttonPadding: 6,
   get btnPrimaryBg() {
@@ -100,7 +101,7 @@ export default {
   CheckboxIconSize: platform === "ios" ? 21 : 16,
   CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
   CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
-  checkboxBgColor: "#039BE5",
+  checkboxBgColor: "#E4202D",
   checkboxSize: 20,
   checkboxTickColor: "#fff",
 
@@ -210,7 +211,7 @@ export default {
 
   // Radio Button
   radioBtnSize: platform === "ios" ? 25 : 23,
-  radioSelectedColorAndroid: "#3F51B5",
+  radioSelectedColorAndroid: "#E4202D",
   radioBtnLineHeight: platform === "ios" ? 29 : 24,
   get radioColor() {
     return this.brandPrimary;
@@ -254,6 +255,17 @@ export default {
   subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
   titleFontColor: platform === "ios" ? "#000" : "#FFF",
 
+
+  // CUSTOM
+  customMaterialIconColor: "#5d5d5d",
+
+  // PROXIWASH
+  proxiwashFinishedColor: "rgba(54,165,22,0.4)",
+  proxiwashReadyColor: "transparent",
+  proxiwashRunningColor: "rgba(94,104,241,0.4)",
+  proxiwashBrokenColor: "#a2a2a2",
+  proxiwashErrorColor: "rgba(204,7,0,0.4)",
+
   // Other
   borderRadiusBase: platform === "ios" ? 5 : 2,
   borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),

native-base-theme/variables/platformDark.js

@@ -35,37 +35,38 @@ export default {
 
     // Button
     btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
+    btnTextColor: '#fff',
     btnDisabledBg: "#b5b5b5",
     buttonPadding: 6,
     get btnPrimaryBg() {
         return this.brandPrimary;
     },
     get btnPrimaryColor() {
-        return this.inverseTextColor;
+        return this.textColor;
     },
     get btnInfoBg() {
         return this.brandInfo;
     },
     get btnInfoColor() {
-        return this.inverseTextColor;
+        return this.textColor;
     },
     get btnSuccessBg() {
         return this.brandSuccess;
     },
     get btnSuccessColor() {
-        return this.inverseTextColor;
+        return this.textColor;
     },
     get btnDangerBg() {
         return this.brandDanger;
     },
     get btnDangerColor() {
-        return this.inverseTextColor;
+        return this.textColor;
     },
     get btnWarningBg() {
         return this.brandWarning;
     },
     get btnWarningColor() {
-        return this.inverseTextColor;
+        return this.textColor;
     },
     get btnTextSize() {
         return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
@@ -87,8 +88,8 @@ export default {
     },
 
     // Card
-    cardDefaultBg: "#2b2b2b",
+    cardDefaultBg: "#363636",
-    cardBorderColor: "#ccc",
+    cardBorderColor: "#1a1a1a",
     cardBorderRadius: 2,
     cardItemPadding: platform === "ios" ? 10 : 12,
 
@@ -100,7 +101,7 @@ export default {
     CheckboxIconSize: platform === "ios" ? 21 : 16,
     CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
     CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
-    checkboxBgColor: "#039BE5",
+    checkboxBgColor: "#E4202D",
     checkboxSize: 20,
     checkboxTickColor: "#fff",
 
@@ -114,7 +115,7 @@ export default {
     brandLight: "#f4f4f4",
 
     //Container
-    containerBgColor: "#2b2b2b",
+    containerBgColor: "#333333",
 
     //Date Picker
     datePickerTextColor: "#000",
@@ -197,11 +198,11 @@ export default {
 
     // List
     listBg: "transparent",
-    listBorderColor: "#c9c9c9",
+    listBorderColor: "#727272",
     listDividerBg: "#f4f4f4",
     listBtnUnderlayColor: "#DDD",
     listItemPadding: platform === "ios" ? 10 : 12,
-    listNoteColor: "#808080",
+    listNoteColor: "#acacac",
     listNoteSize: 13,
 
     // Progress Bar
@@ -210,7 +211,7 @@ export default {
 
     // Radio Button
     radioBtnSize: platform === "ios" ? 25 : 23,
-    radioSelectedColorAndroid: "#3F51B5",
+    radioSelectedColorAndroid: "#E4202D",
     radioBtnLineHeight: platform === "ios" ? 29 : 24,
     get radioColor() {
         return this.brandPrimary;
@@ -240,7 +241,7 @@ export default {
     tabFontSize: 15,
 
     // Text
-    textColor: "#fff",
+    textColor: "#d6d6d6",
     inverseTextColor: "#000",
     noteFontSize: 14,
     get defaultTextColor() {
@@ -254,6 +255,18 @@ export default {
     subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
     titleFontColor: platform === "ios" ? "#000" : "#FFF",
 
+
+    // CUSTOM
+    customMaterialIconColor: "#b3b3b3",
+
+    // PROXIWASH
+    proxiwashFinishedColor: "rgba(12,157,13,0.72)",
+    proxiwashReadyColor: "transparent",
+    proxiwashRunningColor: "rgba(29,59,175,0.65)",
+    proxiwashBrokenColor: "#000000",
+    proxiwashErrorColor: "rgba(213,8,0,0.57)",
+
+
     // Other
     borderRadiusBase: platform === "ios" ? 5 : 2,
     borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),

package-lock.json

@@ -1098,6 +1098,24 @@
         }
       }
     },
+    "@shoutem/theme": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@shoutem/theme/-/theme-0.11.3.tgz",
+      "integrity": "sha512-2soc/w0QYWjvm+vFOemSAuDpRAzBW/sTtNkkqwwZfz0VcNH78FWnUfyMOJetmr1aiulFoE87JYeyHlfOhxKbbw==",
+      "requires": {
+        "hoist-non-react-statics": "^1.0.5",
+        "lodash": "~4.17.4",
+        "prop-types": "^15.5.10",
+        "tinycolor2": "^1.3.0"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
+          "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
+        }
+      }
+    },
     "@types/fbemitter": {
       "version": "2.0.32",
       "resolved": "https://registry.npmjs.org/@types/fbemitter/-/fbemitter-2.0.32.tgz",
@@ -8068,6 +8086,11 @@
       "resolved": "https://registry.npmjs.org/tiny-queue/-/tiny-queue-0.2.1.tgz",
       "integrity": "sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY="
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "latest",
+    "@shoutem/theme": "latest",
     "expo": "^33.0.0",
     "expo-font": "^5.0.1",
     "expo-localization": "^5.0.1",
@@ -16,6 +17,7 @@
     "i18n-js": "^3.3.0",
     "i18next": "latest",
     "native-base": "latest",
+    "native-base-shoutem-theme": "latest",
     "react": "16.8.3",
     "react-dom": "^16.8.6",
     "react-i18next": "latest",

screens/About/AboutScreen.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import {Platform, StyleSheet, Linking, Alert} from 'react-native';
+import {Platform, StyleSheet, Linking, Alert, FlatList} from 'react-native';
-import {Container, Content, Text, Card, CardItem, Body, Icon, Left, Right, Thumbnail, H1} from 'native-base';
+import {Container, Content, Text, Card, CardItem, Body, Icon, Left, Right, Thumbnail, H1, ListItem} from 'native-base';
 import CustomHeader from "../../components/CustomHeader";
 import i18n from "i18n-js";
 import appJson from '../../app';
 import packageJson from '../../package';
+import CustomMaterialIcon from "../../components/CustomMaterialIcon";
 
 const links = {
     appstore: 'https://qwant.com',
@@ -19,11 +20,105 @@ const links = {
     react: 'https://facebook.github.io/react-native/',
 };
 
+function openWebLink(link) {
+    Linking.openURL(link).catch((err) => console.error('Error opening link', err));
+}
 
 export default class AboutScreen extends React.Component {
 
-    openWebLink(link) {
+    appData = [
-        Linking.openURL(link).catch((err) => console.error('Error opening link', err));
+        {
+            onPressCallback: () => openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore),
+            icon: Platform.OS === "ios" ? 'apple' : 'google-play',
+            text: Platform.OS === "ios" ? i18n.t('aboutScreen.appstore') : i18n.t('aboutScreen.playstore'),
+            showChevron: true
+        },
+        {
+            onPressCallback: () => openWebLink(links.gitlab),
+            icon: 'git',
+            text: 'Gitlab',
+            showChevron: true
+        },
+        {
+            onPressCallback: () => openWebLink(links.bugs),
+            icon: 'bug',
+            text: i18n.t('aboutScreen.bugs'),
+            showChevron: true
+        },
+        {
+            onPressCallback: () => openWebLink(links.changelog),
+            icon: 'refresh',
+            text: i18n.t('aboutScreen.changelog'),
+            showChevron: true
+        },
+        {
+            onPressCallback: () => openWebLink(links.license),
+            icon: 'file-document',
+            text: i18n.t('aboutScreen.license'),
+            showChevron: true
+        },
+    ];
+
+    authorData = [
+        {
+            onPressCallback: () => Alert.alert('Coucou', 'Whaou'),
+            icon: 'account-circle',
+            text: 'Arnaud VERGNET',
+            showChevron: false
+        },
+        {
+            onPressCallback: () => openWebLink(links.mail),
+            icon: 'email',
+            text: i18n.t('aboutScreen.mail'),
+            showChevron: true
+        },
+        {
+            onPressCallback: () => openWebLink(links.linkedin),
+            icon: 'linkedin',
+            text: 'Linkedin',
+            showChevron: true
+        },
+        {
+            onPressCallback: () => openWebLink(links.facebook),
+            icon: 'facebook',
+            text: 'Facebook',
+            showChevron: true
+        },
+    ];
+
+    technoData = [
+        {
+            onPressCallback: () => openWebLink(links.react),
+            icon: 'react',
+            text: i18n.t('aboutScreen.reactNative'),
+            showChevron: false
+        },
+        {
+            onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen', {data: packageJson.dependencies}),
+            icon: 'developer-board',
+            text: i18n.t('aboutScreen.libs'),
+            showChevron: true
+        },
+    ];
+
+    getCardItem(onPressCallback, icon, text, showChevron) {
+        return (
+            <CardItem button
+                      onPress={onPressCallback}>
+                <Left>
+                    <CustomMaterialIcon icon={icon}/>
+                    <Text>{text}</Text>
+                </Left>
+                {showChevron ?
+                    <Right>
+                        <CustomMaterialIcon icon="chevron-right"
+                                            fontSize={20}/>
+                    </Right>
+                    :
+                    <Right/>
+                }
+            </CardItem>)
+            ;
     }
 
     render() {
@@ -44,182 +139,39 @@ export default class AboutScreen extends React.Component {
                                 </Body>
                             </Left>
                         </CardItem>
-                        <CardItem button
+                        <FlatList
-                                  onPress={() => this.openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore)}>
+                            data={this.appData}
-                            <Left>
+                            keyExtractor={(item) => item.icon}
-                                <Icon active name={Platform.OS === "ios" ? 'apple' : 'google-play'}
+                            renderItem={({item}) =>
-                                      type={'MaterialCommunityIcons'}
+                                this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron)
-                                      style={{color: "#777", fontSize: 26, width: 30}}
+                            }
-                                />
+                        />
-                                <Text>{Platform.OS === "ios" ? i18n.t('aboutScreen.appstore') : i18n.t('aboutScreen.playstore')}</Text>
-                            </Left>
-                            <Right>
-                                <Icon name="chevron-right"
-                                      type={'MaterialCommunityIcons'}/>
-                            </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="chevron-right"
-                                      type={'MaterialCommunityIcons'}/>
-                            </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="chevron-right"
-                                      type={'MaterialCommunityIcons'}/>
-                            </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="chevron-right"
-                                      type={'MaterialCommunityIcons'}/>
-                            </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="chevron-right"
-                                      type={'MaterialCommunityIcons'}/>
-                            </Right>
-                        </CardItem>
                     </Card>
 
                     <Card>
                         <CardItem header>
                             <Text>{i18n.t('aboutScreen.author')}</Text>
                         </CardItem>
-                        <CardItem button
+                        <FlatList
-                        onPress={() => Alert.alert('Coucou', 'Whaou')}>
+                            data={this.authorData}
-                            <Left>
+                            keyExtractor={(item) => item.icon}
-                                <Icon active name="account-circle"
+                            renderItem={({item}) =>
-                                      type={'MaterialCommunityIcons'}
+                                this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron)
-                                      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="chevron-right"
-                                      type={'MaterialCommunityIcons'}/>
-                            </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="chevron-right"
-                                      type={'MaterialCommunityIcons'}/>
-                            </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="chevron-right"
-                                      type={'MaterialCommunityIcons'}/>
-                            </Right>
-                        </CardItem>
                     </Card>
 
                     <Card>
                         <CardItem header>
                             <Text>{i18n.t('aboutScreen.technologies')}</Text>
                         </CardItem>
-                        <CardItem button
+                        <FlatList
-                                  onPress={() => this.openWebLink(links.react)}>
+                            data={this.technoData}
-                            <Left>
+                            keyExtractor={(item) => item.icon}
-                                <Icon active name="react"
+                            renderItem={({item}) =>
-                                      type={'MaterialCommunityIcons'}
+                                this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron)
-                                      style={{color: "#777", fontSize: 26, width: 30}}
+                            }
-                                />
+                        />
-                                <Text>
-                                    {i18n.t('aboutScreen.reactNative')}
-                                </Text>
-                            </Left>
-                            <Right>
-                                <Icon name="chevron-right"
-                                      type={'MaterialCommunityIcons'}/>
-                            </Right>
-                        </CardItem>
-                        <CardItem button
-                                  onPress={() => this.props.navigation.navigate('AboutDependenciesScreen', {data: packageJson.dependencies})}>
-                            <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="chevron-right"
-                                      type={'MaterialCommunityIcons'}/>
-                            </Right>
-                        </CardItem>
                     </Card>
                 </Content>
             </Container>

screens/Proximo/ProximoListScreen.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Button, Icon} from 'native-base';
+import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Body, Icon} from 'native-base';
 import CustomHeader from "../../components/CustomHeader";
 import {AsyncStorage, FlatList, View} from "react-native";
 import Touchable from 'react-native-platform-touchable';
@@ -181,10 +181,12 @@ export default class ProximoMainScreen extends React.Component {
                             >
                                 <Left>
                                     <Thumbnail square source={{uri: IMG_URL + item.name + '.jpg'}}/>
+                                </Left>
+                                <Body>
                                     <Text style={{marginLeft: 20}}>
                                         {item.name}
                                     </Text>
-                                </Left>
+                                </Body>
                                 <Right style={{flex: 1}}>
                                     <Text>
                                         {item.price}€

screens/Proximo/ProximoMainScreen.js

@@ -3,6 +3,7 @@ import {StyleSheet, RefreshControl, FlatList} from 'react-native';
 import {Container, Text, Content, ListItem, Left, Right, Body, Badge, Icon, Toast} from 'native-base';
 import CustomHeader from "../../components/CustomHeader";
 import i18n from "i18n-js";
+import CustomMaterialIcon from "../../components/CustomMaterialIcon";
 
 const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/dataProximo.json";
 
@@ -20,6 +21,7 @@ export default class ProximoMainScreen extends React.Component {
         super(props);
         this.state = {
             refreshing: false,
+            firstLoading: true,
             data: {},
         };
     }
@@ -64,7 +66,10 @@ export default class ProximoMainScreen extends React.Component {
     _onRefresh = () => {
         this.setState({refreshing: true});
         this.readData().then(() => {
-            this.setState({refreshing: false});
+            this.setState({
+                refreshing: false,
+                firstLoading: false
+            });
             Toast.show({
                 text: i18n.t('proximoScreen.listUpdated'),
                 buttonText: 'OK',
@@ -100,9 +105,10 @@ export default class ProximoMainScreen extends React.Component {
                             }}
                         >
                             <Left>
-                                <Icon name={typesIcons[item.type] ? typesIcons[item.type] : typesIcons.Default}
+                                <CustomMaterialIcon
-                                      type={'MaterialCommunityIcons'}
+                                    icon={typesIcons[item.type] ? typesIcons[item.type] : typesIcons.Default}
-                                      style={styles.icon}/>
+                                    fontSize={30}
+                                />
                             </Left>
                             <Body>
                                 <Text>
@@ -113,8 +119,7 @@ export default class ProximoMainScreen extends React.Component {
                                 </Text></Badge>
                             </Body>
                             <Right>
-                                <Icon name="chevron-right"
+                                <CustomMaterialIcon icon="chevron-right"/>
-                                      type={'MaterialCommunityIcons'}/>
                             </Right>
                         </ListItem>}
                 />
@@ -123,9 +128,3 @@ export default class ProximoMainScreen extends React.Component {
     }
 }
 
-const styles = StyleSheet.create({
-    icon: {
-        fontSize: 30,
-        width: 30
-    }
-});

screens/ProxiwashScreen.js

@@ -1,10 +1,12 @@
 import React from 'react';
-import {SectionList, RefreshControl, StyleSheet, View, ScrollView} from 'react-native';
+import {SectionList, RefreshControl, View} from 'react-native';
-import {Badge, Body, Container, Content, Icon, Left, ListItem, Right, Text, Toast, H2, Button} from 'native-base';
+import {Body, Container, Icon, Left, ListItem, Right, Text, Toast, H2, Button} from 'native-base';
 import CustomHeader from "../components/CustomHeader";
+import ThemeManager from '../utils/ThemeManager';
 import NotificationsManager from '../utils/NotificationsManager';
 import i18n from "i18n-js";
 import {AsyncStorage} from 'react-native'
+import CustomMaterialIcon from "../components/CustomMaterialIcon";
 
 const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/dataProxiwash.json";
 const WATCHED_MACHINES_PREFKEY = "proxiwash.watchedMachines";
@@ -28,11 +30,12 @@ export default class ProxiwashScreen extends React.Component {
 
     constructor(props) {
         super(props);
-        stateColors[MACHINE_STATES.TERMINE] = 'rgba(54,165,22,0.4)';
+        let colors = ThemeManager.getInstance().getCurrentThemeVariables();
-        stateColors[MACHINE_STATES.DISPONIBLE] = '#ffffff';
+        stateColors[MACHINE_STATES.TERMINE] = colors.proxiwashFinishedColor;
-        stateColors[MACHINE_STATES.FONCTIONNE] = 'rgba(241,237,41,0.4)';
+        stateColors[MACHINE_STATES.DISPONIBLE] = colors.proxiwashReadyColor;
-        stateColors[MACHINE_STATES.HS] = '#a2a2a2';
+        stateColors[MACHINE_STATES.FONCTIONNE] = colors.proxiwashRunningColor;
-        stateColors[MACHINE_STATES.ERREUR] = 'rgba(204,7,0,0.4)';
+        stateColors[MACHINE_STATES.HS] = colors.proxiwashBrokenColor;
+        stateColors[MACHINE_STATES.ERREUR] = colors.proxiwashErrorColor;
 
         stateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.states.finished');
         stateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
@@ -41,6 +44,7 @@ export default class ProxiwashScreen extends React.Component {
         stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error');
         this.state = {
             refreshing: false,
+            firstLoading: true,
             data: {},
             machinesWatched: [],
         };
@@ -78,7 +82,10 @@ export default class ProxiwashScreen extends React.Component {
     _onRefresh = () => {
         this.setState({refreshing: true});
         this.readData().then(() => {
-            this.setState({refreshing: false});
+            this.setState({
+                refreshing: false,
+                firstLoading: false
+            });
             Toast.show({
                 text: i18n.t('proxiwashScreen.listUpdated'),
                 buttonText: 'OK',
@@ -158,13 +165,12 @@ export default class ProxiwashScreen extends React.Component {
                     alignSelf: 'flex-end',
                     right: 0,
                     width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0,
-                    backgroundColor: '#fff'
+                    backgroundColor: ThemeManager.getInstance().getCurrentThemeVariables().containerBgColor
                 }}>
                 </View>
                 <Left>
-                    <Icon name={section.title === data[0].title ? 'tumble-dryer' : 'washing-machine'}
+                    <CustomMaterialIcon icon={section.title === data[0].title ? 'tumble-dryer' : 'washing-machine'}
-                          type={'MaterialCommunityIcons'}
+                                        fontSize={30}
-                          style={{fontSize: 30, width: 30}}
                     />
                 </Left>
                 <Body>
@@ -214,12 +220,17 @@ export default class ProxiwashScreen extends React.Component {
                 extraData: this.state
             },
         ];
-        console.log(this.state.machinesWatched);
+        const loadingData = [
+            {
+                title: i18n.t('proxiwashScreen.loading'),
+                data: []
+            }
+        ];
         return (
             <Container>
                 <CustomHeader navigation={nav} title={'Proxiwash'}/>
                 <SectionList
-                    sections={data}
+                    sections={this.state.firstLoading ? loadingData : data}
                     keyExtractor={(item) => item.number}
                     refreshControl={
                         <RefreshControl

screens/SettingsScreen.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import {Alert} from 'react-native'
+import {Container, Content, Left, ListItem, Right, Text, List, CheckBox, Button} from "native-base";
-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";
+import {NavigationActions, StackActions} from "react-navigation";
+import CustomMaterialIcon from "../components/CustomMaterialIcon";
 
 
 const nightModeKey = 'nightMode';
@@ -16,8 +17,18 @@ export default class SettingsScreen extends React.Component {
     toggleNightMode() {
         this.setState({nightMode: !this.state.nightMode});
         ThemeManager.getInstance().setNightmode(!this.state.nightMode);
-        Alert.alert(i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.restart'));
+        // Alert.alert(i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.restart'));
+        this.resetStack();
+    }
 
+    resetStack() {
+        const resetAction = StackActions.reset({
+            index: 0,
+            key: null,
+            actions: [NavigationActions.navigate({ routeName: 'Main' })],
+        });
+        this.props.navigation.dispatch(resetAction);
+        this.props.navigation.navigate('Settings');
     }
 
     render() {
@@ -32,12 +43,7 @@ export default class SettingsScreen extends React.Component {
                             onPress={() => this.toggleNightMode()}
                         >
                             <Left>
-                                <Icon
+                                <CustomMaterialIcon icon={'theme-light-dark'} />
-                                    active
-                                    name={'theme-light-dark'}
-                                    type={'MaterialCommunityIcons'}
-                                    style={{color: "#777", fontSize: 26, width: 30}}
-                                />
                                 <Text>
                                     {i18n.t('settingsScreen.nightMode')}
                                 </Text>

translations/en.json

@@ -36,6 +36,7 @@
     "washers": "Washers",
     "min": "min",
     "listUpdated": "Machines state updated",
+    "loading": "Loading...",
     "states": {
       "finished": "FINISHED",
       "ready": "READY",

translations/fr.json

@@ -36,6 +36,7 @@
     "washers": "Lave Linges",
     "min": "min",
     "listUpdated": "Etat des machines mis à jour",
+    "loading": "Chargement...",
     "states": {
       "finished": "TERMINE",
       "ready": "DISPONIBLE",

utils/ThemeManager.js

@@ -53,4 +53,8 @@ export default class ThemeManager {
             return getTheme(platform);
     }
 
+    getCurrentThemeVariables() {
+        return this.getCurrentTheme().variables;
+    }
+
 };