App.js

@@ -115,12 +115,13 @@ export default class App extends React.Component<Props, State> {
      * as the android status bar is always set to black.
      */
     setupStatusBar() {
+        if (Platform.OS === 'ios') {
             if (ThemeManager.getNightMode()) {
                 StatusBar.setBarStyle('light-content', true);
             } else {
                 StatusBar.setBarStyle('dark-content', true);
             }
-        StatusBar.setBackgroundColor(ThemeManager.getCurrentTheme().colors.surface, true);
+        }
     }
 
     /**

app.json

@@ -21,7 +21,7 @@
       "barStyle": "light-content",
       "hidden": false,
       "translucent": false,
-      "backgroundColor": "#be1522"
+      "backgroundColor": "#000000"
     },
     "androidNavigationBar": {
       "barStyle": "light-content",

src/components/Sidebar/SideBarSection.js

@@ -5,7 +5,6 @@ import {FlatList} from "react-native";
 import {Drawer, withTheme} from 'react-native-paper';
 import {Linking} from "expo";
 import AnimatedAccordion from "../Animations/AnimatedAccordion";
-import {StackActions} from '@react-navigation/native';
 
 type Props = {
     navigation: Object,
@@ -56,14 +55,8 @@ class SideBarSection extends React.PureComponent<Props> {
             Linking.openURL(item.link);
         else if (item.action !== undefined)
             item.action();
-        else if (this.props.activeRoute === "main")
+        else
             this.props.navigation.navigate(item.route);
-        else {
-            this.props.navigation.dispatch(
-                StackActions.replace(item.route)
-            );
-            this.props.navigation.closeDrawer();
-        }
     }
 
     /**

src/components/Sidebar/Sidebar.js

@@ -188,15 +188,11 @@ class SideBar extends React.Component<Props, State> {
     }
 
     shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
-        const nextNavigationState = nextProps.state.routes[0].state;
+        const nextNavigationState = nextProps.state;
         const nextRoute = nextNavigationState.routes[nextNavigationState.index].name;
 
-        let currentRoute = "main";
+        const currentNavigationState = this.props.state;
-        const currentNavigationState = this.props.state.routes[0].state;
+        const currentRoute = currentNavigationState.routes[currentNavigationState.index].name;
-        if (currentNavigationState != null) {
-            currentRoute = currentNavigationState.routes[currentNavigationState.index].name;
-        }
-
 
         this.activeRoute = nextRoute;
         return (nextState !== this.state)

src/navigation/DrawerNavigator.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import {createDrawerNavigator, DrawerNavigationProp} from '@react-navigation/drawer';
+import TabNavigator from './MainTabNavigator';
 import SettingsScreen from '../screens/Other/SettingsScreen';
 import AboutScreen from '../screens/About/AboutScreen';
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
@@ -20,13 +21,13 @@ import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
 import VoteScreen from "../screens/Amicale/VoteScreen";
 import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
+import MaterialHeaderButtons, {Item} from "../components/Overrides/CustomHeaderButton";
 import {AmicaleWebsiteScreen} from "../screens/Websites/AmicaleWebsiteScreen";
 import {TutorInsaWebsiteScreen} from "../screens/Websites/TutorInsaWebsiteScreen";
 import {WiketudWebsiteScreen} from "../screens/Websites/WiketudWebsiteScreen";
 import {ElusEtudiantsWebsiteScreen} from "../screens/Websites/ElusEtudiantsWebsiteScreen";
 import {createCollapsibleStack} from "react-navigation-collapsible";
 import {useTheme} from "react-native-paper";
-import TabNavigator from "./MainTabNavigator";
 
 const defaultScreenOptions = {
     gestureEnabled: true,
@@ -34,104 +35,384 @@ const defaultScreenOptions = {
     ...TransitionPresets.SlideFromRightIOS,
 };
 
-function createScreenCollapsibleStack (name: string, component: any, title: string, useNativeDriver?: boolean) {
+function getDrawerButton(navigation: DrawerNavigationProp) {
-    const {colors} = useTheme();
-    return createCollapsibleStack(
-        <DrawerStack.Screen
-            name={name}
-            component={component}
-            options={{
-                title: title,
-                headerStyle: {
-                    backgroundColor: colors.surface,
-                },
-            }}
-        />,
-        {
-            collapsedColor: 'transparent',
-            useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
-        }
-    )
-}
-
-function getWebsiteStack(name: string, component: any, title: string) {
-    return createScreenCollapsibleStack(name, component, title, false);
-}
-
-const DrawerStack = createStackNavigator();
-
-function DrawerStackComponent(props) {
     return (
-            <DrawerStack.Navigator
+        <MaterialHeaderButtons left={true}>
-                initialRouteName={'main'}
+            <Item title="menu" iconName="menu" onPress={navigation.openDrawer}/>
-                headerMode={'screen'}
+        </MaterialHeaderButtons>
+    );
+}
+
+const AboutStack = createStackNavigator();
+
+function AboutStackComponent() {
+    return (
+        <AboutStack.Navigator
+            initialRouteName="about"
+            headerMode="float"
             screenOptions={defaultScreenOptions}
         >
-                <DrawerStack.Screen
+            <AboutStack.Screen
-                    name="main"
-                    component={props.createTabNavigator}
-                    options={{
-                        headerShown: false,
-                    }}
-                />
-                <DrawerStack.Screen
-                    name="settings"
-                    component={SettingsScreen}
-                    options={{
-                        title: i18n.t('screens.settings'),
-                    }}
-                />
-                <DrawerStack.Screen
                 name="about"
                 component={AboutScreen}
-                    options={{
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
                         title: i18n.t('screens.about'),
+                        headerLeft: openDrawer
+                    };
                 }}
             />
-                <DrawerStack.Screen
+            <AboutStack.Screen
                 name="dependencies"
                 component={AboutDependenciesScreen}
                 options={{
                     title: i18n.t('aboutScreen.libs')
                 }}
             />
-                <DrawerStack.Screen
+            <AboutStack.Screen
                 name="debug"
                 component={DebugScreen}
                 options={{
                     title: i18n.t('aboutScreen.debug')
                 }}
             />
-                {createScreenCollapsibleStack("self-menu", SelfMenuScreen, i18n.t('screens.menuSelf'))}
+        </AboutStack.Navigator>
-                {getWebsiteStack("available-rooms", AvailableRoomScreen, i18n.t('screens.availableRooms'))}
+    );
-                {getWebsiteStack("bib", BibScreen, i18n.t('screens.bib'))}
+}
-                {getWebsiteStack("amicale-website", AmicaleWebsiteScreen, "Amicale")}
+
-                {getWebsiteStack("elus-etudiants", ElusEtudiantsWebsiteScreen, "Élus Étudiants")}
+const SettingsStack = createStackNavigator();
-                {getWebsiteStack("wiketud", WiketudWebsiteScreen, "Wiketud")}
+
-                {getWebsiteStack("tutorinsa", TutorInsaWebsiteScreen, "Tutor'INSA")}
+function SettingsStackComponent() {
-                <DrawerStack.Screen
+    return (
+        <SettingsStack.Navigator
+            initialRouteName="settings"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <SettingsStack.Screen
+                name="settings"
+                component={SettingsScreen}
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
+                        title: i18n.t('screens.settings'),
+                        headerLeft: openDrawer
+                    };
+                }}
+            />
+        </SettingsStack.Navigator>
+    );
+}
+
+const SelfMenuStack = createStackNavigator();
+
+function SelfMenuStackComponent() {
+    const {colors} = useTheme();
+    return (
+        <SelfMenuStack.Navigator
+            initialRouteName="self-menu"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            {createCollapsibleStack(
+                <SelfMenuStack.Screen
+                    name="self-menu"
+                    component={SelfMenuScreen}
+                    options={({navigation}) => {
+                        const openDrawer = getDrawerButton.bind(this, navigation);
+                        return {
+                            title: i18n.t('screens.menuSelf'),
+                            headerLeft: openDrawer,
+                            headerStyle: {
+                                backgroundColor: colors.surface,
+                            },
+                        };
+                    }}
+                />,
+                {
+                    collapsedColor: 'transparent',
+                    useNativeDriver: true,
+                }
+            )}
+        </SelfMenuStack.Navigator>
+    );
+}
+
+const AvailableRoomStack = createStackNavigator();
+
+function AvailableRoomStackComponent() {
+    const {colors} = useTheme();
+    return (
+        <AvailableRoomStack.Navigator
+            initialRouteName="available-rooms"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            {createCollapsibleStack(
+                <AvailableRoomStack.Screen
+                    name="available-rooms"
+                    component={AvailableRoomScreen}
+                    options={({navigation}) => {
+                        const openDrawer = getDrawerButton.bind(this, navigation);
+                        return {
+                            title: i18n.t('screens.availableRooms'),
+                            headerLeft: openDrawer,
+                            headerStyle: {
+                                backgroundColor: colors.surface,
+                            },
+                        };
+                    }}
+                />,
+                {
+                    collapsedColor: 'transparent',
+                    useNativeDriver: false, // native driver does not work with webview
+                }
+            )}
+        </AvailableRoomStack.Navigator>
+    );
+}
+
+const BibStack = createStackNavigator();
+
+function BibStackComponent() {
+    const {colors} = useTheme();
+    return (
+        <BibStack.Navigator
+            initialRouteName="bib"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            {createCollapsibleStack(
+                <BibStack.Screen
+                    name="bib"
+                    component={BibScreen}
+                    options={({navigation}) => {
+                        const openDrawer = getDrawerButton.bind(this, navigation);
+                        return {
+                            title: i18n.t('screens.bib'),
+                            headerLeft: openDrawer,
+                            headerStyle: {
+                                backgroundColor: colors.surface,
+                            },
+                        };
+                    }}
+                />,
+                {
+                    collapsedColor: 'transparent',
+                    useNativeDriver: false, // native driver does not work with webview
+                }
+            )}
+        </BibStack.Navigator>
+    );
+}
+
+const AmicaleWebsiteStack = createStackNavigator();
+
+function AmicaleWebsiteStackComponent() {
+    const {colors} = useTheme();
+    return (
+        <AmicaleWebsiteStack.Navigator
+            initialRouteName="amicale-website"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            {createCollapsibleStack(
+                <AmicaleWebsiteStack.Screen
+                    name="amicale-website"
+                    component={AmicaleWebsiteScreen}
+                    options={({navigation}) => {
+                        const openDrawer = getDrawerButton.bind(this, navigation);
+                        return {
+                            title: "Amicale",
+                            headerLeft: openDrawer,
+                            headerStyle: {
+                                backgroundColor: colors.surface,
+                            },
+                        };
+                    }}
+                />,
+                {
+                    collapsedColor: 'transparent',
+                    useNativeDriver: false, // native driver does not work with webview
+                }
+            )}
+        </AmicaleWebsiteStack.Navigator>
+    );
+}
+
+const ElusEtudiantsStack = createStackNavigator();
+
+function ElusEtudiantsStackComponent() {
+    const {colors} = useTheme();
+    return (
+        <ElusEtudiantsStack.Navigator
+            initialRouteName="elus-etudiants"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            {createCollapsibleStack(
+                <ElusEtudiantsStack.Screen
+                    name="elus-etudiants"
+                    component={ElusEtudiantsWebsiteScreen}
+                    options={({navigation}) => {
+                        const openDrawer = getDrawerButton.bind(this, navigation);
+                        return {
+                            title: "Élus Étudiants",
+                            headerLeft: openDrawer,
+                            headerStyle: {
+                                backgroundColor: colors.surface,
+                            },
+                        };
+                    }}
+                />,
+                {
+                    collapsedColor: 'transparent',
+                    useNativeDriver: false, // native driver does not work with webview
+                }
+            )}
+        </ElusEtudiantsStack.Navigator>
+    );
+}
+
+const WiketudStack = createStackNavigator();
+
+function WiketudStackComponent() {
+    const {colors} = useTheme();
+    return (
+        <WiketudStack.Navigator
+            initialRouteName="wiketud"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            {createCollapsibleStack(
+                <WiketudStack.Screen
+                    name="wiketud"
+                    component={WiketudWebsiteScreen}
+                    options={({navigation}) => {
+                        const openDrawer = getDrawerButton.bind(this, navigation);
+                        return {
+                            title: "Wiketud",
+                            headerLeft: openDrawer,
+                            headerStyle: {
+                                backgroundColor: colors.surface,
+                            },
+                        };
+                    }}
+                />,
+                {
+                    collapsedColor: 'transparent',
+                    useNativeDriver: false, // native driver does not work with webview
+                }
+            )}
+        </WiketudStack.Navigator>
+    );
+}
+
+const TutorInsaStack = createStackNavigator();
+
+function TutorInsaStackComponent() {
+    const {colors} = useTheme();
+    return (
+        <TutorInsaStack.Navigator
+            initialRouteName="tutorinsa"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            {createCollapsibleStack(
+                <TutorInsaStack.Screen
+                    name="tutorinsa"
+                    component={TutorInsaWebsiteScreen}
+                    options={({navigation}) => {
+                        const openDrawer = getDrawerButton.bind(this, navigation);
+                        return {
+                            title: "Tutor'INSA",
+                            headerLeft: openDrawer,
+                            headerStyle: {
+                                backgroundColor: colors.surface,
+                            },
+                        };
+                    }}
+                />,
+                {
+                    collapsedColor: 'transparent',
+                    useNativeDriver: false, // native driver does not work with webview
+                }
+            )}
+        </TutorInsaStack.Navigator>
+    );
+}
+
+
+const TetrisStack = createStackNavigator();
+
+function TetrisStackComponent() {
+    return (
+        <TetrisStack.Navigator
+            initialRouteName="tetris"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <TetrisStack.Screen
                 name="tetris"
                 component={TetrisScreen}
-                    options={{
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
                         title: i18n.t("game.title"),
+                        headerLeft: openDrawer
+                    };
                 }}
             />
-                <DrawerStack.Screen
+        </TetrisStack.Navigator>
+    );
+}
+
+const LoginStack = createStackNavigator();
+
+function LoginStackComponent() {
+    return (
+        <LoginStack.Navigator
+            initialRouteName="login"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <LoginStack.Screen
                 name="login"
                 component={LoginScreen}
-                    options={{
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
                         title: i18n.t('screens.login'),
+                        headerLeft: openDrawer
+                    };
                 }}
             />
-                <DrawerStack.Screen
+        </LoginStack.Navigator>
+    );
+}
+
+const ProfileStack = createStackNavigator();
+
+function ProfileStackComponent() {
+    return (
+        <ProfileStack.Navigator
+            initialRouteName="profile"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <ProfileStack.Screen
                 name="profile"
                 component={ProfileScreen}
-                    options={{
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
                         title: i18n.t('screens.profile'),
+                        headerLeft: openDrawer
+                    };
                 }}
             />
-                {createScreenCollapsibleStack("club-list", ClubListScreen, i18n.t('clubs.clubList'))}
+            <ClubStack.Screen
-                <DrawerStack.Screen
                 name="club-information"
                 component={ClubDisplayScreen}
                 options={{
@@ -139,7 +420,99 @@ function DrawerStackComponent(props) {
                     ...TransitionPresets.ModalSlideFromBottomIOS,
                 }}
             />
-                <DrawerStack.Screen
+        </ProfileStack.Navigator>
+    );
+}
+
+
+const VoteStack = createStackNavigator();
+
+function VoteStackComponent() {
+    return (
+        <VoteStack.Navigator
+            initialRouteName="vote"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <VoteStack.Screen
+                name="vote"
+                component={VoteScreen}
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
+                        title: i18n.t('screens.vote'),
+                        headerLeft: openDrawer
+                    };
+                }}
+            />
+        </VoteStack.Navigator>
+    );
+}
+
+const AmicaleContactStack = createStackNavigator();
+
+function AmicaleContactStackComponent() {
+    return (
+        <AmicaleContactStack.Navigator
+            initialRouteName="amicale-contact"
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            <AmicaleContactStack.Screen
+                name="amicale-contact"
+                component={AmicaleContactScreen}
+                options={({navigation}) => {
+                    const openDrawer = getDrawerButton.bind(this, navigation);
+                    return {
+                        title: i18n.t('screens.amicaleAbout'),
+                        headerLeft: openDrawer
+                    };
+                }}
+            />
+        </AmicaleContactStack.Navigator>
+    );
+}
+
+
+const ClubStack = createStackNavigator();
+
+function ClubStackComponent() {
+    const {colors} = useTheme();
+    return (
+        <ClubStack.Navigator
+            initialRouteName={"club-list"}
+            headerMode="float"
+            screenOptions={defaultScreenOptions}
+        >
+            {createCollapsibleStack(
+                <ClubStack.Screen
+                    name="club-list"
+                    component={ClubListScreen}
+                    options={({navigation}) => {
+                        const openDrawer = getDrawerButton.bind(this, navigation);
+                        return {
+                            title: i18n.t('clubs.clubList'),
+                            headerLeft: openDrawer,
+                            headerStyle: {
+                                backgroundColor: colors.surface,
+                            },
+                        };
+                    }}
+                />,
+                {
+                    collapsedColor: 'transparent',
+                    useNativeDriver: true,
+                }
+            )}
+            <ClubStack.Screen
+                name="club-information"
+                component={ClubDisplayScreen}
+                options={{
+                    title: i18n.t('screens.clubDisplayScreen'),
+                    ...TransitionPresets.ModalSlideFromBottomIOS,
+                }}
+            />
+            <ClubStack.Screen
                 name="club-about"
                 component={ClubAboutScreen}
                 options={{
@@ -147,24 +520,11 @@ function DrawerStackComponent(props) {
                     ...TransitionPresets.ModalSlideFromBottomIOS,
                 }}
             />
-                <DrawerStack.Screen
+        </ClubStack.Navigator>
-                    name="vote"
-                    component={VoteScreen}
-                    options={{
-                        title: i18n.t('screens.vote'),
-                    }}
-                />
-                <DrawerStack.Screen
-                    name="amicale-contact"
-                    component={AmicaleContactScreen}
-                    options={{
-                        title: i18n.t('screens.amicaleAbout'),
-                    }}
-                />
-            </DrawerStack.Navigator>
     );
 }
 
+
 const Drawer = createDrawerNavigator();
 
 type Props = {
@@ -174,12 +534,11 @@ type Props = {
 
 export default class DrawerNavigator extends React.Component<Props> {
 
-    createDrawerStackComponent: () => React.Node;
+    createTabNavigator: () => React.Element<TabNavigator>;
 
     constructor(props: Props) {
         super(props);
-        const createTabNavigator = () => <TabNavigator {...props}/>
+        this.createTabNavigator = () => <TabNavigator {...props}/>
-        this.createDrawerStackComponent = () => <DrawerStackComponent createTabNavigator={createTabNavigator}/>;
     }
 
     getDrawerContent = (props: {
@@ -190,16 +549,77 @@ export default class DrawerNavigator extends React.Component<Props> {
     render() {
         return (
             <Drawer.Navigator
-                initialRouteName={'stack'}
+                initialRouteName={'Main'}
-                headerMode={'none'}
+                headerMode={'float'}
                 backBehavior={'initialRoute'}
                 drawerType={'front'}
                 drawerContent={this.getDrawerContent}
                 screenOptions={defaultScreenOptions}
             >
                 <Drawer.Screen
-                    name="stack"
+                    name="main"
-                    component={this.createDrawerStackComponent}
+                    component={this.createTabNavigator}
+                >
+                </Drawer.Screen>
+                <Drawer.Screen
+                    name="settings"
+                    component={SettingsStackComponent}
+                />
+                <Drawer.Screen
+                    name="about"
+                    component={AboutStackComponent}
+                />
+                <Drawer.Screen
+                    name="self-menu"
+                    component={SelfMenuStackComponent}
+                />
+                <Drawer.Screen
+                    name="available-rooms"
+                    component={AvailableRoomStackComponent}
+                />
+                <Drawer.Screen
+                    name="bib"
+                    component={BibStackComponent}
+                />
+                <Drawer.Screen
+                    name="amicale-website"
+                    component={AmicaleWebsiteStackComponent}
+                />
+                <Drawer.Screen
+                    name="elus-etudiants"
+                    component={ElusEtudiantsStackComponent}
+                />
+                <Drawer.Screen
+                    name="wiketud"
+                    component={WiketudStackComponent}
+                />
+                <Drawer.Screen
+                    name="tutorinsa"
+                    component={TutorInsaStackComponent}
+                />
+                <Drawer.Screen
+                    name="tetris"
+                    component={TetrisStackComponent}
+                />
+                <Drawer.Screen
+                    name="login"
+                    component={LoginStackComponent}
+                />
+                <Drawer.Screen
+                    name="profile"
+                    component={ProfileStackComponent}
+                />
+                <Drawer.Screen
+                    name="club-list"
+                    component={ClubStackComponent}
+                />
+                <Drawer.Screen
+                    name="vote"
+                    component={VoteStackComponent}
+                />
+                <Drawer.Screen
+                    name="amicale-contact"
+                    component={AmicaleContactStackComponent}
                 />
             </Drawer.Navigator>
         );

src/screens/Amicale/LoginScreen.js

@@ -75,7 +75,7 @@ class LoginScreen extends React.Component<Props, State> {
 
     hideErrorDialog = () => this.setState({dialogVisible: false});
 
-    handleSuccess = () => this.props.navigation.replace(this.nextScreen);
+    handleSuccess = () => this.props.navigation.navigate(this.nextScreen);
 
     onResetPasswordClick = () => this.props.navigation.navigate('amicale-website', {
         screen: 'amicale-website',

src/screens/Proximo/ProximoListScreen.js

@@ -10,6 +10,7 @@ import ProximoListItem from "../../components/Lists/Proximo/ProximoListItem";
 import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
 import {withCollapsible} from "../../utils/withCollapsible";
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
+import AutoHideHandler from "../../utils/AutoHideHandler";
 
 function sortPrice(a, b) {
     return a.price - b.price;
@@ -58,6 +59,7 @@ class ProximoListScreen extends React.Component<Props, State> {
     modalRef: Object;
     listData: Array<Object>;
     shouldFocusSearchBar: boolean;
+    hideHandler: AutoHideHandler;
 
     constructor(props) {
         super(props);
@@ -68,6 +70,8 @@ class ProximoListScreen extends React.Component<Props, State> {
             currentSortMode: 3,
             modalCurrentDisplayItem: null,
         };
+        this.hideHandler = new AutoHideHandler(false);
+        this.hideHandler.addListener(this.onHideChange);
     }
 
 
@@ -297,8 +301,17 @@ class ProximoListScreen extends React.Component<Props, State> {
 
     itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
 
+
+    onScroll = (event: Object) => {
+        this.hideHandler.onScroll(event);
+    };
+
+    onHideChange = (shouldHide: boolean) => {
+        this.props.navigation.setParams({hideTabBar: shouldHide});
+    }
+
     render() {
-        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
+        const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
         return (
             <View style={{
                 height: '100%'
@@ -317,7 +330,7 @@ class ProximoListScreen extends React.Component<Props, State> {
                     getItemLayout={this.itemLayout}
                     initialNumToRender={10}
                     // Animations
-                    onScroll={onScroll}
+                    onScroll={onScrollWithListener(this.onScroll)}
                     contentContainerStyle={{
                         paddingTop: containerPaddingTop,
                         paddingBottom: CustomTabBar.TAB_BAR_HEIGHT