Updated react navigation and changed animations

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 = {};
 

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,
+        },
     });
 
 /**

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) {

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"