Created a component to handle hide on scroll behavior

src/components/Custom/AnimatedBottomBar.js

@@ -0,0 +1,64 @@
+// @flow
+
+import * as React from 'react';
+import {StyleSheet} from "react-native";
+import {IconButton, withTheme} from "react-native-paper";
+import {AnimatedValue} from "react-native-reanimated";
+import AutoHideComponent from "./AutoHideComponent";
+
+type Props = {
+    theme: Object,
+}
+
+type State = {
+    fabPosition: AnimatedValue
+}
+
+class AnimatedBottomBar extends React.Component<Props, State> {
+
+    ref: Object;
+
+    constructor() {
+        super();
+        this.ref = React.createRef();
+    }
+
+    onScroll = (event: Object) => {
+        this.ref.current.onScroll(event);
+    };
+
+    render() {
+        return (
+            <AutoHideComponent
+                ref={this.ref}
+                style={{
+                    ...styles.bottom,
+                    backgroundColor: this.props.theme.colors.surface,
+                }}>
+                <IconButton
+                    icon="chevron-left"
+                    size={40}
+                    onPress={() => console.log('previous')}/>
+                <IconButton
+                    icon="chevron-right"
+                    size={40}
+                    onPress={() => console.log('next')}/>
+            </AutoHideComponent>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    bottom: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        position: 'absolute',
+        left: 0,
+        bottom: 0,
+        width: '100%',
+        height: 100,
+    },
+});
+
+export default withTheme(AnimatedBottomBar);

src/components/Custom/AnimatedFAB.js

@@ -0,0 +1,52 @@
+// @flow
+
+import * as React from 'react';
+import {StyleSheet} from "react-native";
+import {FAB} from "react-native-paper";
+import {AnimatedValue} from "react-native-reanimated";
+import AutoHideComponent from "./AutoHideComponent";
+
+type Props = {
+    icon: string,
+    onPress: Function,
+}
+
+type State = {
+    fabPosition: AnimatedValue
+}
+
+export default class AnimatedFAB extends React.Component<Props, State> {
+
+    ref: Object;
+
+    constructor() {
+        super();
+        this.ref = React.createRef();
+    }
+
+    onScroll = (event: Object) => {
+        this.ref.current.onScroll(event);
+    };
+
+    render() {
+        return (
+            <AutoHideComponent
+                ref={this.ref}
+                style={styles.fab}>
+                <FAB
+                    icon={this.props.icon}
+                    onPress={this.props.onPress}
+                />
+            </AutoHideComponent>
+           );
+    }
+}
+
+const styles = StyleSheet.create({
+    fab: {
+        position: 'absolute',
+        margin: 16,
+        right: 0,
+        bottom: 0,
+    },
+});

src/components/Custom/AutoHideComponent.js

@@ -0,0 +1,74 @@
+// @flow
+
+import * as React from 'react';
+import {Animated} from 'react-native'
+import {AnimatedValue} from "react-native-reanimated";
+
+type Props = {
+    children: React.Node,
+    style: Object,
+}
+
+type State = {
+    fabPosition: AnimatedValue
+}
+
+export default class AutoHideComponent extends React.Component<Props, State> {
+
+    isAnimationDownPlaying: boolean;
+    isAnimationUpPlaying: boolean;
+
+    downAnimation;
+    upAnimation;
+
+    state = {
+        fabPosition: new Animated.Value(0),
+    };
+
+    constructor() {
+        super();
+    }
+
+    onScroll({nativeEvent}: Object) {
+        if (nativeEvent.velocity.y > 0.2) { // Go down
+            if (!this.isAnimationDownPlaying) {
+                this.isAnimationDownPlaying = true;
+                if (this.isAnimationUpPlaying)
+                    this.upAnimation.stop();
+                this.downAnimation = Animated.spring(this.state.fabPosition, {
+                    toValue: 100,
+                    duration: 50,
+                    useNativeDriver: true,
+                });
+                this.downAnimation.start(() => {
+                    this.isAnimationDownPlaying = false
+                });
+            }
+        } else if (nativeEvent.velocity.y < -0.2) { // Go up
+            if (!this.isAnimationUpPlaying) {
+                this.isAnimationUpPlaying = true;
+                if (this.isAnimationDownPlaying)
+                    this.downAnimation.stop();
+                this.upAnimation = Animated.spring(this.state.fabPosition, {
+                    toValue: 0,
+                    duration: 50,
+                    useNativeDriver: true,
+                });
+                this.upAnimation.start(() => {
+                    this.isAnimationUpPlaying = false
+                });
+            }
+        }
+    }
+
+    render() {
+        return (
+            <Animated.View style={{
+                ...this.props.style,
+                transform: [{translateY: this.state.fabPosition}]
+            }}>
+                {this.props.children}
+            </Animated.View>
+        );
+    }
+}

src/components/Screens/WebViewScreen.js

@@ -18,6 +18,7 @@ type Props = {
     customJS: string,
     collapsibleStack: Object,
     onMessage: Function,
+    onScroll: Function,
 }
 
 const AnimatedWebView = Animated.createAnimatedComponent(WebView);
@@ -155,7 +156,7 @@ class WebViewScreen extends React.PureComponent<Props> {
     }
 
     render() {
-        const {containerPaddingTop, onScroll} = this.props.collapsibleStack;
+        const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
         const customJS = this.getJavascriptPadding(containerPaddingTop);
         return (
             <AnimatedWebView
@@ -174,7 +175,7 @@ class WebViewScreen extends React.PureComponent<Props> {
                 }}
                 onMessage={this.props.onMessage}
                 // Animations
-                onScroll={onScroll}
+                onScroll={onScrollWithListener(this.props.onScroll)}
             />
         );
     }

src/screens/HomeScreen.js

@@ -1,11 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {Animated, FlatList, StyleSheet, View} from 'react-native';
+import {Animated, FlatList, View} from 'react-native';
 import i18n from "i18n-js";
 import DashboardItem from "../components/Home/EventDashboardItem";
 import WebSectionList from "../components/Lists/WebSectionList";
-import {FAB, withTheme} from 'react-native-paper';
+import {withTheme} from 'react-native-paper';
 import FeedItem from "../components/Home/FeedItem";
 import SquareDashboardItem from "../components/Home/SmallDashboardItem";
 import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardItem";
@@ -15,6 +15,7 @@ import ConnectionManager from "../managers/ConnectionManager";
 import {CommonActions} from '@react-navigation/native';
 import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
 import {AnimatedValue} from "react-native-reanimated";
+import AnimatedFAB from "../components/Custom/AnimatedFAB";
 // import DATA from "../dashboard_data.json";
 
 
@@ -27,8 +28,6 @@ const SECTIONS_ID = [
     'news_feed'
 ];
 
-const AnimatedFAB = Animated.createAnimatedComponent(FAB);
-
 const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds
 
 type Props = {
@@ -38,7 +37,6 @@ type Props = {
 }
 
 type State = {
-    showFab: boolean,
     fabPosition: AnimatedValue
 }
 
@@ -50,23 +48,18 @@ class HomeScreen extends React.Component<Props, State> {
     colors: Object;
 
     isLoggedIn: boolean | null;
-    isAnimationDownPlaying: boolean;
-    isAnimationUpPlaying: boolean;
 
-    downAnimation;
+    fabRef: Object;
-    upAnimation;
 
     state = {
-        showFab: true,
         fabPosition: new Animated.Value(0),
     };
 
     constructor(props) {
         super(props);
         this.colors = props.theme.colors;
-        this.isAnimationDownPlaying = false;
-        this.isAnimationUpPlaying = false;
         this.isLoggedIn = null;
+        this.fabRef = React.createRef();
     }
 
     /**
@@ -460,36 +453,8 @@ class HomeScreen extends React.Component<Props, State> {
 
     openScanner = () => this.props.navigation.navigate("scanner");
 
-    onScroll = ({nativeEvent}: Object) => {
+    onScroll = (event: Object) => {
-        if (nativeEvent.velocity.y > 0.2) { // Go down
+        this.fabRef.current.onScroll(event);
-            if (!this.isAnimationDownPlaying) {
-                this.isAnimationDownPlaying = true;
-                if (this.isAnimationUpPlaying)
-                    this.upAnimation.stop();
-                this.downAnimation = Animated.spring(this.state.fabPosition, {
-                    toValue: 100,
-                    duration: 50,
-                    useNativeDriver: true,
-                });
-                this.downAnimation.start(() => {
-                    this.isAnimationDownPlaying = false
-                });
-            }
-        } else if (nativeEvent.velocity.y < -0.2) { // Go up
-            if (!this.isAnimationUpPlaying) {
-                this.isAnimationUpPlaying = true;
-                if (this.isAnimationDownPlaying)
-                    this.downAnimation.stop();
-                this.upAnimation = Animated.spring(this.state.fabPosition, {
-                    toValue: 0,
-                    duration: 50,
-                    useNativeDriver: true,
-                });
-                this.upAnimation.start(() => {
-                    this.isAnimationUpPlaying = false
-                });
-            }
-        }
     };
 
     render() {
@@ -507,10 +472,7 @@ class HomeScreen extends React.Component<Props, State> {
                     onScroll={this.onScroll}
                 />
                 <AnimatedFAB
-                    style={{
+                    ref={this.fabRef}
-                        ...styles.fab,
-                        transform: [{translateY: this.state.fabPosition}]
-                    }}
                     icon="qrcode-scan"
                     onPress={this.openScanner}
                 />
@@ -519,13 +481,4 @@ class HomeScreen extends React.Component<Props, State> {
     }
 }
 
-const styles = StyleSheet.create({
-    fab: {
-        position: 'absolute',
-        margin: 16,
-        right: 0,
-        bottom: 0,
-    },
-});
-
 export default withTheme(HomeScreen);

src/screens/Websites/PlanexScreen.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import ThemeManager from "../../managers/ThemeManager";
 import WebViewScreen from "../../components/Screens/WebViewScreen";
-import {Avatar, Banner} from "react-native-paper";
+import {Avatar, Banner, withTheme} from "react-native-paper";
 import i18n from "i18n-js";
 import {View} from "react-native";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
@@ -11,9 +11,11 @@ import AlertDialog from "../../components/Dialog/AlertDialog";
 import {withCollapsible} from "../../utils/withCollapsible";
 import {dateToString, getTimeOnlyString} from "../../utils/Planning";
 import DateManager from "../../managers/DateManager";
+import AnimatedBottomBar from "../../components/Custom/AnimatedBottomBar";
 
 type Props = {
     navigation: Object,
+    theme: Object,
     collapsibleStack: Object,
 }
 
@@ -115,6 +117,7 @@ const LISTEN_TO_MESSAGES =
 class PlanexScreen extends React.Component<Props, State> {
 
     webScreenRef: Object;
+    barRef: Object;
 
     customInjectedJS: string;
     onHideBanner: Function;
@@ -134,6 +137,7 @@ class PlanexScreen extends React.Component<Props, State> {
     constructor() {
         super();
         this.webScreenRef = React.createRef();
+        this.barRef = React.createRef();
         this.customInjectedJS =
             "$(document).ready(function() {" +
             OBSERVE_MUTATIONS_INJECTED +
@@ -174,9 +178,8 @@ class PlanexScreen extends React.Component<Props, State> {
         this.props.navigation.navigate('settings');
     }
 
-    sendMessage = () => {
+    sendMessage = (msg: string) => {
-        let data= 'coucou'
+        this.webScreenRef.current.postMessage(msg);
-        this.webScreenRef.current.postMessage(data);
     }
 
     onMessage = (event: Object) => {
@@ -202,6 +205,10 @@ class PlanexScreen extends React.Component<Props, State> {
         });
     };
 
+    onScroll = (event: Object) => {
+        this.barRef.current.onScroll(event);
+    };
+
     render() {
         const nav = this.props.navigation;
         const {containerPaddingTop} = this.props.collapsibleStack;
@@ -243,10 +250,12 @@ class PlanexScreen extends React.Component<Props, State> {
                     url={PLANEX_URL}
                     customJS={this.customInjectedJS}
                     onMessage={this.onMessage}
+                    onScroll={this.onScroll}
                 />
+                <AnimatedBottomBar ref={this.barRef}/>
             </View>
         );
     }
 }
 
-export default withCollapsible(PlanexScreen);
+export default withCollapsible(withTheme(PlanexScreen));