src/components/Custom/AnimatedBottomBar.js

@@ -136,7 +136,7 @@ const styles = StyleSheet.create({
     fab: {
         position: 'absolute',
         alignSelf: 'center',
-        top: '-25%',
+        top: -10,
     }
 });
 

src/components/Custom/AutoHideComponent.js

@@ -21,8 +21,6 @@ export default class AutoHideComponent extends React.Component<Props, State> {
     downAnimation;
     upAnimation;
 
-    lastOffset: number;
-
     state = {
         fabPosition: new Animated.Value(0),
     };
@@ -32,8 +30,7 @@ export default class AutoHideComponent extends React.Component<Props, State> {
     }
 
     onScroll({nativeEvent}: Object) {
-        const speed = this.lastOffset - nativeEvent.contentOffset.y;
+        if (nativeEvent.velocity.y > 0.2) { // Go down
-        if (speed < -5) { // Go down
             if (!this.isAnimationDownPlaying) {
                 this.isAnimationDownPlaying = true;
                 if (this.isAnimationUpPlaying)
@@ -47,7 +44,7 @@ export default class AutoHideComponent extends React.Component<Props, State> {
                     this.isAnimationDownPlaying = false
                 });
             }
-        } else if (speed > 5) { // Go up
+        } else if (nativeEvent.velocity.y < -0.2) { // Go up
             if (!this.isAnimationUpPlaying) {
                 this.isAnimationUpPlaying = true;
                 if (this.isAnimationDownPlaying)
@@ -62,7 +59,6 @@ export default class AutoHideComponent extends React.Component<Props, State> {
                 });
             }
         }
-        this.lastOffset = nativeEvent.contentOffset.y;
     }
 
     render() {

src/components/Screens/WebViewScreen.js

@@ -113,9 +113,8 @@ class WebViewScreen extends React.PureComponent<Props> {
 
     onOpenClicked = () => Linking.openURL(this.props.url);
 
-    injectJavaScript = (script: string) => {
+    postMessage = (message: string) => {
-        // console.log(this.webviewRef.current.getNode().webViewRef.current);
+        this.webviewRef.current.getNode().postMessage(message);
-        this.webviewRef.current.getNode().injectJavaScript(script);
     }
 
     /**

src/navigation/MainTabNavigator.js

@@ -13,7 +13,7 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
 import PlanexScreen from '../screens/Websites/PlanexScreen';
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import AsyncStorageManager from "../managers/AsyncStorageManager";
-import {FAB, useTheme, withTheme} from 'react-native-paper';
+import {useTheme, withTheme} from 'react-native-paper';
 import i18n from "i18n-js";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ScannerScreen from "../screens/ScannerScreen";
@@ -22,6 +22,7 @@ import FeedItemScreen from "../screens/FeedItemScreen";
 import {createCollapsibleStack} from "react-navigation-collapsible";
 import GroupSelectionScreen from "../screens/GroupSelectionScreen";
 
+
 const TAB_ICONS = {
     home: 'triangle',
     planning: 'calendar-range',
@@ -329,31 +330,18 @@ class TabNavigator extends React.Component<Props> {
         this.createHomeStackComponent = () => HomeStackComponent(props.defaultRoute, props.defaultData);
     }
 
-    getHomeButton(focused: boolean) {
-        let icon = focused ? require('../../assets/tab-icon.png') : require('../../assets/tab-icon-outline.png')
-        return (
-                <FAB
-                    icon={icon}
-                    small
-                    style={{position: 'absolute', top: '-25%'}}/>
-        );
-    }
-
     render() {
         return (
             <Tab.Navigator
                 initialRouteName={this.defaultRoute}
-                barStyle={{backgroundColor: this.props.theme.colors.surface, overflow: 'visible'}}
+                barStyle={{backgroundColor: this.props.theme.colors.surface}}
                 screenOptions={({route}) => ({
-                    tabBarIcon: ({focused, color}) => {
+                    tabBarIcon: ({focused, color, size}) => {
                         let icon = TAB_ICONS[route.name];
+                        // tintColor is ignoring activeColor and inactiveColor for some reason
                         icon = focused ? icon : icon + ('-outline');
-                        if (route.name !== "home")
+                        return <MaterialCommunityIcons name={icon} color={color} size={26}/>;
-                            return <MaterialCommunityIcons name={icon} color={color} size={26}/>;
-                        else
-                            return this.getHomeButton(focused);
                     },
-                    tabBarLabel: route.name !== 'home' ? undefined : ''
                 })}
                 activeColor={this.props.theme.colors.primary}
                 inactiveColor={this.props.theme.colors.tabIcon}

src/screens/Websites/PlanexScreen.js

@@ -105,15 +105,15 @@ calendar.option({
   }
 });`;
 
-const EXEC_COMMAND = `
+const LISTEN_TO_MESSAGES = `
-function execCommand(event) {
+document.addEventListener("message", function(event) {
-    alert(JSON.stringify(event));
+    //alert(event.data);
     var data = JSON.parse(event.data);
     if (data.action === "setGroup")
         displayAde(data.data);
     else
         $('#calendar').fullCalendar(data.action, data.data);
-};`
+}, false);`
 
 const CUSTOM_CSS = "body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}.fc-toolbar .fc-center{width:100%}.fc-toolbar .fc-center>*{float:none;width:100%;margin:0}#entite{margin-bottom:5px!important}#entite,#groupe{width:calc(100% - 20px);margin:0 10px}#groupe_visibility{width:100%}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
 const CUSTOM_CSS_DARK = "body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
@@ -195,17 +195,15 @@ class PlanexScreen extends React.Component<Props, State> {
             + FULL_CALENDAR_SETTINGS
             + "displayAde(" + groupID + ");" // Reset Ade
             + (DateManager.isWeekend(new Date()) ? "calendar.next()" : "")
+            + LISTEN_TO_MESSAGES
             + INJECT_STYLE;
 
         if (ThemeManager.getNightMode())
             this.customInjectedJS += "$('head').append('<style>" + CUSTOM_CSS_DARK + "</style>');";
 
         this.customInjectedJS +=
-            'removeAlpha();'
+            'removeAlpha();' +
-            + '});'
+            '});true;'; // Prevents crash on ios
-            + EXEC_COMMAND
-            + "function cc(msg) {alert(msg)};"
-            + 'true;'; // Prevents crash on ios
     }
 
     // componentWillUpdate(prevProps: Props) {
@@ -236,12 +234,7 @@ class PlanexScreen extends React.Component<Props, State> {
     };
 
     sendMessage = (action: string, data: any) => {
-        let command;
+        this.webScreenRef.current.postMessage(JSON.stringify({action: action, data: data}));
-        if (action === "setGroup")
-            command = "displayAde(" + data + ")";
-        else
-            command = "$('#calendar').fullCalendar('" + action + "', '" + data + "')";
-        this.webScreenRef.current.injectJavaScript(command + ';true;');
     }
 
     onMessage = (event: Object) => {