Added new home tab icon

src/components/Custom/AnimatedBottomBar.js

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

src/components/Custom/AutoHideComponent.js

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

src/components/Screens/WebViewScreen.js

@@ -113,8 +113,9 @@ class WebViewScreen extends React.PureComponent<Props> {
 
     onOpenClicked = () => Linking.openURL(this.props.url);
 
-    postMessage = (message: string) => {
-        this.webviewRef.current.getNode().postMessage(message);
+    injectJavaScript = (script: string) => {
+        // console.log(this.webviewRef.current.getNode().webViewRef.current);
+        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 {useTheme, withTheme} from 'react-native-paper';
+import {FAB, useTheme, withTheme} from 'react-native-paper';
 import i18n from "i18n-js";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ScannerScreen from "../screens/ScannerScreen";
@@ -22,7 +22,6 @@ import FeedItemScreen from "../screens/FeedItemScreen";
 import {createCollapsibleStack} from "react-navigation-collapsible";
 import GroupSelectionScreen from "../screens/GroupSelectionScreen";
 
-
 const TAB_ICONS = {
     home: 'triangle',
     planning: 'calendar-range',
@@ -330,18 +329,31 @@ 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}}
+                barStyle={{backgroundColor: this.props.theme.colors.surface, overflow: 'visible'}}
                 screenOptions={({route}) => ({
-                    tabBarIcon: ({focused, color, size}) => {
+                    tabBarIcon: ({focused, color}) => {
                         let icon = TAB_ICONS[route.name];
-                        // tintColor is ignoring activeColor and inactiveColor for some reason
                         icon = focused ? icon : icon + ('-outline');
-                        return <MaterialCommunityIcons name={icon} color={color} size={26}/>;
+                        if (route.name !== "home")
+                            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 LISTEN_TO_MESSAGES = `
-document.addEventListener("message", function(event) {
-    //alert(event.data);
+const EXEC_COMMAND = `
+function execCommand(event) {
+    alert(JSON.stringify(event));
     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,15 +195,17 @@ 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();' +
-            '});true;'; // Prevents crash on ios
+            'removeAlpha();'
+            + '});'
+            + EXEC_COMMAND
+            + "function cc(msg) {alert(msg)};"
+            + 'true;'; // Prevents crash on ios
     }
 
     // componentWillUpdate(prevProps: Props) {
@@ -234,7 +236,12 @@ class PlanexScreen extends React.Component<Props, State> {
     };
 
     sendMessage = (action: string, data: any) => {
-        this.webScreenRef.current.postMessage(JSON.stringify({action: action, data: data}));
+        let command;
+        if (action === "setGroup")
+            command = "displayAde(" + data + ")";
+        else
+            command = "$('#calendar').fullCalendar('" + action + "', '" + data + "')";
+        this.webScreenRef.current.injectJavaScript(command + ';true;');
     }
 
     onMessage = (event: Object) => {