Browse Source

Various UI improvements and fixes (mainly for ios)

keplyx 2 years ago
parent
commit
6371d4a9ff

+ 20
- 1
App.js View File

@@ -1,6 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
+import {StatusBar, Platform } from 'react-native';
4 5
 import {Root, StyleProvider} from 'native-base';
5 6
 import {createAppContainerWithInitialRoute} from './navigation/AppNavigator';
6 7
 import ThemeManager from './utils/ThemeManager';
@@ -45,9 +46,23 @@ export default class App extends React.Component<Props, State> {
45 46
         this.setState({
46 47
             currentTheme: ThemeManager.getCurrentTheme()
47 48
         });
49
+        this.setupStatusBar();
48 50
         clearThemeCache();
49 51
     }
50 52
 
53
+    setupStatusBar() {
54
+        if (Platform.OS === 'ios') {
55
+            console.log(ThemeManager.getNightMode());
56
+            if (ThemeManager.getNightMode()) {
57
+                console.log('setting light mode');
58
+                StatusBar.setBarStyle('light-content', true);
59
+            } else {
60
+                console.log('setting dark mode');
61
+                StatusBar.setBarStyle('dark-content', true);
62
+            }
63
+        }
64
+    }
65
+
51 66
     /**
52 67
      * Callback when user ends the intro. Save in preferences to avaoid showing back the introSlides
53 68
      */
@@ -70,7 +85,7 @@ export default class App extends React.Component<Props, State> {
70 85
         await AsyncStorageManager.getInstance().loadPreferences();
71 86
         ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
72 87
         await NotificationsManager.initExpoToken();
73
-        console.log(AsyncStorageManager.getInstance().preferences.expoToken.current);
88
+        // console.log(AsyncStorageManager.getInstance().preferences.expoToken.current);
74 89
     }
75 90
 
76 91
     onLoadFinished() {
@@ -83,6 +98,10 @@ export default class App extends React.Component<Props, State> {
83 98
             showUpdate: AsyncStorageManager.getInstance().preferences.showUpdate1.current === '1'
84 99
             // showIntro: true
85 100
         });
101
+        // Status bar goes dark if set too fast
102
+        setTimeout(this.setupStatusBar,
103
+            1000
104
+        )
86 105
     }
87 106
 
88 107
     /**

+ 20
- 15
components/BaseContainer.js View File

@@ -14,7 +14,8 @@ type Props = {
14 14
     navigation: Object,
15 15
     headerTitle: string,
16 16
     headerRightButton: React.Node,
17
-    children: React.Node
17
+    children: React.Node,
18
+    hasTabs: boolean,
18 19
 }
19 20
 
20 21
 type State = {
@@ -27,7 +28,8 @@ export default class BaseContainer extends React.Component<Props, State> {
27 28
     willBlurSubscription: function;
28 29
 
29 30
     static defaultProps = {
30
-        headerRightButton: <View/>
31
+        headerRightButton: <View/>,
32
+        hasTabs: false,
31 33
     };
32 34
 
33 35
 
@@ -72,20 +74,23 @@ export default class BaseContainer extends React.Component<Props, State> {
72 74
                 width: '100%',
73 75
                 height: '100%'
74 76
             }}>
75
-                <CustomSideMenu navigation={this.props.navigation} isOpen={this.state.isOpen}
76
-                                onChange={(isOpen) => this.updateMenuState(isOpen)}>
77
+                <CustomSideMenu
78
+                    navigation={this.props.navigation} isOpen={this.state.isOpen}
79
+                    onChange={(isOpen) => this.updateMenuState(isOpen)}>
77 80
                     <Container>
78
-                        <CustomHeader navigation={this.props.navigation} title={this.props.headerTitle}
79
-                                      leftButton={
80
-                                          <Touchable
81
-                                              style={{padding: 6}}
82
-                                              onPress={() => this.toggle()}>
83
-                                              <CustomMaterialIcon
84
-                                                  color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
85
-                                                  icon="menu"/>
86
-                                          </Touchable>
87
-                                      }
88
-                                      rightButton={this.props.headerRightButton}/>
81
+                        <CustomHeader
82
+                            navigation={this.props.navigation} title={this.props.headerTitle}
83
+                            leftButton={
84
+                                <Touchable
85
+                                    style={{padding: 6}}
86
+                                    onPress={() => this.toggle()}>
87
+                                    <CustomMaterialIcon
88
+                                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
89
+                                        icon="menu"/>
90
+                                </Touchable>
91
+                            }
92
+                            rightButton={this.props.headerRightButton}
93
+                            hasTabs={this.props.hasTabs}/>
89 94
                         {this.props.children}
90 95
                     </Container>
91 96
                 </CustomSideMenu>

+ 9
- 8
components/CustomHeader.js View File

@@ -50,7 +50,8 @@ export default class CustomHeader extends React.Component<Props> {
50 50
             button = this.props.leftButton;
51 51
 
52 52
         return (
53
-            <Header style={styles.header}>
53
+            <Header style={styles.header}
54
+                    hasTabs={this.props.hasTabs}>
54 55
                 <Left>
55 56
                     {button}
56 57
                 </Left>
@@ -60,13 +61,13 @@ export default class CustomHeader extends React.Component<Props> {
60 61
                 <Right>
61 62
                     {this.props.rightButton}
62 63
                     {this.props.hasBackButton ? <View/> :
63
-                    <Touchable
64
-                        style={{padding: 6}}
65
-                        onPress={() => this.props.navigation.navigate('SettingsScreen')}>
66
-                        <CustomMaterialIcon
67
-                            color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
68
-                            icon="settings"/>
69
-                    </Touchable>}
64
+                        <Touchable
65
+                            style={{padding: 6}}
66
+                            onPress={() => this.props.navigation.navigate('SettingsScreen')}>
67
+                            <CustomMaterialIcon
68
+                                color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
69
+                                icon="settings"/>
70
+                        </Touchable>}
70 71
                 </Right>
71 72
             </Header>);
72 73
     }

+ 9
- 3
components/FetchedDataSectionList.js View File

@@ -342,10 +342,16 @@ export default class FetchedDataSectionList extends React.Component<Props, State
342 342
         const nav = this.props.navigation;
343 343
         const dataset = this.createDataset(this.state.fetchedData);
344 344
         return (
345
-            <BaseContainer navigation={nav} headerTitle={this.getHeaderTranslation()}
346
-                           headerRightButton={this.getRightButton()}>
345
+            <BaseContainer
346
+                navigation={nav} headerTitle={this.getHeaderTranslation()}
347
+                headerRightButton={this.getRightButton()}
348
+                hasTabs={this.hasTabs()}>
347 349
                 {this.hasTabs() ?
348
-                    <Tabs>
350
+                    <Tabs
351
+                        tabContainerStyle={{
352
+                            elevation: 0, // Fix for android shadow
353
+                        }}
354
+                    >
349 355
                         {this.getTabbedView(dataset)}
350 356
                     </Tabs>
351 357
                     :

+ 4
- 4
native-base-theme/variables/platformDark.js View File

@@ -158,7 +158,7 @@ export default {
158 158
     searchBarHeight: platform === "ios" ? 30 : 40,
159 159
     searchBarInputHeight: platform === "ios" ? 30 : 50,
160 160
     toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
161
-    toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
161
+    toolbarDefaultBorder: platform === "ios" ? "#3f3f3f" : "#ba1f0f",
162 162
     iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
163 163
     get statusBarColor() {
164 164
         return color(this.toolbarDefaultBg)
@@ -199,7 +199,7 @@ export default {
199 199
 
200 200
     // List
201 201
     listBg: "transparent",
202
-    listBorderColor: "#727272",
202
+    listBorderColor: "#3e3e3e",
203 203
     listDividerBg: "#f4f4f4",
204 204
     listBtnUnderlayColor: "#DDD",
205 205
     listItemPadding: platform === "ios" ? 10 : 12,
@@ -231,10 +231,10 @@ export default {
231 231
     inverseSpinnerColor: "#1A191B",
232 232
 
233 233
     // Tab
234
-    tabDefaultBg: platform === "ios" ? "#2b2b2b" : "#be1522",
234
+    tabDefaultBg: platform === "ios" ? "#333333" : "#be1522",
235 235
     topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
236 236
     topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
237
-    topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
237
+    topTabBarBorderColor: platform === "ios" ? "#3f3f3f" : "#fff",
238 238
     topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
239 239
 
240 240
     // Tabs

+ 5
- 0
package-lock.json View File

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

+ 1
- 0
package.json View File

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

+ 6
- 2
screens/PlanningScreen.js View File

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

+ 8
- 2
screens/ProxiwashAboutScreen.js View File

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

Loading…
Cancel
Save