From c904cdb2355d571eba075b913a67806f1a787d10 Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 4 Feb 2020 12:23:32 +0100 Subject: [PATCH] Updated react navigation and changed animations --- App.js | 4 ++-- navigation/DrawerNavigator.js | 9 ++++++--- navigation/MainTabNavigator.js | 22 +++++++++++++++++----- package.json | 11 +++++++---- 4 files changed, 32 insertions(+), 14 deletions(-) diff --git a/App.js b/App.js index efda9a7..5de5714 100644 --- a/App.js +++ b/App.js @@ -1,10 +1,9 @@ // @flow import * as React from 'react'; -import {StatusBar, Platform} from 'react-native'; +import {Platform, StatusBar} from 'react-native'; import {Root, StyleProvider} from 'native-base'; import {createAppContainerWithInitialRoute} from './navigation/AppNavigator'; -import ThemeManager from './utils/ThemeManager'; import LocaleManager from './utils/LocaleManager'; import * as Font from 'expo-font'; import {clearThemeCache} from 'native-base-shoutem-theme'; @@ -12,6 +11,7 @@ import AsyncStorageManager from "./utils/AsyncStorageManager"; import CustomIntroSlider from "./components/CustomIntroSlider"; import {AppLoading} from 'expo'; import NotificationsManager from "./utils/NotificationsManager"; +import ThemeManager from './utils/ThemeManager'; type Props = {}; diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index 59f9486..31a489e 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -14,9 +14,8 @@ 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"; +import {createStackNavigator, TransitionPresets} from "react-navigation-stack"; const AboutStack = createStackNavigator({ AboutScreen: {screen: AboutScreen}, @@ -27,7 +26,11 @@ const AboutStack = createStackNavigator({ initialRouteName: "AboutScreen", mode: 'card', headerMode: "none", - transitionConfig: () => fromRight(), + defaultNavigationOptions: { + gestureEnabled: true, + cardOverlayEnabled: true, + ...TransitionPresets.SlideFromRightIOS, + }, }); /** diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index 808262c..d511c8f 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import {createStackNavigator} from 'react-navigation'; +import {createStackNavigator, TransitionPresets} from 'react-navigation-stack'; import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs"; import HomeScreen from '../screens/HomeScreen'; @@ -12,7 +12,6 @@ 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', @@ -25,13 +24,22 @@ const TAB_ICONS = { const ProximoStack = createStackNavigator({ ProximoMainScreen: {screen: ProximoMainScreen}, ProximoListScreen: {screen: ProximoListScreen}, - ProximoAboutScreen: {screen: ProximoAboutScreen}, + ProximoAboutScreen: { + screen: ProximoAboutScreen, + navigationOptions: ({ navigation }) => ({ + ...TransitionPresets.ModalPresentationIOS, + }), + }, }, { initialRouteName: "ProximoMainScreen", mode: 'card', headerMode: "none", - transitionConfig: () => fromRight(), + defaultNavigationOptions: { + gestureEnabled: true, + cardOverlayEnabled: true, + ...TransitionPresets.SlideFromRightIOS, + }, }); const ProxiwashStack = createStackNavigator({ @@ -42,7 +50,11 @@ const ProxiwashStack = createStackNavigator({ initialRouteName: "ProxiwashScreen", mode: 'card', headerMode: "none", - transitionConfig: () => fromRight(), + defaultNavigationOptions: { + gestureEnabled: true, + cardOverlayEnabled: true, + ...TransitionPresets.ModalPresentationIOS, + }, }); function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string) { diff --git a/package.json b/package.json index d9a0a17..fee582a 100644 --- a/package.json +++ b/package.json @@ -22,20 +22,23 @@ "react-native-app-intro-slider": "^3.0.0", "react-native-autolink": "^1.8.1", "react-native-calendars": "^1.212.0", - "react-native-gesture-handler": "~1.5.0", "react-native-material-menu": "^0.6.7", "react-native-modalize": "^1.3.6", "react-native-paper": "^3.5.1", "react-native-platform-touchable": "^1.1.1", "react-native-render-html": "^4.1.2", - "react-native-screens": "2.0.0-alpha.12", "react-native-status-bar-height": "^2.3.1", "react-native-webview": "7.4.3", - "react-navigation": "^3.13.0", + "react-navigation": "^4.1.0", "react-navigation-drawer": "^2.3.3", "react-navigation-material-bottom-tabs": "^1.1.1", + "react-navigation-stack": "^2.1.0", "react-navigation-transitions": "^1.0.12", - "react-native-reanimated": "~1.4.0" + "react-native-gesture-handler": "~1.5.0", + "react-native-reanimated": "~1.4.0", + "react-native-screens": "2.0.0-alpha.12", + "react-native-safe-area-context": "0.6.0", + "@react-native-community/masked-view": "0.1.5" }, "devDependencies": { "babel-preset-expo": "^8.0.0"