diff --git a/components/BaseContainer.js b/components/BaseContainer.js index 7c97a98..39ca881 100644 --- a/components/BaseContainer.js +++ b/components/BaseContainer.js @@ -3,7 +3,6 @@ import * as React from 'react'; import {Container} from "native-base"; import CustomHeader from "./CustomHeader"; -import CustomSideMenu from "./CustomSideMenu"; import CustomMaterialIcon from "./CustomMaterialIcon"; import {Platform, StatusBar, View} from "react-native"; import ThemeManager from "../utils/ThemeManager"; @@ -25,7 +24,6 @@ type Props = { } type State = { - isOpen: boolean, isHeaderVisible: boolean } @@ -43,20 +41,12 @@ export default class BaseContainer extends React.Component { willBlurSubscription: function; willFocusSubscription: function; state = { - isOpen: false, isHeaderVisible: true, }; toggle() { - this.setState({ - isOpen: !this.state.isOpen, - }); + this.props.navigation.toggleDrawer(); } - - updateMenuState(isOpen: boolean) { - this.setState({isOpen}); - } - /** * Register for blur event to close side menu on screen change */ @@ -87,7 +77,6 @@ export default class BaseContainer extends React.Component { () => { if (this.props.enableRotation) ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT); - this.setState({isOpen: false}); } ); } @@ -128,20 +117,6 @@ export default class BaseContainer extends React.Component { render() { - return ( - - {this.props.hasSideMenu ? - this.updateMenuState(isOpen)}> - {this.getMainContainer()} - : - this.getMainContainer()} - - ); + return (this.getMainContainer()); } } diff --git a/components/CustomSideMenu.js b/components/CustomSideMenu.js deleted file mode 100644 index 8ebc159..0000000 --- a/components/CustomSideMenu.js +++ /dev/null @@ -1,48 +0,0 @@ -// @flow - -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, -} - -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} - onSliding={(percent) => this.onMenuMove(percent)}> - {this.props.children} - - ); - } -} diff --git a/navigation/AppNavigator.js b/navigation/AppNavigator.js index c3d2426..e43a316 100644 --- a/navigation/AppNavigator.js +++ b/navigation/AppNavigator.js @@ -1,56 +1,14 @@ // @flow -import {createAppContainer, createStackNavigator} from 'react-navigation'; -import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigator'; -import SettingsScreen from '../screens/SettingsScreen'; -import AboutScreen from '../screens/About/AboutScreen'; -import ProximoListScreen from '../screens/Proximo/ProximoListScreen'; -import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; -import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen'; -import ProximoAboutScreen from '../screens/Proximo/ProximoAboutScreen'; -import SelfMenuScreen from '../screens/SelfMenuScreen'; -import TutorInsaScreen from "../screens/Websites/TutorInsaScreen"; -import AmicaleScreen from "../screens/Websites/AmicaleScreen"; -import WiketudScreen from "../screens/Websites/WiketudScreen"; -import ElusEtudScreen from "../screens/Websites/ElusEtudScreen"; -import BlueMindScreen from "../screens/Websites/BlueMindScreen"; -import EntScreen from "../screens/Websites/EntScreen"; -import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen"; -import DebugScreen from '../screens/DebugScreen'; -import {fromRight} from "react-navigation-transitions"; +import {createAppContainer} from 'react-navigation'; +import {createDrawerNavigatorWithInitialRoute} from './DrawerNavigator'; /** * Create a stack navigator using the drawer to handle navigation between screens */ function createAppContainerWithInitialRoute(initialRoute: string) { - return createAppContainer( - createStackNavigator({ - Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute), - // Drawer: MainDrawerNavigator, - ProximoListScreen: {screen: ProximoListScreen}, - SettingsScreen: {screen: SettingsScreen}, - AboutScreen: {screen: AboutScreen}, - AboutDependenciesScreen: {screen: AboutDependenciesScreen}, - SelfMenuScreen: {screen: SelfMenuScreen}, - TutorInsaScreen: {screen: TutorInsaScreen}, - AmicaleScreen: {screen: AmicaleScreen}, - WiketudScreen: {screen: WiketudScreen}, - ElusEtudScreen: {screen: ElusEtudScreen}, - BlueMindScreen: {screen: BlueMindScreen}, - EntScreen: {screen: EntScreen}, - AvailableRoomScreen: {screen: AvailableRoomScreen}, - ProxiwashAboutScreen: {screen: ProxiwashAboutScreen}, - ProximoAboutScreen: {screen: ProximoAboutScreen}, - DebugScreen: {screen: DebugScreen}, - }, - { - initialRouteName: "Main", - mode: 'card', - headerMode: "none", - transitionConfig: () => fromRight(), - }) - ); + return createAppContainer(createDrawerNavigatorWithInitialRoute(initialRoute)); } export {createAppContainerWithInitialRoute}; diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js new file mode 100644 index 0000000..59f9486 --- /dev/null +++ b/navigation/DrawerNavigator.js @@ -0,0 +1,58 @@ +// @flow + +import { createDrawerNavigator } from 'react-navigation-drawer'; +import {createMaterialBottomTabNavigatorWithInitialRoute} from './MainTabNavigator'; +import SettingsScreen from '../screens/SettingsScreen'; +import AboutScreen from '../screens/About/AboutScreen'; +import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; +import SelfMenuScreen from '../screens/SelfMenuScreen'; +import TutorInsaScreen from "../screens/Websites/TutorInsaScreen"; +import AmicaleScreen from "../screens/Websites/AmicaleScreen"; +import WiketudScreen from "../screens/Websites/WiketudScreen"; +import ElusEtudScreen from "../screens/Websites/ElusEtudScreen"; +import BlueMindScreen from "../screens/Websites/BlueMindScreen"; +import EntScreen from "../screens/Websites/EntScreen"; +import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen"; +import DebugScreen from '../screens/DebugScreen'; +import {fromRight} from "react-navigation-transitions"; +import Sidebar from "../components/Sidebar"; +import {createStackNavigator} from "react-navigation"; + +const AboutStack = createStackNavigator({ + AboutScreen: {screen: AboutScreen}, + AboutDependenciesScreen: {screen: AboutDependenciesScreen}, + DebugScreen: {screen: DebugScreen}, + }, + { + initialRouteName: "AboutScreen", + mode: 'card', + headerMode: "none", + transitionConfig: () => fromRight(), + }); + +/** + * Creates the drawer navigation stack + */ +function createDrawerNavigatorWithInitialRoute(initialRoute: string) { + return createDrawerNavigator({ + Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute), + SettingsScreen: {screen: SettingsScreen}, + AboutScreen: AboutStack, + SelfMenuScreen: {screen: SelfMenuScreen}, + TutorInsaScreen: {screen: TutorInsaScreen}, + AmicaleScreen: {screen: AmicaleScreen}, + WiketudScreen: {screen: WiketudScreen}, + ElusEtudScreen: {screen: ElusEtudScreen}, + BlueMindScreen: {screen: BlueMindScreen}, + EntScreen: {screen: EntScreen}, + AvailableRoomScreen: {screen: AvailableRoomScreen}, + }, { + contentComponent: Sidebar, + initialRouteName: 'Main', + backBehavior: 'initialRoute', + drawerType: 'front', + useNativeAnimations: true, + }); +} + +export {createDrawerNavigatorWithInitialRoute}; diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index cb0348c..808262c 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -1,13 +1,18 @@ import * as React from 'react'; +import {createStackNavigator} from 'react-navigation'; import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs"; import HomeScreen from '../screens/HomeScreen'; import PlanningScreen from '../screens/PlanningScreen'; import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen'; +import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen'; import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen'; +import ProximoListScreen from "../screens/Proximo/ProximoListScreen"; +import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen"; import PlanexScreen from '../screens/Websites/PlanexScreen'; import CustomMaterialIcon from "../components/CustomMaterialIcon"; import ThemeManager from "../utils/ThemeManager"; +import {fromRight} from "react-navigation-transitions"; const TAB_ICONS = { Home: 'triangle', @@ -17,12 +22,35 @@ const TAB_ICONS = { Planex: 'timetable', }; +const ProximoStack = createStackNavigator({ + ProximoMainScreen: {screen: ProximoMainScreen}, + ProximoListScreen: {screen: ProximoListScreen}, + ProximoAboutScreen: {screen: ProximoAboutScreen}, + }, + { + initialRouteName: "ProximoMainScreen", + mode: 'card', + headerMode: "none", + transitionConfig: () => fromRight(), + }); + +const ProxiwashStack = createStackNavigator({ + ProxiwashScreen: {screen: ProxiwashScreen}, + ProxiwashAboutScreen: {screen: ProxiwashAboutScreen}, + }, + { + initialRouteName: "ProxiwashScreen", + mode: 'card', + headerMode: "none", + transitionConfig: () => fromRight(), + }); + function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string) { return createMaterialBottomTabNavigator({ Home: {screen: HomeScreen}, - Planning: {screen: PlanningScreen,}, - Proxiwash: {screen: ProxiwashScreen,}, - Proximo: {screen: ProximoMainScreen,}, + Planning: {screen: PlanningScreen}, + Proxiwash: ProxiwashStack, + Proximo: ProximoStack, Planex: { screen: PlanexScreen, navigationOptions: ({navigation}) => { diff --git a/package.json b/package.json index ddfdff3..d9a0a17 100644 --- a/package.json +++ b/package.json @@ -29,12 +29,13 @@ "react-native-platform-touchable": "^1.1.1", "react-native-render-html": "^4.1.2", "react-native-screens": "2.0.0-alpha.12", - "react-native-side-menu": "^1.1.3", "react-native-status-bar-height": "^2.3.1", "react-native-webview": "7.4.3", "react-navigation": "^3.13.0", + "react-navigation-drawer": "^2.3.3", "react-navigation-material-bottom-tabs": "^1.1.1", - "react-navigation-transitions": "^1.0.12" + "react-navigation-transitions": "^1.0.12", + "react-native-reanimated": "~1.4.0" }, "devDependencies": { "babel-preset-expo": "^8.0.0"