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 { } updateMenuState(isOpen: boolean) { - this.setState({isOpen}); } render() { return ( 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 { +type State = { + shouldShowMenu: boolean, // Prevent menu from showing in transitions between tabs +} + +export default class CustomSideMenu extends React.Component { + + 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 ( - } + + : } isOpen={this.props.isOpen} - onChange={this.props.onChange}> + onChange={this.props.onChange} + onSliding={(percent) => this.onMenuMove(percent)}> {this.props.children} ); 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 { render() { return ( - + -