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}}>
+                            <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,12 +127,8 @@ class CustomTabBar extends React.Component<Props, State> {
     render() {
         this.props.navigation.addListener('state', this.onRouteChange);
         return (
-            <SafeAreaView>
             <Animated.View
-                    ref={this.tabRef}
+                useNativeDriver
-                    // animation={"fadeInUp"}
-                    // duration={500}
-                    // useNativeDriver
                 style={{
                     flexDirection: 'row',
                     height: CustomTabBar.TAB_BAR_HEIGHT,
@@ -149,12 +137,11 @@ class CustomTabBar extends React.Component<Props, State> {
                     bottom: 0,
                     left: 0,
                     backgroundColor: this.props.theme.colors.surface,
-                        transform: [{translateY: this.state.translateY}]
+                    transform: [{translateY: this.state.translateY}],
                 }}
             >
                 {this.props.state.routes.map(this.renderIcon)}
             </Animated.View>
-            </SafeAreaView>
         );
     }
 }

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,18 +38,17 @@ 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 (fetchedData == null || Object.keys(fetchedData).length === 0) {
-        if (Object.keys(fetchedData).length === 0) {
             result = [
                 {
-                    title: '',
+                    title: i18n.t("general.notAvailable"),
                     data: [],
                     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
@@ -72,8 +61,9 @@ class SelfMenuScreen extends React.Component<Props> {
                     }
                 );
             }
-        return result
         }
+        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": {