Fix tab navigator render loop

App.tsx

@@ -53,9 +53,9 @@ type StateType = {
 export default class App extends React.Component<{}, StateType> {
   navigatorRef: { current: null | NavigationContainerRef };
 
-  defaultHomeRoute: string | null;
+  defaultHomeRoute: string | undefined;
 
-  defaultHomeData: { [key: string]: string };
+  defaultHomeData: { [key: string]: string } | undefined;
 
   urlHandler: URLHandler;
 
@@ -67,8 +67,8 @@ export default class App extends React.Component<{}, StateType> {
     };
     initLocales();
     this.navigatorRef = React.createRef();
-    this.defaultHomeRoute = null;
+    this.defaultHomeRoute = undefined;
-    this.defaultHomeData = {};
+    this.defaultHomeData = undefined;
     this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
     this.urlHandler.listen();
     setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);

src/navigation/MainNavigator.tsx

@@ -313,18 +313,25 @@ function MainStackComponent(props: {
 }
 
 type PropsType = {
-  defaultHomeRoute: string | null;
+  defaultHomeRoute?: string;
-  defaultHomeData: { [key: string]: string };
+  defaultHomeData?: { [key: string]: string };
 };
 
-export default function MainNavigator(props: PropsType) {
+function MainNavigator(props: PropsType) {
   const { preferences } = usePreferences();
   const showIntro = getPreferenceBool(PreferenceKeys.showIntro, preferences);
-
+  const createTabNavigator = () => <TabNavigator {...props} />;
   return (
     <MainStackComponent
       showIntro={showIntro !== false}
-      createTabNavigator={() => <TabNavigator {...props} />}
+      createTabNavigator={createTabNavigator}
     />
   );
 }
+
+export default React.memo(
+  MainNavigator,
+  (pp: PropsType, np: PropsType) =>
+    pp.defaultHomeRoute === np.defaultHomeRoute &&
+    pp.defaultHomeData === np.defaultHomeData
+);

src/navigation/TabNavigator.tsx

@@ -136,8 +136,8 @@ function PlanningStackComponent() {
 const HomeStack = createStackNavigator();
 
 function HomeStackComponent(
-  initialRoute: string | null,
+  initialRoute?: string,
-  defaultData: { [key: string]: string }
+  defaultData?: { [key: string]: string }
 ) {
   let params;
   if (initialRoute) {
@@ -232,8 +232,8 @@ function PlanexStackComponent() {
 const Tab = createBottomTabNavigator<TabStackParamsList>();
 
 type PropsType = {
-  defaultHomeRoute: string | null;
+  defaultHomeRoute?: string;
-  defaultHomeData: { [key: string]: string };
+  defaultHomeData?: { [key: string]: string };
 };
 
 const ICONS: {
@@ -264,7 +264,7 @@ const ICONS: {
   },
 };
 
-export default function TabNavigator(props: PropsType) {
+function TabNavigator(props: PropsType) {
   const { preferences } = usePreferences();
   let defaultRoute = getPreferenceString(
     PreferenceKeys.defaultStartScreen,
@@ -324,6 +324,13 @@ export default function TabNavigator(props: PropsType) {
   );
 }
 
+export default React.memo(
+  TabNavigator,
+  (pp: PropsType, np: PropsType) =>
+    pp.defaultHomeRoute === np.defaultHomeRoute &&
+    pp.defaultHomeData === np.defaultHomeData
+);
+
 export enum TabRoutes {
   Services = 'services',
   Proxiwash = 'proxiwash',

src/screens/Home/HomeScreen.tsx

@@ -139,9 +139,6 @@ const generateNewsFeed = (rawFeed: RawNewsFeedType): Array<FeedItemType> => {
   return finalFeed;
 };
 
-/**
- * Class defining the app's home screen
- */
 function HomeScreen(props: Props) {
   const theme = useTheme();
   const navigation = useNavigation();

src/screens/MainApp.tsx

@@ -15,8 +15,8 @@ import { CustomDarkTheme, CustomWhiteTheme } from '../utils/Themes';
 import { setupStatusBar } from '../utils/Utils';
 
 type Props = {
-  defaultHomeRoute: string | null;
+  defaultHomeRoute?: string;
-  defaultHomeData: { [key: string]: string };
+  defaultHomeData?: { [key: string]: string };
 };
 
 function MainApp(props: Props, ref?: Ref<NavigationContainerRef>) {