Browse Source

Improved colors and fixed side menu showing in tab transitions

keplyx 4 years ago
parent
commit
57208ef554

+ 1
- 1
app.json View File

@@ -15,7 +15,7 @@
15 15
     "primaryColor": "#be1522",
16 16
     "icon": "./assets/android.icon.png",
17 17
     "splash": {
18
-      "backgroundColor": "#fff",
18
+      "backgroundColor": "#222222",
19 19
       "resizeMode": "contain",
20 20
       "image": "./assets/splash.png"
21 21
     },

+ 1
- 2
components/BaseContainer.js View File

@@ -40,14 +40,13 @@ export default class BaseContainer extends React.Component<Props, State> {
40 40
     }
41 41
 
42 42
     updateMenuState(isOpen: boolean) {
43
-
44 43
         this.setState({isOpen});
45 44
     }
46 45
 
47 46
     render() {
48 47
         return (
49 48
             <View style={{
50
-                backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
49
+                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
51 50
                 width: '100%',
52 51
                 height: '100%'
53 52
             }}>

+ 27
- 4
components/CustomSideMenu.js View File

@@ -3,21 +3,44 @@
3 3
 import * as React from 'react';
4 4
 import SideMenu from "react-native-side-menu";
5 5
 import SideBar from "./Sidebar";
6
+import {View} from "react-native";
6 7
 
7 8
 
8 9
 type Props = {
9 10
     navigation: Object,
10 11
     children: React.Node,
11 12
     isOpen: boolean,
12
-    onChange: Function
13
+    onChange: Function,
13 14
 }
14 15
 
15
-export default class CustomSideMenu extends React.Component<Props> {
16
+type State = {
17
+    shouldShowMenu: boolean, // Prevent menu from showing in transitions between tabs
18
+}
19
+
20
+export default class CustomSideMenu extends React.Component<Props, State> {
21
+
22
+    state = {
23
+        shouldShowMenu: this.props.isOpen,
24
+    };
25
+
26
+    // Stop the side menu from being shown while tab transition is playing
27
+    // => Hide the menu when behind the actual screen
28
+    onMenuMove(percent: number) {
29
+        if (percent <= 0)
30
+            this.setState({shouldShowMenu: false});
31
+        else if (this.state.shouldShowMenu === false)
32
+            this.setState({shouldShowMenu: true});
33
+    }
34
+
16 35
     render() {
17 36
         return (
18
-            <SideMenu menu={<SideBar navigation={this.props.navigation}/>}
37
+            <SideMenu menu={
38
+                this.state.shouldShowMenu ?
39
+                    <SideBar navigation={this.props.navigation}/>
40
+                    : <View/>}
19 41
                       isOpen={this.props.isOpen}
20
-                      onChange={this.props.onChange}>
42
+                      onChange={this.props.onChange}
43
+                      onSliding={(percent) => this.onMenuMove(percent)}>
21 44
                 {this.props.children}
22 45
             </SideMenu>
23 46
         );

+ 2
- 2
components/Sidebar.js View File

@@ -5,6 +5,7 @@ import {Dimensions, FlatList, Image, Linking, Platform, StyleSheet} from 'react-
5 5
 import {Badge, Container, Content, Left, ListItem, Right, Text} from "native-base";
6 6
 import i18n from "i18n-js";
7 7
 import CustomMaterialIcon from '../components/CustomMaterialIcon';
8
+import ThemeManager from "../utils/ThemeManager";
8 9
 
9 10
 const deviceHeight = Dimensions.get("window").height;
10 11
 
@@ -73,13 +74,12 @@ export default class SideBar extends React.Component<Props, State> {
73 74
 
74 75
     render() {
75 76
         return (
76
-            <Container>
77
+            <Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
77 78
                 <Content
78 79
                     bounces={false}
79 80
                     style={{flex: 1, top: -1}}
80 81
                 >
81 82
                     <Image source={drawerCover} style={styles.drawerCover}/>
82
-
83 83
                     <FlatList
84 84
                         data={this.dataSet}
85 85
                         extraData={this.state}

+ 1
- 1
native-base-theme/variables/platform.js View File

@@ -116,7 +116,7 @@ export default {
116 116
 
117 117
     //Container
118 118
     containerBgColor: "#fff",
119
-
119
+    sideMenuBgColor: "#f2f2f2",
120 120
     //Date Picker
121 121
     datePickerTextColor: "#000",
122 122
     datePickerBg: "transparent",

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

@@ -116,6 +116,7 @@ export default {
116 116
 
117 117
     //Container
118 118
     containerBgColor: "#222222",
119
+    sideMenuBgColor: "#1c1c1c",
119 120
 
120 121
     //Date Picker
121 122
     datePickerTextColor: "#fff",

Loading…
Cancel
Save