Fixed padding breaking other components offsets

App.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Platform, StatusBar, View, YellowBox} from 'react-native';
+import {Platform, SafeAreaView, StatusBar, View, YellowBox} from 'react-native';
 import LocaleManager from './src/managers/LocaleManager';
 import AsyncStorageManager from "./src/managers/AsyncStorageManager";
 import CustomIntroSlider from "./src/components/Overrides/CustomIntroSlider";
@@ -192,12 +192,14 @@ export default class App extends React.Component<Props, State> {
                 <PaperProvider theme={this.state.currentTheme}>
                     <OverflowMenuProvider>
                         <View style={{backgroundColor: ThemeManager.getCurrentTheme().colors.background, flex: 1}}>
-                            <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
-                                <MainNavigator
-                                    defaultHomeRoute={this.defaultHomeRoute}
-                                    defaultHomeData={this.defaultHomeData}
-                                />
-                            </NavigationContainer>
+                            <SafeAreaView style={{flex: 1}}>
+                                <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
+                                    <MainNavigator
+                                        defaultHomeRoute={this.defaultHomeRoute}
+                                        defaultHomeData={this.defaultHomeData}
+                                    />
+                                </NavigationContainer>
+                            </SafeAreaView>
                         </View>
                     </OverflowMenuProvider>
                 </PaperProvider>

src/components/Tabbar/CustomTabBar.js

@@ -3,7 +3,6 @@ import {withTheme} from 'react-native-paper';
 import TabIcon from "./TabIcon";
 import TabHomeIcon from "./TabHomeIcon";
 import {Animated} from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
 
 type Props = {
     state: Object,
@@ -37,13 +36,6 @@ class CustomTabBar extends React.Component<Props, State> {
         barSynced: false,// Is the bar synced with the header for animations?
     }
 
-    tabRef: Object;
-
-    constructor(props) {
-        super(props);
-        this.tabRef = React.createRef();
-    }
-
     onItemPress(route: Object, currentIndex: number, destIndex: number) {
         const event = this.props.navigation.emit({
             type: 'tabPress',
@@ -135,26 +127,21 @@ class CustomTabBar extends React.Component<Props, State> {
     render() {
         this.props.navigation.addListener('state', this.onRouteChange);
         return (
-            <SafeAreaView>
-                <Animated.View
-                    ref={this.tabRef}
-                    // animation={"fadeInUp"}
-                    // duration={500}
-                    // useNativeDriver
-                    style={{
-                        flexDirection: 'row',
-                        height: CustomTabBar.TAB_BAR_HEIGHT,
-                        width: '100%',
-                        position: 'absolute',
-                        bottom: 0,
-                        left: 0,
-                        backgroundColor: this.props.theme.colors.surface,
-                        transform: [{translateY: this.state.translateY}]
-                    }}
-                >
-                    {this.props.state.routes.map(this.renderIcon)}
-                </Animated.View>
-            </SafeAreaView>
+            <Animated.View
+                useNativeDriver
+                style={{
+                    flexDirection: 'row',
+                    height: CustomTabBar.TAB_BAR_HEIGHT,
+                    width: '100%',
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    backgroundColor: this.props.theme.colors.surface,
+                    transform: [{translateY: this.state.translateY}],
+                }}
+            >
+                {this.props.state.routes.map(this.renderIcon)}
+            </Animated.View>
         );
     }
 }

src/screens/Services/SelfMenuScreen.js

@@ -6,11 +6,15 @@ import DateManager from "../../managers/DateManager";
 import WebSectionList from "../../components/Screens/WebSectionList";
 import {Card, Text, withTheme} from 'react-native-paper';
 import AprilFoolsManager from "../../managers/AprilFoolsManager";
+import {StackNavigationProp} from "@react-navigation/stack";
+import type {CustomTheme} from "../../managers/ThemeManager";
+import i18n from 'i18n-js';
 
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
 
 type Props = {
-    navigation: Object,
+    navigation: StackNavigationProp,
+    theme: CustomTheme,
 }
 
 /**
@@ -18,20 +22,6 @@ type Props = {
  */
 class SelfMenuScreen extends React.Component<Props> {
 
-    getRenderItem: Function;
-    getRenderSectionHeader: Function;
-    createDataset: Function;
-    colors: Object;
-
-    constructor(props) {
-        super(props);
-
-        this.getRenderItem = this.getRenderItem.bind(this);
-        this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this);
-        this.createDataset = this.createDataset.bind(this);
-        this.colors = props.theme.colors;
-    }
-
     /**
      * Extract a key for the given item
      *
@@ -48,32 +38,32 @@ class SelfMenuScreen extends React.Component<Props> {
      * @param fetchedData
      * @return {[]}
      */
-    createDataset(fetchedData: Object) {
+    createDataset = (fetchedData: Object) => {
         let result = [];
-        // Prevent crash by giving a default value when fetchedData is empty (not yet available)
-        if (Object.keys(fetchedData).length === 0) {
+        if (fetchedData == null || Object.keys(fetchedData).length === 0) {
             result = [
                 {
-                    title: '',
+                    title: i18n.t("general.notAvailable"),
                     data: [],
                     keyExtractor: this.getKeyExtractor
                 }
             ];
-        }
-        if (AprilFoolsManager.getInstance().isAprilFoolsEnabled() && fetchedData.length > 0)
-            fetchedData[0].meal[0].foodcategory = AprilFoolsManager.getFakeMenuItem(fetchedData[0].meal[0].foodcategory);
-        // fetched data is an array here
-        for (let i = 0; i < fetchedData.length; i++) {
-            result.push(
-                {
-                    title: DateManager.getInstance().getTranslatedDate(fetchedData[i].date),
-                    data: fetchedData[i].meal[0].foodcategory,
-                    keyExtractor: this.getKeyExtractor,
-                }
-            );
+        } else {
+            if (AprilFoolsManager.getInstance().isAprilFoolsEnabled() && fetchedData.length > 0)
+                fetchedData[0].meal[0].foodcategory = AprilFoolsManager.getFakeMenuItem(fetchedData[0].meal[0].foodcategory);
+            // fetched data is an array here
+            for (let i = 0; i < fetchedData.length; i++) {
+                result.push(
+                    {
+                        title: DateManager.getInstance().getTranslatedDate(fetchedData[i].date),
+                        data: fetchedData[i].meal[0].foodcategory,
+                        keyExtractor: this.getKeyExtractor,
+                    }
+                );
+            }
         }
         return result
-    }
+    };
 
     /**
      * Gets the render section header
@@ -81,7 +71,7 @@ class SelfMenuScreen extends React.Component<Props> {
      * @param section The section to render the header from
      * @return {*}
      */
-    getRenderSectionHeader({section}: Object) {
+    getRenderSectionHeader = ({section}: Object) => {
         return (
             <Card style={{
                 width: '95%',
@@ -105,7 +95,7 @@ class SelfMenuScreen extends React.Component<Props> {
                 />
             </Card>
         );
-    }
+    };
 
     /**
      * Gets a FlatList render item
@@ -113,7 +103,7 @@ class SelfMenuScreen extends React.Component<Props> {
      * @param item The item to render
      * @return {*}
      */
-    getRenderItem({item}: Object) {
+    getRenderItem = ({item}: Object) => {
         return (
             <Card style={{
                 flex: 0,
@@ -129,7 +119,7 @@ class SelfMenuScreen extends React.Component<Props> {
                     marginLeft: 'auto',
                     marginRight: 'auto',
                     borderBottomWidth: 1,
-                    borderBottomColor: this.colors.primary,
+                    borderBottomColor: this.theme.colors.primary,
                     marginTop: 5,
                     marginBottom: 5,
                 }}/>
@@ -147,7 +137,7 @@ class SelfMenuScreen extends React.Component<Props> {
                 </Card.Content>
             </Card>
         );
-    }
+    };
 
     /**
      * Formats the given string to make sure it starts with a capital letter

translations/en.json

@@ -343,7 +343,8 @@
     "networkError": "Unable to contact servers. Make sure you are connected to Internet.",
     "goBack": "Go Back",
     "goForward": "Go Forward",
-    "openInBrowser": "Open in Browser"
+    "openInBrowser": "Open in Browser",
+    "notAvailable": "Not available"
   },
   "date": {
     "daysOfWeek": {

translations/fr.json

@@ -343,7 +343,8 @@
     "networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet.",
     "goBack": "Suivant",
     "goForward": "Précédent",
-    "openInBrowser": "Ouvrir dans le navigateur"
+    "openInBrowser": "Ouvrir dans le navigateur",
+    "notAvailable": "Non disponible"
   },
   "date": {
     "daysOfWeek": {