fix no group selected screen

src/components/Screens/ErrorView.tsx

@@ -19,7 +19,7 @@
 
 import * as React from 'react';
 import { Button, Subheading, useTheme } from 'react-native-paper';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import i18n from 'i18n-js';
 import * as Animatable from 'react-native-animatable';
@@ -36,6 +36,7 @@ type Props = {
     icon: string;
     onPress: () => void;
   };
+  style?: ViewStyle;
 };
 
 const styles = StyleSheet.create({
@@ -147,7 +148,7 @@ function ErrorView(props: Props) {
   const { button } = props;
 
   return (
-    <View style={styles.outer}>
+    <View style={{ ...styles.outer, ...props.style }}>
       <Animatable.View
         style={{
           ...styles.outer,

src/components/Screens/PlanexWebview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import GENERAL_STYLES from '../../constants/Styles';
 import Urls from '../../constants/Urls';
 import DateManager from '../../managers/DateManager';
@@ -15,6 +15,14 @@ type Props = {
   onMessage: (event: { nativeEvent: { data: string } }) => void;
 };
 
+const styles = StyleSheet.create({
+  error: {
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+  },
+});
+
 // Watch for changes in the calendar and call the remove alpha function to prevent invisible events
 const OBSERVE_MUTATIONS_INJECTED =
   'function removeAlpha(node) {\n' +
@@ -99,19 +107,21 @@ const generateInjectedJS = (group: PlanexGroupType | undefined) => {
 function PlanexWebview(props: Props) {
   return (
     <View style={GENERAL_STYLES.flex}>
-      {!props.currentGroup ? (
-        <ErrorView
-          icon={'account-clock'}
-          message={i18n.t('screens.planex.noGroupSelected')}
-        />
-      ) : null}
       <WebViewScreen
         url={Urls.planex.planning}
         initialJS={generateInjectedJS(props.currentGroup)}
         injectJS={props.injectJS}
         onMessage={props.onMessage}
         showAdvancedControls={false}
+        showControls={props.currentGroup !== undefined}
       />
+      {!props.currentGroup ? (
+        <ErrorView
+          icon={'account-clock'}
+          message={i18n.t('screens.planex.noGroupSelected')}
+          style={styles.error}
+        />
+      ) : null}
     </View>
   );
 }

src/components/Screens/WebViewScreen.tsx

@@ -57,6 +57,7 @@ type Props = {
   injectJS?: string;
   customPaddingFunction?: null | ((padding: number) => string);
   showAdvancedControls?: boolean;
+  showControls?: boolean;
 };
 
 const AnimatedWebView = Animated.createAnimatedComponent(WebView);
@@ -110,13 +111,20 @@ function WebViewScreen(props: Props) {
   );
 
   useLayoutEffect(() => {
+    if (props.showControls !== false) {
       navigation.setOptions({
         headerRight: props.showAdvancedControls
           ? getAdvancedButtons
           : getBasicButton,
       });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [navigation, props.showAdvancedControls, navState?.url]);
+  }, [
+    navigation,
+    props.showAdvancedControls,
+    navState?.url,
+    props.showControls,
+  ]);
 
   useEffect(() => {
     if (props.injectJS && props.injectJS !== currentInjectedJS) {