Various UI improvements and fixes (mainly for ios)

App.js

@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from 'react';
+import {StatusBar, Platform } from 'react-native';
 import {Root, StyleProvider} from 'native-base';
 import {createAppContainerWithInitialRoute} from './navigation/AppNavigator';
 import ThemeManager from './utils/ThemeManager';
@@ -45,9 +46,23 @@ export default class App extends React.Component<Props, State> {
         this.setState({
             currentTheme: ThemeManager.getCurrentTheme()
         });
+        this.setupStatusBar();
         clearThemeCache();
     }
 
+    setupStatusBar() {
+        if (Platform.OS === 'ios') {
+            console.log(ThemeManager.getNightMode());
+            if (ThemeManager.getNightMode()) {
+                console.log('setting light mode');
+                StatusBar.setBarStyle('light-content', true);
+            } else {
+                console.log('setting dark mode');
+                StatusBar.setBarStyle('dark-content', true);
+            }
+        }
+    }
+
     /**
      * Callback when user ends the intro. Save in preferences to avaoid showing back the introSlides
      */
@@ -70,7 +85,7 @@ export default class App extends React.Component<Props, State> {
         await AsyncStorageManager.getInstance().loadPreferences();
         ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
         await NotificationsManager.initExpoToken();
-        console.log(AsyncStorageManager.getInstance().preferences.expoToken.current);
+        // console.log(AsyncStorageManager.getInstance().preferences.expoToken.current);
     }
 
     onLoadFinished() {
@@ -83,6 +98,10 @@ export default class App extends React.Component<Props, State> {
             showUpdate: AsyncStorageManager.getInstance().preferences.showUpdate1.current === '1'
             // showIntro: true
         });
+        // Status bar goes dark if set too fast
+        setTimeout(this.setupStatusBar,
+            1000
+        )
     }
 
     /**

components/BaseContainer.js

@@ -14,7 +14,8 @@ type Props = {
     navigation: Object,
     headerTitle: string,
     headerRightButton: React.Node,
-    children: React.Node
+    children: React.Node,
+    hasTabs: boolean,
 }
 
 type State = {
@@ -27,7 +28,8 @@ export default class BaseContainer extends React.Component<Props, State> {
     willBlurSubscription: function;
 
     static defaultProps = {
-        headerRightButton: <View/>
+        headerRightButton: <View/>,
+        hasTabs: false,
     };
 
 
@@ -72,20 +74,23 @@ export default class BaseContainer extends React.Component<Props, State> {
                 width: '100%',
                 height: '100%'
             }}>
-                <CustomSideMenu navigation={this.props.navigation} isOpen={this.state.isOpen}
+                <CustomSideMenu
-                                onChange={(isOpen) => this.updateMenuState(isOpen)}>
+                    navigation={this.props.navigation} isOpen={this.state.isOpen}
+                    onChange={(isOpen) => this.updateMenuState(isOpen)}>
                     <Container>
-                        <CustomHeader navigation={this.props.navigation} title={this.props.headerTitle}
+                        <CustomHeader
-                                      leftButton={
+                            navigation={this.props.navigation} title={this.props.headerTitle}
-                                          <Touchable
+                            leftButton={
-                                              style={{padding: 6}}
+                                <Touchable
-                                              onPress={() => this.toggle()}>
+                                    style={{padding: 6}}
-                                              <CustomMaterialIcon
+                                    onPress={() => this.toggle()}>
-                                                  color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                                    <CustomMaterialIcon
-                                                  icon="menu"/>
+                                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                                          </Touchable>
+                                        icon="menu"/>
-                                      }
+                                </Touchable>
-                                      rightButton={this.props.headerRightButton}/>
+                            }
+                            rightButton={this.props.headerRightButton}
+                            hasTabs={this.props.hasTabs}/>
                         {this.props.children}
                     </Container>
                 </CustomSideMenu>

components/CustomHeader.js

@@ -50,7 +50,8 @@ export default class CustomHeader extends React.Component<Props> {
             button = this.props.leftButton;
 
         return (
-            <Header style={styles.header}>
+            <Header style={styles.header}
+                    hasTabs={this.props.hasTabs}>
                 <Left>
                     {button}
                 </Left>
@@ -60,13 +61,13 @@ export default class CustomHeader extends React.Component<Props> {
                 <Right>
                     {this.props.rightButton}
                     {this.props.hasBackButton ? <View/> :
-                    <Touchable
+                        <Touchable
-                        style={{padding: 6}}
+                            style={{padding: 6}}
-                        onPress={() => this.props.navigation.navigate('SettingsScreen')}>
+                            onPress={() => this.props.navigation.navigate('SettingsScreen')}>
-                        <CustomMaterialIcon
+                            <CustomMaterialIcon
-                            color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                                color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                            icon="settings"/>
+                                icon="settings"/>
-                    </Touchable>}
+                        </Touchable>}
                 </Right>
             </Header>);
     }

components/FetchedDataSectionList.js

@@ -342,10 +342,16 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         const nav = this.props.navigation;
         const dataset = this.createDataset(this.state.fetchedData);
         return (
-            <BaseContainer navigation={nav} headerTitle={this.getHeaderTranslation()}
+            <BaseContainer
-                           headerRightButton={this.getRightButton()}>
+                navigation={nav} headerTitle={this.getHeaderTranslation()}
+                headerRightButton={this.getRightButton()}
+                hasTabs={this.hasTabs()}>
                 {this.hasTabs() ?
-                    <Tabs>
+                    <Tabs
+                        tabContainerStyle={{
+                            elevation: 0, // Fix for android shadow
+                        }}
+                    >
                         {this.getTabbedView(dataset)}
                     </Tabs>
                     :

native-base-theme/variables/platformDark.js

@@ -158,7 +158,7 @@ export default {
     searchBarHeight: platform === "ios" ? 30 : 40,
     searchBarInputHeight: platform === "ios" ? 30 : 50,
     toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
-    toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
+    toolbarDefaultBorder: platform === "ios" ? "#3f3f3f" : "#ba1f0f",
     iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
     get statusBarColor() {
         return color(this.toolbarDefaultBg)
@@ -199,7 +199,7 @@ export default {
 
     // List
     listBg: "transparent",
-    listBorderColor: "#727272",
+    listBorderColor: "#3e3e3e",
     listDividerBg: "#f4f4f4",
     listBtnUnderlayColor: "#DDD",
     listItemPadding: platform === "ios" ? 10 : 12,
@@ -231,10 +231,10 @@ export default {
     inverseSpinnerColor: "#1A191B",
 
     // Tab
-    tabDefaultBg: platform === "ios" ? "#2b2b2b" : "#be1522",
+    tabDefaultBg: platform === "ios" ? "#333333" : "#be1522",
     topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
     topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
-    topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
+    topTabBarBorderColor: platform === "ios" ? "#3f3f3f" : "#fff",
     topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
 
     // Tabs

package-lock.json

@@ -1042,6 +1042,11 @@
       "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-2.0.10.tgz",
       "integrity": "sha512-NrIzyLe0eSbhgMnHl2QdSEhaA7yXh6p9jzMomfUa//hoTXE+xbObGDdiWWSQm2bnXnZJg8XCU3AB9qzvqcuLnA=="
     },
+    "@react-native-community/status-bar": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@react-native-community/status-bar/-/status-bar-1.0.3.tgz",
+      "integrity": "sha512-5gwhG1gBTXqgSi/e9DbraBQBCtUtTCSrI9kuwEpwLOCa/pKLIyxQG/HM96ZjvytbZOTZXeaTiKtqLFvYNYSx3A=="
+    },
     "@react-navigation/core": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-3.4.2.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^10.0.2",
+    "@react-native-community/status-bar": "^1.0.3",
     "@shoutem/theme": "^0.11.3",
     "expo": "^33.0.7",
     "expo-font": "^5.0.1",

screens/PlanningScreen.js

@@ -128,9 +128,13 @@ export default class PlanningScreen extends React.Component<Props, State> {
                         // Surround description with div to allow text styling if the description is not html
                         <HTML html={"<div>" + this.state.modalCurrentDisplayItem.description + "</div>"}
                               tagsStyles={{
-                                  p: {color: ThemeManager.getCurrentThemeVariables().textColor},
+                                  p: {
+                                      color: ThemeManager.getCurrentThemeVariables().textColor,
+                                      fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase
+                                  },
                                   div: {color: ThemeManager.getCurrentThemeVariables().textColor}
-                              }}/>
+                              }}
+                              onLinkPress={(event, link) => openWebLink(link)}/>
                         : <View/>}
                 </Content>
             </View>

screens/ProxiwashAboutScreen.js

@@ -29,8 +29,14 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
         const nav = this.props.navigation;
         return (
             <Container>
-                <CustomHeader navigation={nav} title={i18n.t('screens.proxiwash')} hasBackButton={true}/>
+                <CustomHeader
-                <Tabs>
+                    navigation={nav} title={i18n.t('screens.proxiwash')}
+                    hasBackButton={true}
+                    hasTabs={true}/>
+                <Tabs
+                    tabContainerStyle={{
+                        elevation: 0, // Fix for android shadow
+                    }}>
                     <Tab
                         heading={
                             <TabHeading>