Nmf app 409 - feat: large header title

app/components/InfoButton/InfoButton.styles.ts

@@ -1,11 +1,9 @@
 import { StyleSheet } from "react-native";
 
-import { Layout } from "constant";
 import { Colors } from "style";
 
 export default StyleSheet.create({
   infoIcon: {
-    marginRight: Layout.PADDING_HORIZONTAL,
     color: Colors.secondary,
   },
 });

app/components/InfoButton/__tests__/__snapshots__/InfoButton.test.tsx.snap

@@ -11,7 +11,6 @@ exports[`renders correctly 1`] = `
     style={
       {
         "color": "#3957D0",
-        "marginRight": 16,
       }
     }
   />

app/constant/Layout.ts

@@ -17,6 +17,6 @@ const screen = {
 };
 
 // Standard Android Bottom Tab Bar height (typically 56dp) plus a small 4dp buffer. We must use a hardcoded value here because the dynamic useBottomTabBarHeight hook causes a crash when used outside the Tab Navigator context (which is the case with our Native Tabs setup)
-const ANDROID_TAB_BAR_HEIGHT = 60;
+const ANDROID_TAB_BAR_HEIGHT = 90;
 
 export { screen, isSmallDevice, PADDING_HORIZONTAL, SPACING, ANDROID_TAB_BAR_HEIGHT };

app/interfaces/navigation/navigation.ts

@@ -1,7 +1,8 @@
 import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 interface NavStatelessComponent extends React.FC {
-  navigationOptions?: StackNavigationOptions;
+  navigationOptions?: StackNavigationOptions | NativeStackNavigationOptions;
 }
 
 export default NavStatelessComponent;

app/navigation/Navigator/BottomTab/ActNavigator.tsx

@@ -1,22 +1,22 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import ActTabNavigator from "./ActTabNavigator";
 import ActDetailScreen from "../../../screens/ActDetail";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const ActNavigator = (): React.ReactElement => (
   <Stack.Navigator id="ActStack">
     <Stack.Screen
       name="ActTabNavigator"
-      options={ActTabNavigator.navigationOptions}
+      options={ActTabNavigator.navigationOptions as NativeStackNavigationOptions}
       component={ActTabNavigator}
     />
     <Stack.Screen
       name="ActDetail"
       component={ActDetailScreen}
-      options={ActDetailScreen.navigationOptions}
+      options={ActDetailScreen.navigationOptions as NativeStackNavigationOptions}
     />
   </Stack.Navigator>
 );

app/navigation/Navigator/BottomTab/ActTabNavigator.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import { Text } from "components";
 import { t } from "utils";
-import { ComponentsStyle, Colors, Font } from "style";
+import { Colors, Font } from "style";
 import { NavStatelessComponent } from "interfaces";
 
 import { GuideCategory } from "../../../types/guide";
@@ -83,13 +83,14 @@ const ActTabNavigator: NavStatelessComponent = () => (
   </Tab.Navigator>
 );
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("ACT_SCREEN_TITLE"),
   headerBackButtonDisplayMode: "minimal",
-  headerTitle: () => <Text.H1>{t("ACT_SCREEN_TITLE")}</Text.H1>,
+  headerTintColor: Colors.grey100,
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 ActTabNavigator.navigationOptions = navigationOptions();

app/navigation/Navigator/BottomTab/AddEmissionNavigator.tsx

@@ -1,33 +1,33 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import AddEmissionScreen from "../../../screens/AddEmission";
 import CategorySelectionScreen from "../../../screens/CategorySelection";
 import SubCategorySelectionScreen from "../../../screens/SubCategorySelection";
 import BarCodeScanScreen from "../../../screens/BarCodeScan";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const AddEmissionNavigator = (): React.ReactElement => (
   <Stack.Navigator id="AddEmissionStack">
     <Stack.Screen
       name="CategorySelection"
-      options={CategorySelectionScreen.navigationOptions}
+      options={CategorySelectionScreen.navigationOptions as NativeStackNavigationOptions}
       component={CategorySelectionScreen}
     />
     <Stack.Screen
       name="SubCategorySelection"
-      options={SubCategorySelectionScreen.navigationOptions}
+      options={SubCategorySelectionScreen.navigationOptions as NativeStackNavigationOptions}
       component={SubCategorySelectionScreen}
     />
     <Stack.Screen
       name="AddEmission"
-      options={AddEmissionScreen.navigationOptions}
+      options={AddEmissionScreen.navigationOptions as NativeStackNavigationOptions}
       component={AddEmissionScreen}
     />
     <Stack.Screen
       name="BarCodeScan"
-      options={BarCodeScanScreen.navigationOptions}
+      options={BarCodeScanScreen.navigationOptions as NativeStackNavigationOptions}
       component={BarCodeScanScreen}
     />
   </Stack.Navigator>

app/navigation/Navigator/BottomTab/BudgetNavigator.tsx

@@ -1,23 +1,27 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import BudgetScreen from "../../../screens/Budget";
 import MontlyBudgetScreen from "../../../screens/MonthlyBudget";
 import AddEmissionScreen from "../../../screens/AddEmission";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const BudgetNavigator = (): React.ReactElement => (
   <Stack.Navigator id="BudgetStack">
-    <Stack.Screen name="Budget" options={BudgetScreen.navigationOptions} component={BudgetScreen} />
+    <Stack.Screen
+      name="Budget"
+      options={BudgetScreen.navigationOptions as NativeStackNavigationOptions}
+      component={BudgetScreen}
+    />
     <Stack.Screen
       name="MonthlyBudget"
-      options={MontlyBudgetScreen.navigationOptions}
+      options={MontlyBudgetScreen.navigationOptions as NativeStackNavigationOptions}
       component={MontlyBudgetScreen}
     />
     <Stack.Screen
       name="AddEmission"
-      options={AddEmissionScreen.navigationOptions}
+      options={AddEmissionScreen.navigationOptions as NativeStackNavigationOptions}
       component={AddEmissionScreen}
     />
   </Stack.Navigator>

app/navigation/Navigator/BottomTab/EmissionsNavigator.tsx

@@ -1,33 +1,33 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import EmissionItemScreen from "../../../screens/EmissionItem";
 import EmissionsScreen from "../../../screens/Emissions";
 import MonthlyEmissionsScreen from "../../../screens/MonthlyEmissions";
 import RecurringEmissionsScreen from "../../../screens/RecurringEmissions";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const EmissionsNavigator = (): React.ReactElement => (
   <Stack.Navigator id="EmissionsStack">
     <Stack.Screen
       name="Emissions"
-      options={EmissionsScreen.navigationOptions}
+      options={EmissionsScreen.navigationOptions as NativeStackNavigationOptions}
       component={EmissionsScreen}
     />
     <Stack.Screen
       name="EmissionItem"
-      options={EmissionItemScreen.navigationOptions}
+      options={EmissionItemScreen.navigationOptions as NativeStackNavigationOptions}
       component={EmissionItemScreen}
     />
     <Stack.Screen
       name="MonthlyEmissions"
-      options={MonthlyEmissionsScreen.navigationOptions}
+      options={MonthlyEmissionsScreen.navigationOptions as NativeStackNavigationOptions}
       component={MonthlyEmissionsScreen}
     />
     <Stack.Screen
       name="RecurringEmissions"
-      options={RecurringEmissionsScreen.navigationOptions}
+      options={RecurringEmissionsScreen.navigationOptions as NativeStackNavigationOptions}
       component={RecurringEmissionsScreen}
     />
   </Stack.Navigator>

app/navigation/Navigator/BottomTab/SettingsNavigator.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import SettingsScreen from "../../../screens/Settings";
 import AboutScreen from "../../../screens/About";
@@ -10,36 +10,36 @@ import NotificationsScreen from "../../../screens/Notifications";
 import MyData from "../../../screens/MyData";
 import LanguagesScreen from "../../../screens/Languages/LanguagesScreen";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const SettingsNavigator = (): React.ReactElement => (
   <Stack.Navigator id="SettingsStack">
     <Stack.Screen
       name="Settings"
-      options={SettingsScreen.navigationOptions}
+      options={SettingsScreen.navigationOptions as NativeStackNavigationOptions}
       component={SettingsScreen}
     />
-    <Stack.Screen name="About" options={AboutScreen.navigationOptions} component={AboutScreen} />
+    <Stack.Screen name="About" options={AboutScreen.navigationOptions as NativeStackNavigationOptions} component={AboutScreen} />
     <Stack.Screen
       name="SupportUs"
-      options={SupportUsScreen.navigationOptions}
+      options={SupportUsScreen.navigationOptions as NativeStackNavigationOptions}
       component={SupportUsScreen}
     />
     <Stack.Screen
       name="MyLocation"
-      options={MyLocationScreen.navigationOptions}
+      options={MyLocationScreen.navigationOptions as NativeStackNavigationOptions}
       component={MyLocationScreen}
     />
-    <Stack.Screen name="Faq" options={FaqScreen.navigationOptions} component={FaqScreen} />
+    <Stack.Screen name="Faq" options={FaqScreen.navigationOptions as NativeStackNavigationOptions} component={FaqScreen} />
     <Stack.Screen
       name="Notifications"
-      options={NotificationsScreen.navigationOptions}
+      options={NotificationsScreen.navigationOptions as NativeStackNavigationOptions}
       component={NotificationsScreen}
     />
-    <Stack.Screen name="MyData" options={MyData.navigationOptions} component={MyData} />
+    <Stack.Screen name="MyData" options={MyData.navigationOptions as NativeStackNavigationOptions} component={MyData} />
     <Stack.Screen
       name="Languages"
-      options={LanguagesScreen.navigationOptions}
+      options={LanguagesScreen.navigationOptions as NativeStackNavigationOptions}
       component={LanguagesScreen}
     />
   </Stack.Navigator>

app/navigation/Navigator/BottomTabNavigator.tsx

@@ -64,11 +64,9 @@ const BottomTabNavigator = (): React.ReactElement => {
         options={AddEmissionOptions}
         component={AddEmissionNavigator}
       />
-      <BottomTab.Screen
-        name="Act"
-        options={ActOptions}
-        component={ActNavigator}
-      />
+      {__DEV__ && (
+        <BottomTab.Screen name="Act" options={ActOptions} component={ActNavigator} />
+      )}
       <BottomTab.Screen
         name="SettingsNavigator"
         options={SettingsOptions}

app/navigation/Navigator/InfoModalNavigator.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createStackNavigator, StackNavigationOptions } from "@react-navigation/stack";
 
 import InfoModalScreen from "../../screens/InfoModal";
 
@@ -9,7 +9,7 @@ const InfoModalNavigator = (): React.ReactElement => (
   <Stack.Navigator id="InfoModalStack">
     <Stack.Screen
       name="InfoModal"
-      options={InfoModalScreen.navigationOptions}
+      options={InfoModalScreen.navigationOptions as StackNavigationOptions}
       component={InfoModalScreen}
     />
   </Stack.Navigator>

app/navigation/Navigator/ModalNavigator.tsx

@@ -1,27 +1,27 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
 import ComingSoonScreen from "../../screens/ComingSoon";
 import PeriodicityModalScreen from "../../screens/Periodicity";
 import InfoModalScreen from "../../screens/InfoModal";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const ModalNavigator = (): React.ReactElement => (
   <Stack.Navigator id="ModalStack">
     <Stack.Screen
       name="ComingSoonModal"
-      options={ComingSoonScreen.navigationOptions}
+      options={ComingSoonScreen.navigationOptions as NativeStackNavigationOptions}
       component={ComingSoonScreen}
     />
     <Stack.Screen
       name="PeriodicityModal"
-      options={PeriodicityModalScreen.navigationOptions}
+      options={PeriodicityModalScreen.navigationOptions as NativeStackNavigationOptions}
       component={PeriodicityModalScreen}
     />
     <Stack.Screen
       name="InfoModal"
-      options={InfoModalScreen.navigationOptions}
+      options={InfoModalScreen.navigationOptions as NativeStackNavigationOptions}
       component={InfoModalScreen}
     />
   </Stack.Navigator>

app/navigation/Navigator/PeriodicityModalNavigator.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createStackNavigator, StackNavigationOptions } from "@react-navigation/stack";
 
 import PeriodicityModalScreen from "../../screens/Periodicity";
 
@@ -9,7 +9,7 @@ const PeriodicityModalNavigator = (): React.ReactElement => (
   <Stack.Navigator id="PeriodicityModalStack">
     <Stack.Screen
       name="PeriodicityModal"
-      options={PeriodicityModalScreen.navigationOptions}
+      options={PeriodicityModalScreen.navigationOptions as StackNavigationOptions}
       component={PeriodicityModalScreen}
     />
   </Stack.Navigator>

app/navigation/Navigator/RootNavigator.tsx

@@ -1,18 +1,16 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator, NativeStackNavigationOptions } from "@react-navigation/native-stack";
 import { useSelector } from "react-redux";
 
 import { Preferences } from "constant";
 import { userPreferences } from "ducks";
-import { ComponentsStyle } from "style";
 
 import IntroScreen from "../../screens/Intro";
 import BottomTabNavigator from "./BottomTabNavigator";
 
-const Stack = createStackNavigator();
-const screenOptions = {
+const Stack = createNativeStackNavigator();
+const screenOptions: NativeStackNavigationOptions = {
   headerShown: false,
-  ...ComponentsStyle.transitionBetweenScreenPresets,
 };
 
 const RootNavigator = (): React.ReactElement => {

app/screens/About/AboutScreen.navigationOptions.tsx

@@ -1,20 +1,16 @@
-import React from "react";
-import { StackNavigationOptions } from "@react-navigation/stack";
+import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 
-import { Text } from "components";
 import { t } from "utils";
-import { Layout, Colors, ComponentsStyle } from "style";
+import { Colors, Font } from "style";
 
-const navigationOptions = (): StackNavigationOptions => ({
-  ...ComponentsStyle.transitionBetweenScreenPresets,
-  headerStyle: {
-    ...ComponentsStyle.header,
-  },
+const navigationOptions = (): NativeStackNavigationOptions => ({
+  title: t("ABOUT_SCREEN_TITLE"),
   headerTintColor: Colors.grey100,
   headerBackButtonDisplayMode: "minimal",
-  headerTitle: () => (
-    <Text.Header style={Layout.androidNavTitle}>{t("ABOUT_SCREEN_TITLE")}</Text.Header>
-  ),
+  headerTitleStyle: {
+    fontFamily: Font.FontWeight.Bold,
+    fontSize: Font.FontSize.Header,
+  },
 });
 
 export default navigationOptions;