From 57208ef5542053ce618f76edb9f6b53238548b15 Mon Sep 17 00:00:00 2001
From: keplyx <keplyx@gmail.com>
Date: Thu, 8 Aug 2019 19:45:21 +0200
Subject: [PATCH] Improved colors and fixed side menu showing in tab
 transitions

---
 app.json                                    |  2 +-
 components/BaseContainer.js                 |  3 +-
 components/CustomSideMenu.js                | 31 ++++++++++++++++++---
 components/Sidebar.js                       |  4 +--
 native-base-theme/variables/platform.js     |  2 +-
 native-base-theme/variables/platformDark.js |  1 +
 6 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/app.json b/app.json
index 2bb8b3b..de251fa 100644
--- a/app.json
+++ b/app.json
@@ -15,7 +15,7 @@
     "primaryColor": "#be1522",
     "icon": "./assets/android.icon.png",
     "splash": {
-      "backgroundColor": "#fff",
+      "backgroundColor": "#222222",
       "resizeMode": "contain",
       "image": "./assets/splash.png"
     },
diff --git a/components/BaseContainer.js b/components/BaseContainer.js
index 10de752..01f37c4 100644
--- a/components/BaseContainer.js
+++ b/components/BaseContainer.js
@@ -40,14 +40,13 @@ export default class BaseContainer extends React.Component<Props, State> {
     }
 
     updateMenuState(isOpen: boolean) {
-
         this.setState({isOpen});
     }
 
     render() {
         return (
             <View style={{
-                backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
+                backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
                 width: '100%',
                 height: '100%'
             }}>
diff --git a/components/CustomSideMenu.js b/components/CustomSideMenu.js
index 9d5c4f0..8ebc159 100644
--- a/components/CustomSideMenu.js
+++ b/components/CustomSideMenu.js
@@ -3,21 +3,44 @@
 import * as React from 'react';
 import SideMenu from "react-native-side-menu";
 import SideBar from "./Sidebar";
+import {View} from "react-native";
 
 
 type Props = {
     navigation: Object,
     children: React.Node,
     isOpen: boolean,
-    onChange: Function
+    onChange: Function,
 }
 
-export default class CustomSideMenu extends React.Component<Props> {
+type State = {
+    shouldShowMenu: boolean, // Prevent menu from showing in transitions between tabs
+}
+
+export default class CustomSideMenu extends React.Component<Props, State> {
+
+    state = {
+        shouldShowMenu: this.props.isOpen,
+    };
+
+    // Stop the side menu from being shown while tab transition is playing
+    // => Hide the menu when behind the actual screen
+    onMenuMove(percent: number) {
+        if (percent <= 0)
+            this.setState({shouldShowMenu: false});
+        else if (this.state.shouldShowMenu === false)
+            this.setState({shouldShowMenu: true});
+    }
+
     render() {
         return (
-            <SideMenu menu={<SideBar navigation={this.props.navigation}/>}
+            <SideMenu menu={
+                this.state.shouldShowMenu ?
+                    <SideBar navigation={this.props.navigation}/>
+                    : <View/>}
                       isOpen={this.props.isOpen}
-                      onChange={this.props.onChange}>
+                      onChange={this.props.onChange}
+                      onSliding={(percent) => this.onMenuMove(percent)}>
                 {this.props.children}
             </SideMenu>
         );
diff --git a/components/Sidebar.js b/components/Sidebar.js
index afac00a..0dcf390 100644
--- a/components/Sidebar.js
+++ b/components/Sidebar.js
@@ -5,6 +5,7 @@ import {Dimensions, FlatList, Image, Linking, Platform, StyleSheet} from 'react-
 import {Badge, Container, Content, Left, ListItem, Right, Text} from "native-base";
 import i18n from "i18n-js";
 import CustomMaterialIcon from '../components/CustomMaterialIcon';
+import ThemeManager from "../utils/ThemeManager";
 
 const deviceHeight = Dimensions.get("window").height;
 
@@ -73,13 +74,12 @@ export default class SideBar extends React.Component<Props, State> {
 
     render() {
         return (
-            <Container>
+            <Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
                 <Content
                     bounces={false}
                     style={{flex: 1, top: -1}}
                 >
                     <Image source={drawerCover} style={styles.drawerCover}/>
-
                     <FlatList
                         data={this.dataSet}
                         extraData={this.state}
diff --git a/native-base-theme/variables/platform.js b/native-base-theme/variables/platform.js
index 7691110..991484b 100644
--- a/native-base-theme/variables/platform.js
+++ b/native-base-theme/variables/platform.js
@@ -116,7 +116,7 @@ export default {
 
     //Container
     containerBgColor: "#fff",
-
+    sideMenuBgColor: "#f2f2f2",
     //Date Picker
     datePickerTextColor: "#000",
     datePickerBg: "transparent",
diff --git a/native-base-theme/variables/platformDark.js b/native-base-theme/variables/platformDark.js
index 26c47f6..352dfec 100644
--- a/native-base-theme/variables/platformDark.js
+++ b/native-base-theme/variables/platformDark.js
@@ -116,6 +116,7 @@ export default {
 
     //Container
     containerBgColor: "#222222",
+    sideMenuBgColor: "#1c1c1c",
 
     //Date Picker
     datePickerTextColor: "#fff",