Improved colors and fixed side menu showing in tab transitions

app.json

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

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%'
             }}>

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,
+}
+
+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});
     }
 
-export default class CustomSideMenu extends React.Component<Props> {
     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>
         );

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}

native-base-theme/variables/platform.js

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

native-base-theme/variables/platformDark.js

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