|
@@ -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
|
);
|