Various UI improvements and fixes (mainly for ios)

2019-09-17 10:37:52 +02:00 · 2019-09-17 10:37:52 +02:00 · 6371d4a9ff
commit 6371d4a9ff
parent dd4ba0a9fc
9 changed files with 82 additions and 35 deletions
--- a/App.js
+++ b/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
+        )
    }

    /**
--- a/components/BaseContainer.js
+++ b/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}
-                                onChange={(isOpen) => this.updateMenuState(isOpen)}>
+                <CustomSideMenu
+                    navigation={this.props.navigation} isOpen={this.state.isOpen}
+                    onChange={(isOpen) => this.updateMenuState(isOpen)}>
                    <Container>
-                        <CustomHeader navigation={this.props.navigation} title={this.props.headerTitle}
-                                      leftButton={
-                                          <Touchable
-                                              style={{padding: 6}}
-                                              onPress={() => this.toggle()}>
-                                              <CustomMaterialIcon
-                                                  color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                                                  icon="menu"/>
-                                          </Touchable>
-                                      }
-                                      rightButton={this.props.headerRightButton}/>
+                        <CustomHeader
+                            navigation={this.props.navigation} title={this.props.headerTitle}
+                            leftButton={
+                                <Touchable
+                                    style={{padding: 6}}
+                                    onPress={() => this.toggle()}>
+                                    <CustomMaterialIcon
+                                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                                        icon="menu"/>
+                                </Touchable>
+                            }
+                            rightButton={this.props.headerRightButton}
+                            hasTabs={this.props.hasTabs}/>
                        {this.props.children}
                    </Container>
                </CustomSideMenu>
--- a/components/CustomHeader.js
+++ b/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
-                        style={{padding: 6}}
-                        onPress={() => this.props.navigation.navigate('SettingsScreen')}>
-                        <CustomMaterialIcon
-                            color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                            icon="settings"/>
-                    </Touchable>}
+                        <Touchable
+                            style={{padding: 6}}
+                            onPress={() => this.props.navigation.navigate('SettingsScreen')}>
+                            <CustomMaterialIcon
+                                color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                                icon="settings"/>
+                        </Touchable>}
                </Right>
            </Header>);
    }
--- a/components/FetchedDataSectionList.js
+++ b/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()}
-                           headerRightButton={this.getRightButton()}>
+            <BaseContainer
+                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>
                    :
--- a/native-base-theme/variables/platformDark.js
+++ b/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
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/screens/PlanningScreen.js
+++ b/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>
--- a/screens/ProxiwashAboutScreen.js
+++ b/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}/>
-                <Tabs>
+                <CustomHeader
+                    navigation={nav} title={i18n.t('screens.proxiwash')}
+                    hasBackButton={true}
+                    hasTabs={true}/>
+                <Tabs
+                    tabContainerStyle={{
+                        elevation: 0, // Fix for android shadow
+                    }}>
                    <Tab
                        heading={
                            <TabHeading>