App.js

@@ -1,14 +1,15 @@
 // @flow
 
 import * as React from 'react';
-import {Platform, StatusBar, YellowBox} from 'react-native';
+import {Platform, StatusBar, View, YellowBox} from 'react-native';
 import LocaleManager from './src/managers/LocaleManager';
 import AsyncStorageManager from "./src/managers/AsyncStorageManager";
 import CustomIntroSlider from "./src/components/Overrides/CustomIntroSlider";
-import {AppLoading} from 'expo';
+import {SplashScreen} from 'expo';
 import type {CustomTheme} from "./src/managers/ThemeManager";
 import ThemeManager from './src/managers/ThemeManager';
 import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
 import DrawerNavigator from './src/navigation/DrawerNavigator';
 import {initExpoToken} from "./src/utils/Notifications";
 import {Provider as PaperProvider} from 'react-native-paper';
@@ -17,11 +18,7 @@ import Update from "./src/constants/Update";
 import ConnectionManager from "./src/managers/ConnectionManager";
 import URLHandler from "./src/utils/URLHandler";
 import {setSafeBounceHeight} from "react-navigation-collapsible";
-import {enableScreens} from 'react-native-screens';
+import * as Animatable from 'react-native-animatable';
-
-// Native optimizations https://reactnavigation.org/docs/react-native-screens
-enableScreens();
-
 
 YellowBox.ignoreWarnings([ // collapsible headers cause this warning, just ignore as it is not an issue
     'Non-serializable values were found in the navigation state',
@@ -37,6 +34,8 @@ type State = {
     currentTheme: CustomTheme | null,
 };
 
+const Stack = createStackNavigator();
+
 export default class App extends React.Component<Props, State> {
 
     state = {
@@ -60,7 +59,7 @@ export default class App extends React.Component<Props, State> {
     constructor() {
         super();
         LocaleManager.initTranslations();
-        // SplashScreen.preventAutoHide();
+        SplashScreen.preventAutoHide();
         this.navigatorRef = React.createRef();
         this.defaultHomeRoute = null;
         this.defaultHomeData = {};
@@ -68,9 +67,6 @@ export default class App extends React.Component<Props, State> {
         this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
         this.urlHandler.listen();
         setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);
-        this.loadAssetsAsync().then(() => {
-            this.onLoadFinished();
-        });
     }
 
     /**
@@ -138,12 +134,18 @@ export default class App extends React.Component<Props, State> {
         this.storageManager.savePref(this.storageManager.preferences.showAprilFoolsStart.key, '0');
     };
 
+    componentDidMount() {
+        this.loadAssetsAsync().then(() => {
+            this.onLoadFinished();
+        });
+    }
+
     /**
      * Loads every async data
      *
      * @returns {Promise<void>}
      */
-    loadAssetsAsync = async () => {
+    async loadAssetsAsync() {
         await this.storageManager.loadPreferences();
         await initExpoToken();
         try {
@@ -159,8 +161,7 @@ export default class App extends React.Component<Props, State> {
         // Only show intro if this is the first time starting the app
         this.createDrawerNavigator = () => <DrawerNavigator
             defaultHomeRoute={this.defaultHomeRoute}
-            defaultHomeData={this.defaultHomeData}
+            defaultHomeData={this.defaultHomeData}/>;
-        />;
         ThemeManager.getInstance().setUpdateThemeCallback(this.onUpdateTheme);
         // Status bar goes dark if set too fast on ios
         if (Platform.OS === 'ios')
@@ -181,7 +182,7 @@ export default class App extends React.Component<Props, State> {
      */
     render() {
         if (this.state.isLoading) {
-            return <AppLoading/>;
+            return null;
         } else if (this.state.showIntro || this.state.showUpdate || this.state.showAprilFools) {
             return <CustomIntroSlider
                 onDone={this.onIntroDone}
@@ -191,12 +192,27 @@ export default class App extends React.Component<Props, State> {
         } else {
             return (
                 <PaperProvider theme={this.state.currentTheme}>
+                    <View style={{
+                        flex: 1,
+                        backgroundColor: ThemeManager.getCurrentTheme().colors.background
+                    }}>
+                        <Animatable.View
+                            style={{flex: 1,}}
+                            animation={"fadeIn"}
+                            duration={1000}
+                            useNativeDriver
+                            onAnimationBegin={() => {
+                                // delay the hiding even 1ms is enough to prevent flickering
+                                setTimeout(() => SplashScreen.hide(), 1);
+                            }}
+                        >
                             <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
-                        <DrawerNavigator
+                                <Stack.Navigator headerMode="none">
-                            defaultHomeRoute={this.defaultHomeRoute}
+                                    <Stack.Screen name="Root" component={this.createDrawerNavigator}/>
-                            defaultHomeData={this.defaultHomeData}
+                                </Stack.Navigator>
-                        />
                             </NavigationContainer>
+                        </Animatable.View>
+                    </View>
                 </PaperProvider>
             );
         }

src/components/Animations/AnimatedBottomBar.js

@@ -59,9 +59,9 @@ class AnimatedBottomBar extends React.Component<Props, State> {
     onHideChange = (shouldHide: boolean) => {
         if (this.ref.current != null) {
             if (shouldHide)
-                this.ref.current.fadeOutDown(500);
+                this.ref.current.bounceOutDown(1000);
             else
-                this.ref.current.fadeInUp(500);
+                this.ref.current.bounceInUp(1000);
         }
     }
 
@@ -105,6 +105,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
                             iterationDelay={500}
                             iterationCount="infinite"
                             useNativeDriver
+                            // useNativeDriver={true}
                             style={styles.fab}
                             icon="account-clock"
                             onPress={() => this.props.navigation.navigate('group-select')}

src/components/Animations/AnimatedFocusView.js

@@ -0,0 +1,55 @@
+// @flow
+
+import * as React from 'react';
+import * as Animatable from "react-native-animatable";
+import {CommonActions} from "@react-navigation/native";
+import {StackNavigationProp} from "@react-navigation/stack";
+
+type Props = {
+    navigation: StackNavigationProp,
+    route: { params?: any, ... },
+    children: React.Node
+}
+
+export default class AnimatedFocusView extends React.Component<Props> {
+
+    ref: { current: null | Animatable.View };
+
+    constructor() {
+        super();
+        this.ref = React.createRef();
+    }
+
+    componentDidMount() {
+        this.props.navigation.addListener('focus', this.onScreenFocus);
+    }
+
+    onScreenFocus = () => {
+        if (this.props.route.params != null) {
+            if (this.props.route.params.animationDir && this.ref.current) {
+                if (this.props.route.params.animationDir === "right")
+                    this.ref.current.fadeInRight(300);
+                else
+                    this.ref.current.fadeInLeft(300);
+                // reset params to prevent infinite loop
+                this.props.navigation.dispatch(CommonActions.setParams({animationDir: null}));
+            }
+        }
+
+    };
+
+    render() {
+        return (
+            <Animatable.View
+                ref={this.ref}
+                style={{
+                    width: "100%",
+                    height: "100%",
+                }}
+                useNativeDriver
+            >
+                {this.props.children}
+            </Animatable.View>
+        );
+    }
+}

src/components/Sidebar/Sidebar.js

@@ -7,19 +7,18 @@ import {TouchableRipple} from "react-native-paper";
 import ConnectionManager from "../../managers/ConnectionManager";
 import LogoutDialog from "../Amicale/LogoutDialog";
 import SideBarSection from "./SideBarSection";
-import {DrawerNavigationProp} from "@react-navigation/drawer";
 
 const deviceWidth = Dimensions.get("window").width;
 
 type Props = {
-    navigation: DrawerNavigationProp,
+    navigation: Object,
-    state: {[key: string] : any},
     theme?: Object,
 };
 
 type State = {
     isLoggedIn: boolean,
     dialogVisible: boolean,
+    activeRoute: string;
 };
 
 /**
@@ -28,7 +27,7 @@ type State = {
 class SideBar extends React.Component<Props, State> {
 
     dataSet: Array<Object>;
-    activeRoute: string;
+
     /**
      * Generate the dataset
      *
@@ -36,7 +35,6 @@ class SideBar extends React.Component<Props, State> {
      */
     constructor(props: Props) {
         super(props);
-        this.activeRoute = 'main';
         // Dataset used to render the drawer
         const mainData = [
             {
@@ -181,24 +179,28 @@ class SideBar extends React.Component<Props, State> {
             },
         ];
         ConnectionManager.getInstance().addLoginStateListener(this.onLoginStateChange);
+        this.props.navigation.addListener('state', this.onRouteChange);
         this.state = {
             isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
             dialogVisible: false,
+            activeRoute: 'Main',
         };
     }
 
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
+    onRouteChange = (event: Object) => {
-        const nextNavigationState = nextProps.state;
+        try {
-        const nextRoute = nextNavigationState.routes[nextNavigationState.index].name;
+            const state = event.data.state.routes[0].state; // Get the Drawer's state if it exists
-
+            // Get the current route name. This will only show Drawer routes.
-        const currentNavigationState = this.props.state;
+            // Tabbar routes will be shown as 'Main'
-        const currentRoute = currentNavigationState.routes[currentNavigationState.index].name;
+            const routeName = state.routeNames[state.index];
-
+            if (this.state.activeRoute !== routeName)
-        this.activeRoute = nextRoute;
+                this.setState({activeRoute: routeName});
-        return (nextState !== this.state)
+        } catch (e) {
-            || (nextRoute !== currentRoute);
+            this.setState({activeRoute: 'Main'});
         }
 
+    };
+
     showDisconnectDialog = () => this.setState({dialogVisible: true});
 
     hideDisconnectDialog = () => this.setState({dialogVisible: false});
@@ -215,7 +217,7 @@ class SideBar extends React.Component<Props, State> {
         return <SideBarSection
             {...this.props}
             listKey={item.key}
-            activeRoute={this.activeRoute}
+            activeRoute={this.state.activeRoute}
             isLoggedIn={this.state.isLoggedIn}
             sectionName={item.name}
             startOpen={item.startOpen}
@@ -237,7 +239,7 @@ class SideBar extends React.Component<Props, State> {
                 {/*$FlowFixMe*/}
                 <FlatList
                     data={this.dataSet}
-                    extraData={this.state.isLoggedIn.toString() + this.activeRoute}
+                    extraData={this.state.isLoggedIn.toString() + this.state.activeRoute}
                     renderItem={this.getRenderItem}
                 />
                 <LogoutDialog

src/components/Tabbar/CustomTabBar.js

@@ -61,7 +61,10 @@ class CustomTabBar extends React.Component<Props, State> {
         });
         if (currentIndex !== destIndex && !event.defaultPrevented) {
             this.state.translateY = new Animated.Value(0);
-            this.props.navigation.navigate(route.name);
+            this.props.navigation.navigate(route.name, {
+                screen: 'index',
+                params: {animationDir: currentIndex < destIndex ? "right" : "left"}
+            });
         }
     }
 

src/navigation/DrawerNavigator.js

@@ -541,10 +541,7 @@ export default class DrawerNavigator extends React.Component<Props> {
         this.createTabNavigator = () => <TabNavigator {...props}/>
     }
 
-    getDrawerContent = (props: {
+    getDrawerContent = (props: { navigation: DrawerNavigationProp }) => <Sidebar {...props}/>
-        navigation: DrawerNavigationProp,
-        state: {[key: string] : any}
-    }) => <Sidebar {...props}/>
 
     render() {
         return (

src/screens/Home/HomeScreen.js

@@ -15,9 +15,9 @@ import ConnectionManager from "../../managers/ConnectionManager";
 import {CommonActions} from '@react-navigation/native';
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
 import AnimatedFAB from "../../components/Animations/AnimatedFAB";
+import AnimatedFocusView from "../../components/Animations/AnimatedFocusView";
 import {StackNavigationProp} from "@react-navigation/stack";
 import type {CustomTheme} from "../../managers/ThemeManager";
-import {View} from "react-native-animatable";
 // import DATA from "../dashboard_data.json";
 
 
@@ -166,11 +166,17 @@ class HomeScreen extends React.Component<Props> {
     };
 
     onProxiwashClick = () => {
-        this.props.navigation.navigate("proxiwash");
+        this.props.navigation.navigate("proxiwash", {
+            screen: 'index',
+            params: {animationDir: "right"} // Play tab animation
+        });
     };
 
     onProximoClick = () => {
-        this.props.navigation.navigate("proximo");
+        this.props.navigation.navigate("proximo", {
+            screen: 'index',
+            params: {animationDir: "left"} // Play tab animation
+        });
     };
 
     onTutorInsaClick = () => this.props.navigation.navigate('tutorinsa');
@@ -507,8 +513,8 @@ class HomeScreen extends React.Component<Props> {
 
     render() {
         return (
-            <View
+            <AnimatedFocusView
-                style={{flex: 1}}
+                {...this.props}
             >
                 <WebSectionList
                     {...this.props}
@@ -526,7 +532,7 @@ class HomeScreen extends React.Component<Props> {
                     icon="qrcode-scan"
                     onPress={this.openScanner}
                 />
-            </View>
+            </AnimatedFocusView>
         );
     }
 }

src/screens/Planex/PlanexScreen.js

@@ -14,6 +14,7 @@ import DateManager from "../../managers/DateManager";
 import AnimatedBottomBar from "../../components/Animations/AnimatedBottomBar";
 import {CommonActions} from "@react-navigation/native";
 import ErrorView from "../../components/Screens/ErrorView";
+import AnimatedFocusView from "../../components/Animations/AnimatedFocusView";
 
 type Props = {
     navigation: Object,
@@ -299,8 +300,8 @@ class PlanexScreen extends React.Component<Props, State> {
     render() {
         const {containerPaddingTop} = this.props.collapsibleStack;
         return (
-            <View
+            <AnimatedFocusView
-                style={{flex: 1}}
+                {...this.props}
             >
                 <Banner
                     style={{
@@ -339,7 +340,7 @@ class PlanexScreen extends React.Component<Props, State> {
                     onPress={this.sendMessage}
                     seekAttention={this.state.currentGroup.id === -1}
                 />
-            </View>
+            </AnimatedFocusView>
         );
     }
 }

src/screens/Planning/PlanningScreen.js

@@ -14,6 +14,7 @@ import {
 } from '../../utils/Planning';
 import {Avatar, Divider, List} from 'react-native-paper';
 import CustomAgenda from "../../components/Overrides/CustomAgenda";
+import AnimatedFocusView from "../../components/Animations/AnimatedFocusView";
 
 LocaleConfig.locales['fr'] = {
     monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
@@ -230,6 +231,9 @@ class PlanningScreen extends React.Component<Props, State> {
     render() {
         // console.log("rendering PlanningScreen");
         return (
+            <AnimatedFocusView
+                {...this.props}
+            >
                 <CustomAgenda
                     {...this.props}
                     // the list of items that have to be displayed in agenda. If you want to render item as empty date
@@ -258,6 +262,7 @@ class PlanningScreen extends React.Component<Props, State> {
                     // ref to this agenda in order to handle back button event
                     onRef={this.onAgendaRef}
                 />
+            </AnimatedFocusView>
         );
     }
 }

src/screens/Proximo/ProximoMainScreen.js

@@ -6,6 +6,7 @@ import i18n from "i18n-js";
 import WebSectionList from "../../components/Screens/WebSectionList";
 import {List, withTheme} from 'react-native-paper';
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
+import AnimatedFocusView from "../../components/Animations/AnimatedFocusView";
 
 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
 const LIST_ITEM_HEIGHT = 84;
@@ -233,6 +234,9 @@ class ProximoMainScreen extends React.Component<Props, State> {
     render() {
         const nav = this.props.navigation;
         return (
+            <AnimatedFocusView
+                {...this.props}
+            >
                 <WebSectionList
                     createDataset={this.createDataset}
                     navigation={nav}
@@ -240,6 +244,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
                     refreshOnFocus={false}
                     fetchUrl={DATA_URL}
                     renderItem={this.getRenderItem}/>
+            </AnimatedFocusView>
         );
     }
 }

src/screens/Proxiwash/ProxiwashScreen.js

@@ -15,6 +15,7 @@ import AprilFoolsManager from "../../managers/AprilFoolsManager";
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
 import ProxiwashSectionHeader from "../../components/Lists/Proxiwash/ProxiwashSectionHeader";
 import {withCollapsible} from "../../utils/withCollapsible";
+import AnimatedFocusView from "../../components/Animations/AnimatedFocusView";
 
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
 
@@ -421,8 +422,8 @@ class ProxiwashScreen extends React.Component<Props, State> {
         const nav = this.props.navigation;
         const {containerPaddingTop} = this.props.collapsibleStack;
         return (
-            <View
+            <AnimatedFocusView
-                style={{flex: 1}}
+                {...this.props}
             >
                 <Banner
                     style={{
@@ -454,7 +455,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
                     autoRefreshTime={REFRESH_TIME}
                     refreshOnFocus={true}
                     updateData={this.state.machinesWatched.length}/>
-            </View>
+            </AnimatedFocusView>
         );
     }
 }