refacto: centralize TAB_BAR_HEIGHT in TabNavigator

Author: ignyx

src/components/Lists/EventList.tsx

@@ -30,7 +30,6 @@ import { useTheme } from 'react-native-paper';
 import { dateToDateStringHuman, PlanningEventType } from '../../utils/Planning';
 import GENERAL_STYLES from '../../constants/Styles';
 import i18n from 'i18n-js';
-import { TAB_BAR_HEIGHT } from '../Tabbar/CustomTabBar';
 
 type EventListProps = {
   eventsByDate: { [key: string]: Array<PlanningEventType> };
@@ -179,16 +178,12 @@ function EventList(props: EventListProps) {
           ) : undefined
         }
         stickySectionHeadersEnabled={true}
-        contentContainerStyle={styles.contentContainer}
       />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  contentContainer: {
-    paddingBottom: TAB_BAR_HEIGHT,
-  },
   sectionHeader: {
     padding: 15,
     borderBottomWidth: 1,

src/components/Overrides/CustomModal.tsx

@@ -21,7 +21,6 @@ import React, { Ref } from 'react';
 import { useTheme } from 'react-native-paper';
 import { Modalize } from 'react-native-modalize';
 import { View } from 'react-native-animatable';
-import { TAB_BAR_HEIGHT } from '../Tabbar/CustomTabBar';
 
 type Props = {
   children?: React.ReactChild | null;
@@ -44,13 +43,7 @@ function CustomModal(props: Props, ref?: Ref<Modalize>) {
       modalStyle={{ backgroundColor: theme.colors.card }}
       handleStyle={{ backgroundColor: theme.colors.primary }}
     >
-      <View
-        style={{
-          paddingBottom: TAB_BAR_HEIGHT,
-        }}
-      >
-        {children}
-      </View>
+      <View style={{}}>{children}</View>
     </Modalize>
   );
 }

src/navigation/TabNavigator.tsx

@@ -28,7 +28,9 @@ import HomeScreen from '../screens/Home/HomeScreen';
 import PlanningScreen from '../screens/Planning/PlanningScreen';
 import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
 import PlanexScreen from '../screens/Planex/PlanexScreen';
-import CustomTabBar from '../components/Tabbar/CustomTabBar';
+import CustomTabBar, {
+  TAB_BAR_HEIGHT,
+} from '../components/Tabbar/CustomTabBar';
 import WebsitesHomeScreen from '../screens/Services/ServicesScreen';
 import Mascot, { MASCOT_STYLE } from '../components/Mascot/Mascot';
 import { usePreferences } from '../context/preferencesContext';
@@ -129,6 +131,11 @@ function TabNavigator(props: PropsType) {
         <CustomTabBar {...tabProps} labels={LABELS} icons={ICONS} />
       )}
       backBehavior={'initialRoute'}
+      screenOptions={{
+        sceneStyle: {
+          paddingBottom: TAB_BAR_HEIGHT,
+        },
+      }}
     >
       <Tab.Screen
         name={TabRoutes.Services}

src/screens/About/AboutDependenciesScreen.tsx

@@ -21,7 +21,7 @@ import * as React from 'react';
 import { List } from 'react-native-paper';
 import { View } from 'react-native-animatable';
 import { FlatList } from 'react-native';
-import { TAB_BAR_HEIGHT } from '../../components/Tabbar/CustomTabBar';
+
 import packageJson from '../../../package.json';
 
 type ListItemType = {
@@ -80,7 +80,6 @@ export default function AboutDependenciesScreen() {
         // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
         removeClippedSubviews
         getItemLayout={getItemLayout}
-        contentContainerStyle={{ paddingBottom: TAB_BAR_HEIGHT }}
       />
     </View>
   );

src/screens/About/AboutScreen.tsx

@@ -23,7 +23,7 @@ import i18n from 'i18n-js';
 import { StackNavigationProp } from '@react-navigation/stack';
 import packageJson from '../../../package.json';
 import { FlatList } from 'react-native';
-import { TAB_BAR_HEIGHT } from '../../components/Tabbar/CustomTabBar';
+
 import OptionsDialog from '../../components/Dialogs/OptionsDialog';
 import type { OptionsDialogButtonType } from '../../components/Dialogs/OptionsDialog';
 import GENERAL_STYLES from '../../constants/Styles';
@@ -182,12 +182,7 @@ function AboutScreen() {
 
   return (
     <View style={GENERAL_STYLES.flex}>
-      <FlatList
-        style={styles.list}
-        data={DATA_ORDER}
-        renderItem={renderItem}
-        contentContainerStyle={{ paddingBottom: TAB_BAR_HEIGHT }}
-      />
+      <FlatList style={styles.list} data={DATA_ORDER} renderItem={renderItem} />
       {dialog != null ? (
         <OptionsDialog
           visible={dialog != null}

src/screens/About/DebugScreen.tsx

@@ -30,7 +30,7 @@ import {
 import { Modalize } from 'react-native-modalize';
 import CustomModal from '../../components/Overrides/CustomModal';
 import { FlatList } from 'react-native';
-import { TAB_BAR_HEIGHT } from '../../components/Tabbar/CustomTabBar';
+
 import { usePreferences } from '../../context/preferencesContext';
 import {
   defaultPreferences,
@@ -155,7 +155,6 @@ function DebugScreen() {
         data={currentPreferences}
         extraData={currentPreferences}
         renderItem={getRenderItem}
-        contentContainerStyle={{ paddingBottom: TAB_BAR_HEIGHT }}
       />
     </View>
   );

src/screens/Amicale/AmicaleContactScreen.tsx

@@ -21,7 +21,6 @@ import * as React from 'react';
 import { FlatList, Image, Linking, StyleSheet, View } from 'react-native';
 import { Avatar, Card, List, Text } from 'react-native-paper';
 import i18n from 'i18n-js';
-import { TAB_BAR_HEIGHT } from '../../components/Tabbar/CustomTabBar';
 
 const AMICALE_LOGO = require('../../../assets/amicale.png');
 
@@ -171,13 +170,7 @@ function AmicaleContactScreen() {
   };
 
   // We cannot wrap flatlists inside scrollviews
-  return (
-    <FlatList
-      data={[{ key: '1' }]}
-      renderItem={renderItem}
-      contentContainerStyle={{ paddingBottom: TAB_BAR_HEIGHT }}
-    />
-  );
+  return <FlatList data={[{ key: '1' }]} renderItem={renderItem} />;
 }
 
 export default AmicaleContactScreen;

src/screens/Amicale/Clubs/ClubAboutScreen.tsx

@@ -23,7 +23,7 @@ import { Card, Avatar, Text } from 'react-native-paper';
 import i18n from 'i18n-js';
 import Autolink from 'react-native-autolink';
 import { ScrollView } from 'react-native';
-import { TAB_BAR_HEIGHT } from '../../../components/Tabbar/CustomTabBar';
+
 const AMICALE_ICON = require('../../../../assets/amicale.png');
 
 const CONTACT_LINK = 'clubs@amicale-insat.fr';
@@ -51,10 +51,7 @@ const styles = StyleSheet.create({
 
 function ClubAboutScreen() {
   return (
-    <ScrollView
-      style={styles.container}
-      contentContainerStyle={{ paddingBottom: TAB_BAR_HEIGHT }}
-    >
+    <ScrollView style={styles.container}>
       <View style={styles.imageContainer}>
         <Image
           source={AMICALE_ICON}

src/screens/Amicale/Clubs/ClubDisplayScreen.tsx

@@ -29,7 +29,7 @@ import {
 } from 'react-native-paper';
 import i18n from 'i18n-js';
 import CustomHTML from '../../../components/Overrides/CustomHTML';
-import { TAB_BAR_HEIGHT } from '../../../components/Tabbar/CustomTabBar';
+
 import type { Club, ClubRespo } from './ClubListScreen';
 import { ScrollView } from 'react-native';
 import ImageGalleryButton from '../../../components/Media/ImageGalleryButton';
@@ -155,7 +155,7 @@ function ClubDisplayScreen(props: Props) {
     return (
       <Card
         style={{
-          marginBottom: TAB_BAR_HEIGHT + 20,
+          marginBottom: 20,
           ...styles.card,
         }}
       >
@@ -219,10 +219,7 @@ function ClubDisplayScreen(props: Props) {
     if (club) {
       console.log(club);
       return (
-        <ScrollView
-          style={styles.scroll}
-          contentContainerStyle={{ paddingBottom: TAB_BAR_HEIGHT }}
-        >
+        <ScrollView style={styles.scroll}>
           {getCategoriesRender(club.categories)}
           {club.logo !== null ? (
             <ImageGalleryButton

src/screens/Amicale/Equipment/EquipmentConfirmScreen.tsx

@@ -30,7 +30,7 @@ import { StyleSheet, View } from 'react-native';
 import i18n from 'i18n-js';
 import { getRelativeDateString } from '../../../utils/EquipmentBooking';
 import { ScrollView } from 'react-native';
-import { TAB_BAR_HEIGHT } from '../../../components/Tabbar/CustomTabBar';
+
 import { StackScreenProps } from '@react-navigation/stack';
 import {
   MainRoutes,
@@ -93,7 +93,7 @@ function EquipmentConfirmScreen(props: Props) {
       });
     }
     return (
-      <ScrollView contentContainerStyle={{ paddingBottom: TAB_BAR_HEIGHT }}>
+      <ScrollView>
         <Card style={styles.card}>
           <Card.Content>
             <View style={GENERAL_STYLES.flex}>