App.js

@@ -62,7 +62,7 @@ export default class App extends React.Component<Props, State> {
         this.defaultData = {};
         this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
         this.urlHandler.listen();
-        setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);
+        setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 0);
     }
 
     onInitialURLParsed = ({route, data}: Object) => {

src/components/Custom/AnimatedBottomBar.js

@@ -57,9 +57,9 @@ class AnimatedBottomBar extends React.Component<Props, State> {
     onHideChange = (shouldHide: boolean) => {
         if (this.ref.current) {
             if (shouldHide)
-                this.ref.current.bounceOutDown(1000);
+                this.ref.current.fadeOutDown(600);
             else
-                this.ref.current.bounceInUp(1000);
+                this.ref.current.fadeInUp(500);
         }
     }
 

src/components/Custom/CustomModal.js

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import {withTheme} from 'react-native-paper';
 import {Modalize} from "react-native-modalize";
-import {View} from "react-native-animatable";
-import CustomTabBar from "../Tabbar/CustomTabBar";
 
 /**
  * Abstraction layer for Modalize component, using custom configuration
@@ -22,12 +20,7 @@ function CustomModal(props) {
             modalStyle={{backgroundColor: colors.card}}
             handleStyle={{backgroundColor: colors.primary}}
         >
-            <View style={{
+            {props.children}
-                paddingBottom: CustomTabBar.TAB_BAR_HEIGHT
-            }}>
-                {props.children}
-            </View>
-
         </Modalize>
     );
 }

src/components/Lists/WebSectionList.js

@@ -9,6 +9,7 @@ import ErrorView from "../Custom/ErrorView";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 import {withCollapsible} from "../../utils/withCollapsible";
 import * as Animatable from 'react-native-animatable';
+import AutoHideHandler from "../../utils/AutoHideHandler";
 import CustomTabBar from "../Tabbar/CustomTabBar";
 
 type Props = {
@@ -51,9 +52,9 @@ class WebSectionList extends React.PureComponent<Props, State> {
         itemHeight: null,
     };
 
-    scrollRef: Object;
     refreshInterval: IntervalID;
     lastRefresh: Date;
+    hideHandler: AutoHideHandler;
 
     state = {
         refreshing: false,
@@ -74,6 +75,8 @@ class WebSectionList extends React.PureComponent<Props, State> {
         this.onFetchSuccess = this.onFetchSuccess.bind(this);
         this.onFetchError = this.onFetchError.bind(this);
         this.getEmptySectionHeader = this.getEmptySectionHeader.bind(this);
+        this.hideHandler = new AutoHideHandler(false);
+        this.hideHandler.addListener(this.onHideChange);
     }
 
     /**
@@ -85,7 +88,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
         const onScreenBlur = this.onScreenBlur.bind(this);
         this.props.navigation.addListener('focus', onScreenFocus);
         this.props.navigation.addListener('blur', onScreenBlur);
-        this.scrollRef = React.createRef();
         this.onRefresh();
     }
 
@@ -97,8 +99,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
             this.onRefresh();
         if (this.props.autoRefreshTime > 0)
             this.refreshInterval = setInterval(this.onRefresh, this.props.autoRefreshTime)
-        // if (this.scrollRef.current) // Reset scroll to top
-        //     this.scrollRef.current.getNode().scrollToLocation({animated:false, itemIndex:0, sectionIndex:0});
     }
 
     /**
@@ -205,10 +205,15 @@ class WebSectionList extends React.PureComponent<Props, State> {
     }
 
     onScroll = (event: Object) => {
+        this.hideHandler.onScroll(event);
         if (this.props.onScroll)
             this.props.onScroll(event);
     }
 
+    onHideChange = (shouldHide: boolean) => {
+        this.props.navigation.setParams({hideTabBar: shouldHide});
+    }
+
     render() {
         let dataset = [];
         if (this.state.fetchedData !== undefined)
@@ -219,7 +224,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
             <View>
                 {/*$FlowFixMe*/}
                 <Animated.SectionList
-                    ref={this.scrollRef}
                     sections={dataset}
                     extraData={this.props.updateData}
                     refreshControl={
@@ -261,9 +265,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
                         },
                     }}
                     duration={4000}
-                    style={{
-                        bottom: CustomTabBar.TAB_BAR_HEIGHT
-                    }}
                 >
                     {i18n.t("homeScreen.listUpdateFail")}
                 </Snackbar>

src/components/Screens/WebViewScreen.js

@@ -11,6 +11,7 @@ import {Linking} from "expo";
 import i18n from 'i18n-js';
 import {Animated, BackHandler} from "react-native";
 import {withCollapsible} from "../../utils/withCollapsible";
+import AutoHideHandler from "../../utils/AutoHideHandler";
 
 type Props = {
     navigation: Object,
@@ -33,6 +34,7 @@ class WebViewScreen extends React.PureComponent<Props> {
     };
 
     webviewRef: Object;
+    hideHandler: AutoHideHandler;
 
     canGoBack: boolean;
 
@@ -40,6 +42,8 @@ class WebViewScreen extends React.PureComponent<Props> {
         super();
         this.webviewRef = React.createRef();
         this.canGoBack = false;
+        this.hideHandler = new AutoHideHandler(false);
+        this.hideHandler.addListener(this.onHideChange);
     }
 
     /**
@@ -132,10 +136,15 @@ class WebViewScreen extends React.PureComponent<Props> {
     }
 
     onScroll = (event: Object) => {
+        this.hideHandler.onScroll(event);
         if (this.props.onScroll)
             this.props.onScroll(event);
     }
 
+    onHideChange = (shouldHide: boolean) => {
+        this.props.navigation.setParams({hideTabBar: shouldHide});
+    }
+
     render() {
         const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
         return (

src/components/Tabbar/CustomTabBar.js

@@ -2,45 +2,33 @@ import * as React from 'react';
 import {withTheme} from 'react-native-paper';
 import TabIcon from "./TabIcon";
 import TabHomeIcon from "./TabHomeIcon";
-import {AnimatedValue} from "react-native-reanimated";
+import * as Animatable from 'react-native-animatable';
-import {Animated} from 'react-native';
 
 type Props = {
     state: Object,
     descriptors: Object,
     navigation: Object,
     theme: Object,
-    collapsibleStack: Object,
-}
-
-type State = {
-    translateY: AnimatedValue,
 }
 
 /**
  * Abstraction layer for Agenda component, using custom configuration
  */
-class CustomTabBar extends React.Component<Props, State> {
+class CustomTabBar extends React.Component<Props> {
 
     static TAB_BAR_HEIGHT = 48;
 
-    barSynced: boolean; // Is the bar synced with the header for animations?
-
-    state = {
-        translateY: new Animated.Value(0),
-    }
-
     // shouldComponentUpdate(nextProps: Props): boolean {
     //     return (nextProps.theme.dark !== this.props.theme.dark)
     //         || (nextProps.state.index !== this.props.state.index);
     // }
 
+    isHidden: boolean;
     tabRef: Object;
 
     constructor() {
         super();
         this.tabRef = React.createRef();
-        this.barSynced = false;
     }
 
     onItemPress(route: Object, currentIndex: number, destIndex: number) {
@@ -50,7 +38,6 @@ class CustomTabBar extends React.Component<Props, State> {
             canPreventDefault: true,
         });
         if (currentIndex !== destIndex && !event.defaultPrevented) {
-            this.state.translateY = new Animated.Value(0);
             this.props.navigation.navigate(route.name, {
                 screen: 'index',
                 params: {animationDir: currentIndex < destIndex ? "right" : "left"}
@@ -58,21 +45,16 @@ class CustomTabBar extends React.Component<Props, State> {
         }
     }
 
-    onRouteChange = () => {
-        this.barSynced = false;
-    }
-
     render() {
         const state = this.props.state;
         const descriptors = this.props.descriptors;
         const navigation = this.props.navigation;
-        this.props.navigation.addListener('state', this.onRouteChange);
         return (
-            <Animated.View
+            <Animatable.View
                 ref={this.tabRef}
-                // animation={"fadeInUp"}
+                animation={"fadeInUp"}
-                // duration={500}
+                duration={500}
-                // useNativeDriver
+                useNativeDriver
                 style={{
                     flexDirection: 'row',
                     height: CustomTabBar.TAB_BAR_HEIGHT,
@@ -81,7 +63,6 @@ class CustomTabBar extends React.Component<Props, State> {
                     bottom: 0,
                     left: 0,
                     backgroundColor: this.props.theme.colors.surface,
-                    transform: [{translateY: this.state.translateY}]
                 }}
             >
                 {state.routes.map((route, index) => {
@@ -104,14 +85,18 @@ class CustomTabBar extends React.Component<Props, State> {
                         });
                     };
                     if (isFocused) {
-                        const stackState = route.state;
+                        const tabVisible = options.tabBarVisible();
-                        const stackRoute = route.state ? stackState.routes[stackState.index] : undefined;
+                        console.log(tabVisible);
-                        const params = stackRoute ? stackRoute.params : undefined;
+                        if (this.tabRef.current) {
-                        const collapsible = params ? params.collapsible : undefined;
+                            if (this.isHidden && tabVisible) {
-                        if (collapsible && !this.barSynced) {
+                                this.isHidden = false;
-                            this.barSynced = true;
+                                this.tabRef.current.slideInUp(300);
-                            this.setState({translateY: Animated.multiply(-1.5, collapsible.translateY)});
+                            } else if (!this.isHidden && !tabVisible){
+                                this.isHidden = true;
+                                this.tabRef.current.slideOutDown(300);
+                            }
                         }
+
                     }
 
                     const color = isFocused ? options.activeColor : options.inactiveColor;
@@ -135,7 +120,7 @@ class CustomTabBar extends React.Component<Props, State> {
                             key={route.key}
                         />
                 })}
-            </Animated.View>
+            </Animatable.View>
         );
     }
 }

src/navigation/MainTabNavigator.js

@@ -343,6 +343,15 @@ class TabNavigator extends React.Component<Props> {
                         else
                             return null;
                     },
+                    tabBarVisible: () => {
+                        const state = route.state;
+                        // Get the current route in the stack
+                        const screen = state ? state.routes[state.index] : undefined;
+                        const params = screen ? screen.params : undefined;
+                        const hideTabBar = params ? params.hideTabBar : undefined;
+                        return hideTabBar !== undefined ? !hideTabBar : true;
+                    },
+                    animationEnabled: true,
                     tabBarLabel: route.name !== 'home' ? undefined : '',
                     activeColor: this.props.theme.colors.primary,
                     inactiveColor: this.props.theme.colors.tabIcon,

src/screens/Amicale/Clubs/ClubDisplayScreen.js

@@ -7,7 +7,6 @@ import ImageModal from 'react-native-image-modal';
 import i18n from "i18n-js";
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import CustomHTML from "../../../components/Custom/CustomHTML";
-import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
 
 type Props = {
     navigation: Object,
@@ -91,7 +90,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
         }
         const hasManagers = resp.length > 0;
         return (
-            <Card style={{marginTop: 10, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
+            <Card style={{marginTop: 10, marginBottom: 10}}>
                 <Card.Title
                     title={i18n.t('clubs.managers')}
                     subtitle={hasManagers ? i18n.t('clubs.managersSubtitle') : i18n.t('clubs.managersUnavailable')}

src/screens/FeedItemScreen.js

@@ -7,7 +7,6 @@ import ImageModal from 'react-native-image-modal';
 import Autolink from "react-native-autolink";
 import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
 import {Linking} from "expo";
-import CustomTabBar from "../components/Tabbar/CustomTabBar";
 
 type Props = {
     navigation: Object,
@@ -59,7 +58,7 @@ class FeedItemScreen extends React.Component<Props> {
     getContent() {
         const hasImage = this.displayData.full_picture !== '' && this.displayData.full_picture !== undefined;
         return (
-            <ScrollView style={{margin: 5,}}>
+            <ScrollView style={{margin: 5}}>
                 <Card.Title
                     title={NAME_AMICALE}
                     subtitle={this.date}
@@ -78,7 +77,7 @@ class FeedItemScreen extends React.Component<Props> {
                                 uri: this.displayData.full_picture,
                             }}
                         /></View> : null}
-                <Card.Content style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
+                <Card.Content>
                     {this.displayData.message !== undefined ?
                         <Autolink
                             text={this.displayData.message}

src/screens/Planning/PlanningDisplayScreen.js

@@ -10,7 +10,6 @@ import BasicLoadingScreen from "../../components/Custom/BasicLoadingScreen";
 import {apiRequest} from "../../utils/WebData";
 import ErrorView from "../../components/Custom/ErrorView";
 import CustomHTML from "../../components/Custom/CustomHTML";
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 
 type Props = {
     navigation: Object,
@@ -105,7 +104,7 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
                     : <View/>}
 
                 {this.displayData.description !== null ?
-                    <Card.Content style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
+                    <Card.Content>
                         <CustomHTML html={this.displayData.description}/>
                     </Card.Content>
                     : <View/>}

src/screens/Proximo/ProximoAboutScreen.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import {Image, ScrollView, View} from 'react-native';
 import i18n from "i18n-js";
 import {Card, List, Paragraph, Text} from 'react-native-paper';
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 
 type Props = {
     navigation: Object,
@@ -41,7 +40,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {
                         <Paragraph>18h30 - 19h30</Paragraph>
                     </Card.Content>
                 </Card>
-                <Card style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
+                <Card style={{margin: 5}}>
                     <Card.Title
                         title={i18n.t('proximoScreen.paymentMethods')}
                         left={props => <List.Icon {...props} icon={'cash'}/>}

src/screens/Proxiwash/ProxiwashAboutScreen.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import {Image, ScrollView, View} from 'react-native';
 import i18n from "i18n-js";
 import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 
 type Props = {
     navigation: Object,
@@ -68,7 +67,7 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                         <Paragraph>{i18n.t('proxiwashScreen.dryersTariff')}</Paragraph>
                     </Card.Content>
                 </Card>
-                <Card style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
+                <Card style={{margin: 5}}>
                     <Card.Title
                         title={i18n.t('proxiwashScreen.paymentMethods')}
                         left={props => <List.Icon {...props} icon={'cash'}/>}

src/screens/ScannerScreen.js

@@ -9,7 +9,6 @@ import URLHandler from "../utils/URLHandler";
 import {Linking} from "expo";
 import AlertDialog from "../components/Dialog/AlertDialog";
 import i18n from 'i18n-js';
-import CustomTabBar from "../components/Tabbar/CustomTabBar";
 
 type Props = {};
 type State = {
@@ -142,30 +141,25 @@ class ScannerScreen extends React.Component<Props, State> {
 
     render() {
         return (
-            <View style={{
+            <View style={styles.container}>
-                ...styles.container,
+                {this.state.hasPermission
-                marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
+                    ? this.getScanner()
-            }}>
+                    : this.getPermissionScreen()
-                    {this.state.hasPermission
+                }
-                        ? this.getScanner()
-                        : this.getPermissionScreen()
-                    }
-                <View style={{height: 50}}>
-                    <Button
-                        icon="information"
-                        mode="contained"
-                        onPress={this.showHelpDialog}
-                        style={styles.button}
-                    >
-                        {i18n.t("scannerScreen.helpButton")}
-                    </Button>
-                </View>
                 <AlertDialog
                     visible={this.state.dialogVisible}
                     onDismiss={this.onDialogDismiss}
                     title={this.state.dialogTitle}
                     message={this.state.dialogMessage}
                 />
+                <Button
+                    icon="information"
+                    mode="contained"
+                    onPress={this.showHelpDialog}
+                    style={styles.button}
+                >
+                    {i18n.t("scannerScreen.helpButton")}
+                </Button>
             </View>
         );
     }
@@ -206,6 +200,8 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#000000' // the rock-solid workaround
     },
     cameraContainer: {
         marginTop: 'auto',